Adding upstream version 110.0.1.upstream/110.0.1upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

595 files changed, 30154 insertions, 0 deletions

diff --git a/browser/themes/BuiltInThemeConfig.sys.mjs b/browser/themes/BuiltInThemeConfig.sys.mjs
new file mode 100644
index 0000000000..76bee95de3
--- /dev/null
+++ b/browser/themes/BuiltInThemeConfig.sys.mjs
@@ -0,0 +1,552 @@
+/* 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/. */
+
+/**
+ * A Map of themes built in to the browser, alongwith a Map of collections those themes belong to. Params for the objects contained
+ * within the map:
+ * @param {string} id
+ *   The unique identifier for the theme. The map's key.
+ * @param {string} version
+ *   The theme add-on's semantic version, as defined in its manifest.
+ * @param {string} path
+ *   Path to the add-on files.
+ * @param {string} [expiry]
+ *  Date in YYYY-MM-DD format. Optional. If defined, the themes in the collection can no longer be
+ *  used after this date, unless the user has permission to retain it.
+ * @param {string} [collection]
+ *  The collection id that the theme is a part of. Optional.
+ */
+export const BuiltInThemeConfig = new Map([
+  [
+    "firefox-compact-light@mozilla.org",
+    {
+      version: "1.2",
+      path: "resource://builtin-themes/light/",
+    },
+  ],
+  [
+    "firefox-compact-dark@mozilla.org",
+    {
+      version: "1.2",
+      path: "resource://builtin-themes/dark/",
+    },
+  ],
+  [
+    "firefox-alpenglow@mozilla.org",
+    {
+      version: "1.4",
+      path: "resource://builtin-themes/alpenglow/",
+    },
+  ],
+  [
+    "2022red-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022red/",
+      collection: "true-colors",
+    },
+  ],
+  [
+    "2022orange-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022orange/",
+      collection: "true-colors",
+    },
+  ],
+  [
+    "2022green-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022green/",
+      collection: "true-colors",
+    },
+  ],
+  [
+    "2022yellow-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022yellow/",
+      collection: "true-colors",
+    },
+  ],
+  [
+    "2022purple-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022purple/",
+      collection: "true-colors",
+    },
+  ],
+  [
+    "2022blue-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022blue/",
+      collection: "true-colors",
+    },
+  ],
+  [
+    "lush-soft-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021lush/soft/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "lush-balanced-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021lush/balanced/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "lush-bold-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021lush/bold/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "abstract-soft-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021abstract/soft/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "abstract-balanced-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021abstract/balanced/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "abstract-bold-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021abstract/bold/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "elemental-soft-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021elemental/soft/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "elemental-balanced-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021elemental/balanced/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "elemental-bold-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021elemental/bold/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "cheers-soft-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021cheers/soft/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "cheers-balanced-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021cheers/balanced/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "cheers-bold-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021cheers/bold/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "graffiti-soft-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021graffiti/soft/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "graffiti-balanced-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021graffiti/balanced/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "graffiti-bold-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021graffiti/bold/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "foto-soft-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021foto/soft/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "foto-balanced-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021foto/balanced/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "foto-bold-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2021foto/bold/",
+      collection: "life-in-color",
+    },
+  ],
+  [
+    "playmaker-soft-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022playmaker/soft/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "playmaker-colorway-description",
+        groupName: "playmaker-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-playmaker.avif",
+    },
+  ],
+  [
+    "playmaker-balanced-colorway@mozilla.org",
+    {
+      version: "1.1.2",
+      path: "resource://builtin-themes/colorways/2022playmaker/balanced/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "playmaker-colorway-description",
+        groupName: "playmaker-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-playmaker.avif",
+    },
+  ],
+  [
+    "playmaker-bold-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022playmaker/bold/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "playmaker-colorway-description",
+        groupName: "playmaker-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-playmaker.avif",
+    },
+  ],
+  [
+    "expressionist-soft-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022expressionist/soft/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "expressionist-colorway-description",
+        groupName: "expressionist-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-expressionist.avif",
+    },
+  ],
+  [
+    "expressionist-balanced-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022expressionist/balanced/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "expressionist-colorway-description",
+        groupName: "expressionist-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-expressionist.avif",
+    },
+  ],
+  [
+    "expressionist-bold-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022expressionist/bold/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "expressionist-colorway-description",
+        groupName: "expressionist-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-expressionist.avif",
+    },
+  ],
+  [
+    "visionary-soft-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022visionary/soft/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "visionary-colorway-description",
+        groupName: "visionary-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-visionary.avif",
+    },
+  ],
+  [
+    "visionary-balanced-colorway@mozilla.org",
+    {
+      version: "1.1.2",
+      path: "resource://builtin-themes/colorways/2022visionary/balanced/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "visionary-colorway-description",
+        groupName: "visionary-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-visionary.avif",
+    },
+  ],
+  [
+    "visionary-bold-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022visionary/bold/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "visionary-colorway-description",
+        groupName: "visionary-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-visionary.avif",
+    },
+  ],
+  [
+    "activist-soft-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022activist/soft/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "activist-colorway-description",
+        groupName: "activist-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-activist.avif",
+    },
+  ],
+  [
+    "activist-balanced-colorway@mozilla.org",
+    {
+      version: "1.1.2",
+      path: "resource://builtin-themes/colorways/2022activist/balanced/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "activist-colorway-description",
+        groupName: "activist-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-activist.avif",
+    },
+  ],
+  [
+    "activist-bold-colorway@mozilla.org",
+    {
+      version: "1.1.2",
+      path: "resource://builtin-themes/colorways/2022activist/bold/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "activist-colorway-description",
+        groupName: "activist-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-activist.avif",
+    },
+  ],
+  [
+    "dreamer-soft-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022dreamer/soft/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "dreamer-colorway-description",
+        groupName: "dreamer-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-dreamer.avif",
+    },
+  ],
+  [
+    "dreamer-balanced-colorway@mozilla.org",
+    {
+      version: "1.1.2",
+      path: "resource://builtin-themes/colorways/2022dreamer/balanced/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "dreamer-colorway-description",
+        groupName: "dreamer-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-dreamer.avif",
+    },
+  ],
+  [
+    "dreamer-bold-colorway@mozilla.org",
+    {
+      version: "1.1.1",
+      path: "resource://builtin-themes/colorways/2022dreamer/bold/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "dreamer-colorway-description",
+        groupName: "dreamer-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-dreamer.avif",
+    },
+  ],
+  [
+    "innovator-soft-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022innovator/soft/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "innovator-colorway-description",
+        groupName: "innovator-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-innovator.avif",
+    },
+  ],
+  [
+    "innovator-balanced-colorway@mozilla.org",
+    {
+      version: "1.1.1",
+      path: "resource://builtin-themes/colorways/2022innovator/balanced/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "innovator-colorway-description",
+        groupName: "innovator-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-innovator.avif",
+    },
+  ],
+  [
+    "innovator-bold-colorway@mozilla.org",
+    {
+      version: "1.1",
+      path: "resource://builtin-themes/colorways/2022innovator/bold/",
+      collection: "independent-voices",
+      l10nId: {
+        description: "innovator-colorway-description",
+        groupName: "innovator-colorway-name",
+      },
+      figureUrl:
+        "chrome://browser/content/colorways/assets/independent-voices-innovator.avif",
+    },
+  ],
+]);
+
+const ColorwayCollections = [
+  {
+    id: "life-in-color",
+    expiry: "2022-02-08",
+  },
+  {
+    id: "true-colors",
+    expiry: "2022-05-03",
+  },
+  {
+    id: "independent-voices",
+    expiry: "2023-01-17",
+    l10nId: {
+      title: "colorway-collection-independent-voices",
+      description: "colorway-collection-independent-voices-description",
+    },
+    cardImagePath:
+      "chrome://browser/content/colorways/assets/independent-voices-collection-banner.avif",
+    figureUrl:
+      "chrome://browser/content/colorways/assets/independent-voices-collection.avif",
+  },
+];
+
+export function _applyColorwayConfig(collections) {
+  const collectionsSorted = collections
+    .map(({ expiry, ...rest }) => ({
+      expiry: new Date(expiry),
+      ...rest,
+    }))
+    .sort((a, b) => a.expiry - b.expiry);
+  const collectionsMap = collectionsSorted.reduce((map, c) => {
+    map.set(c.id, c);
+    return map;
+  }, new Map());
+  for (let [key, value] of BuiltInThemeConfig.entries()) {
+    if (value.collection) {
+      const collectionConfig = collectionsMap.get(value.collection);
+      BuiltInThemeConfig.set(key, {
+        ...value,
+        expiry: collectionConfig.expiry,
+      });
+    }
+  }
+  BuiltInThemeConfig.findActiveColorwayCollection = (now = new Date()) => {
+    let collection = null;
+    let start = 0;
+    let end = collectionsSorted.length - 1;
+    while (start <= end) {
+      const mid = Math.floor((start + end) / 2);
+      const c = collectionsSorted[mid];
+      const diff = c.expiry - now;
+      if (diff < 0) {
+        // collection expired, look for newer one
+        start = mid + 1;
+      } else {
+        // collection not expired, check for older one
+        collection = c;
+        end = mid - 1;
+      }
+    }
+    return collection;
+  };
+}
+
+_applyColorwayConfig(ColorwayCollections);
diff --git a/browser/themes/BuiltInThemes.sys.mjs b/browser/themes/BuiltInThemes.sys.mjs
new file mode 100644
index 0000000000..f4c3ce5682
--- /dev/null
+++ b/browser/themes/BuiltInThemes.sys.mjs
@@ -0,0 +1,325 @@
+/* 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/. */
+
+import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  BuiltInThemeConfig: "resource:///modules/BuiltInThemeConfig.sys.mjs",
+});
+
+XPCOMUtils.defineLazyModuleGetters(lazy, {
+  AddonManager: "resource://gre/modules/AddonManager.jsm",
+});
+
+const ColorwayL10n = new Localization(["browser/colorways.ftl"], true);
+
+const kActiveThemePref = "extensions.activeThemeID";
+const kRetainedThemesPref = "browser.theme.retainedExpiredThemes";
+
+const ColorwayIntensityIdPostfixToL10nMap = [
+  ["-soft-colorway@mozilla.org", "colorway-intensity-soft"],
+  ["-balanced-colorway@mozilla.org", "colorway-intensity-balanced"],
+  ["-bold-colorway@mozilla.org", "colorway-intensity-bold"],
+];
+
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "retainedThemes",
+  kRetainedThemesPref,
+  null,
+  null,
+  val => {
+    if (!val) {
+      return [];
+    }
+
+    let parsedVal;
+    try {
+      parsedVal = JSON.parse(val);
+    } catch (ex) {
+      console.log(`${kRetainedThemesPref} has invalid value.`);
+      return [];
+    }
+
+    return parsedVal;
+  }
+);
+
+class _BuiltInThemes {
+  /**
+   * The list of themes to be installed. This is exposed on the class so tests
+   * can set custom config files.
+   */
+  builtInThemeMap = lazy.BuiltInThemeConfig;
+
+  /**
+   * @param {string} id An addon's id string.
+   * @returns {string}
+   *   If `id` refers to a built-in theme, returns a path pointing to the
+   *   theme's preview image. Null otherwise.
+   */
+  previewForBuiltInThemeId(id) {
+    let theme = this.builtInThemeMap.get(id);
+    if (theme) {
+      return `${theme.path}preview.svg`;
+    }
+
+    return null;
+  }
+
+  /**
+   * @param {string} id An addon's id string.
+   * @return {boolean}
+   *   True if the theme with id `id` is a monochromatic theme.
+   */
+  isMonochromaticTheme(id) {
+    return id.endsWith("-colorway@mozilla.org");
+  }
+
+  /**
+   * If the active theme is built-in, this function calls
+   * AddonManager.maybeInstallBuiltinAddon for that theme.
+   */
+  maybeInstallActiveBuiltInTheme() {
+    const activeThemeID = Services.prefs.getStringPref(
+      kActiveThemePref,
+      "default-theme@mozilla.org"
+    );
+    let activeBuiltInTheme = this.builtInThemeMap.get(activeThemeID);
+
+    if (activeBuiltInTheme) {
+      lazy.AddonManager.maybeInstallBuiltinAddon(
+        activeThemeID,
+        activeBuiltInTheme.version,
+        `resource://builtin-themes/${activeBuiltInTheme.path}`
+      );
+    }
+  }
+
+  /**
+   * Ensures that all built-in themes are installed and expired themes are
+   * uninstalled.
+   */
+  async ensureBuiltInThemes() {
+    let installPromises = [];
+    installPromises.push(this._uninstallExpiredThemes());
+
+    const now = new Date();
+    this.monochromaticSortIndices = new Map();
+    let monochromaticSortIndex = 0;
+    for (let [id, themeInfo] of this.builtInThemeMap.entries()) {
+      if (
+        !themeInfo.expiry ||
+        lazy.retainedThemes.includes(id) ||
+        new Date(themeInfo.expiry) > now
+      ) {
+        installPromises.push(
+          lazy.AddonManager.maybeInstallBuiltinAddon(
+            id,
+            themeInfo.version,
+            themeInfo.path
+          )
+        );
+        if (this.isMonochromaticTheme(id)) {
+          // Monochromatic themes get sorted in the UI according to their
+          // position in the config, implied by this loop over
+          // builtInThemeMap.entries().
+          this.monochromaticSortIndices.set(id, monochromaticSortIndex++);
+        }
+      }
+    }
+
+    await Promise.all(installPromises);
+  }
+
+  /**
+   * @param {string} id
+   *   A theme's ID.
+   * @returns {boolean}
+   *   Returns true if the theme is expired. False otherwise.
+   * @note This looks up the id in a Map rather than accessing a property on
+   *   the addon itself. That makes calls to this function O(m) where m is the
+   *   total number of built-in themes offered now or in the past. Since we
+   *   are using a Map, calls are O(1) in the average case.
+   */
+  themeIsExpired(id) {
+    let themeInfo = this.builtInThemeMap.get(id);
+    return themeInfo?.expiry && new Date(themeInfo.expiry) < new Date();
+  }
+
+  /**
+   * @param {string} id
+   *   The theme's id.
+   * @return {boolean}
+   *   True if the theme with id `id` is both expired and retained. That is,
+   *   the user has the ability to use it after its expiry date.
+   */
+  isRetainedExpiredTheme(id) {
+    return lazy.retainedThemes.includes(id) && this.themeIsExpired(id);
+  }
+
+  /**
+   * @param {string} id
+   *   The theme's id.
+   * @return {boolean}
+   *   True if the theme with id `id` is from the currently active theme.
+   */
+  isActiveTheme(id) {
+    return (
+      id ===
+      Services.prefs.getStringPref(
+        kActiveThemePref,
+        "default-theme@mozilla.org"
+      )
+    );
+  }
+
+  /**
+   * Uninstalls themes after they expire. If the expired theme is active, then
+   * it is not uninstalled. Instead, it is saved so that the user can use it
+   * indefinitely.
+   */
+  async _uninstallExpiredThemes() {
+    const activeThemeID = Services.prefs.getStringPref(
+      kActiveThemePref,
+      "default-theme@mozilla.org"
+    );
+    const now = new Date();
+    const expiredThemes = Array.from(this.builtInThemeMap.entries()).filter(
+      ([id, themeInfo]) =>
+        !!themeInfo.expiry &&
+        !lazy.retainedThemes.includes(id) &&
+        new Date(themeInfo.expiry) <= now
+    );
+    for (let [id] of expiredThemes) {
+      if (id == activeThemeID) {
+        this._retainLimitedTimeTheme(id);
+      } else {
+        try {
+          let addon = await lazy.AddonManager.getAddonByID(id);
+          if (addon) {
+            await addon.uninstall();
+          }
+        } catch (e) {
+          console.error(`Failed to uninstall expired theme ${id}`);
+        }
+      }
+    }
+  }
+
+  /**
+   * Set a pref to ensure that the user can continue to use a specified theme
+   * past its expiry date.
+   * @param {string} id
+   *   The ID of the theme to retain.
+   */
+  _retainLimitedTimeTheme(id) {
+    if (!lazy.retainedThemes.includes(id)) {
+      lazy.retainedThemes.push(id);
+      Services.prefs.setStringPref(
+        kRetainedThemesPref,
+        JSON.stringify(lazy.retainedThemes)
+      );
+    }
+  }
+
+  /**
+   * Removes from the retained expired theme list colorways themes that have been
+   * migrated from the one installed in the built-in XPIProvider location
+   * to an AMO hosted xpi installed in the user profile XPIProvider location.
+   * @param {string} id
+   *   The ID of the theme to remove from the retained themes list.
+   */
+
+  unretainMigratedColorwayTheme(id) {
+    if (lazy.retainedThemes.includes(id)) {
+      const retainedThemes = lazy.retainedThemes.filter(
+        retainedThemeId => retainedThemeId !== id
+      );
+      Services.prefs.setStringPref(
+        kRetainedThemesPref,
+        JSON.stringify(retainedThemes)
+      );
+    }
+  }
+
+  /**
+   * Finds the active colorway collection.
+   * @return {object}
+   *   Colorway Collection
+   */
+  findActiveColorwayCollection() {
+    return this.builtInThemeMap.findActiveColorwayCollection();
+  }
+
+  /**
+   * @return {boolean}
+   *   Whether a specific theme is part of the currently active colorway
+   *   collection.
+   */
+  isColorwayFromCurrentCollection(id) {
+    let collection = this.findActiveColorwayCollection();
+    return (
+      collection && this.builtInThemeMap.get(id)?.collection == collection.id
+    );
+  }
+
+  /**
+   * Colorway collections are usually divided into and presented as "groups".
+   * A group either contains closely related colorways, e.g. stemming from the
+   * same base color but with different intensities (soft, balanced, and bold),
+   * or if the current collection doesn't have intensities, each colorway is
+   * their own group. Group name localization is optional.
+   * @param {string} id
+   *   The ID of the colorway add-on.
+   * @return {string}
+   *   Localized colorway group name. null if there's no such name, in which
+   *   case the caller should fall back on getting a name from the add-on API.
+   */
+  getLocalizedColorwayGroupName(colorwayId) {
+    return this._getColorwayString(colorwayId, "groupName");
+  }
+
+  /**
+   * @param {string} id
+   *   The ID of the colorway add-on.
+   * @return {string}
+   *   L10nId for intensity value of the colorway with the provided id, null if
+   *   there's none.
+   */
+  getColorwayIntensityL10nId(colorwayId) {
+    const result = ColorwayIntensityIdPostfixToL10nMap.find(
+      ([postfix, l10nId]) => colorwayId.endsWith(postfix)
+    );
+    return result ? result[1] : null;
+  }
+
+  /**
+   * @param {string} id
+   *   The ID of the colorway add-on.
+   * @return {string}
+   *   Localized description of the colorway with the provided id, null if
+   *   there's none.
+   */
+  getLocalizedColorwayDescription(colorwayId) {
+    return this._getColorwayString(colorwayId, "description");
+  }
+
+  _getColorwayString(colorwayId, stringType) {
+    let l10nId = this.builtInThemeMap.get(colorwayId)?.l10nId?.[stringType];
+    let s;
+    if (l10nId) {
+      [s] = ColorwayL10n.formatMessagesSync([
+        {
+          id: l10nId,
+        },
+      ]);
+    }
+    return s?.value || null;
+  }
+}
+
+export var BuiltInThemes = new _BuiltInThemes();
diff --git a/browser/themes/LICENSE b/browser/themes/LICENSE
new file mode 100644
index 0000000000..39d4f8fdf5
--- /dev/null
+++ b/browser/themes/LICENSE
@@ -0,0 +1,2 @@
+All files in this directory are assumed to be licensed under the MPL 2 license
+which is used throughout this codebase.
diff --git a/browser/themes/ThemeVariableMap.sys.mjs b/browser/themes/ThemeVariableMap.sys.mjs
new file mode 100644
index 0000000000..f2fd99193d
--- /dev/null
+++ b/browser/themes/ThemeVariableMap.sys.mjs
@@ -0,0 +1,190 @@
+/* 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/. */
+
+export const ThemeVariableMap = [
+  [
+    "--lwt-accent-color-inactive",
+    {
+      lwtProperty: "accentcolorInactive",
+    },
+  ],
+  [
+    "--lwt-background-alignment",
+    {
+      isColor: false,
+      lwtProperty: "backgroundsAlignment",
+    },
+  ],
+  [
+    "--lwt-background-tiling",
+    {
+      isColor: false,
+      lwtProperty: "backgroundsTiling",
+    },
+  ],
+  [
+    "--tab-loading-fill",
+    {
+      lwtProperty: "tab_loading",
+      optionalElementID: "tabbrowser-tabs",
+    },
+  ],
+  [
+    "--lwt-tab-text",
+    {
+      lwtProperty: "tab_text",
+    },
+  ],
+  [
+    "--lwt-tab-line-color",
+    {
+      lwtProperty: "tab_line",
+      optionalElementID: "TabsToolbar",
+    },
+  ],
+  [
+    "--lwt-background-tab-separator-color",
+    {
+      lwtProperty: "tab_background_separator",
+    },
+  ],
+  [
+    "--toolbar-bgcolor",
+    {
+      lwtProperty: "toolbarColor",
+    },
+  ],
+  [
+    "--toolbar-color",
+    {
+      lwtProperty: "toolbar_text",
+    },
+  ],
+  [
+    "--lwt-tabs-border-color",
+    {
+      lwtProperty: "toolbar_top_separator",
+      optionalElementID: "navigator-toolbox",
+    },
+  ],
+  [
+    "--toolbarseparator-color",
+    {
+      lwtProperty: "toolbar_vertical_separator",
+    },
+  ],
+  [
+    "--chrome-content-separator-color",
+    {
+      lwtProperty: "toolbar_bottom_separator",
+    },
+  ],
+  [
+    "--toolbarbutton-icon-fill",
+    {
+      lwtProperty: "icon_color",
+    },
+  ],
+  [
+    "--lwt-toolbarbutton-icon-fill-attention",
+    {
+      lwtProperty: "icon_attention_color",
+    },
+  ],
+  [
+    "--toolbarbutton-hover-background",
+    {
+      lwtProperty: "button_background_hover",
+    },
+  ],
+  [
+    "--toolbarbutton-active-background",
+    {
+      lwtProperty: "button_background_active",
+    },
+  ],
+  [
+    "--lwt-selected-tab-background-color",
+    {
+      lwtProperty: "tab_selected",
+    },
+  ],
+  [
+    "--autocomplete-popup-highlight-background",
+    {
+      lwtProperty: "popup_highlight",
+    },
+  ],
+  [
+    "--autocomplete-popup-highlight-color",
+    {
+      lwtProperty: "popup_highlight_text",
+    },
+  ],
+  [
+    "--sidebar-background-color",
+    {
+      lwtProperty: "sidebar",
+      optionalElementID: "sidebar-box",
+      processColor(rgbaChannels, element) {
+        if (!rgbaChannels) {
+          element.removeAttribute("lwt-sidebar");
+          return null;
+        }
+        const { r, g, b } = rgbaChannels;
+        element.setAttribute("lwt-sidebar", "true");
+        // Drop alpha channel
+        return `rgb(${r}, ${g}, ${b})`;
+      },
+    },
+  ],
+  [
+    "--sidebar-text-color",
+    {
+      lwtProperty: "sidebar_text",
+      optionalElementID: "sidebar-box",
+    },
+  ],
+  [
+    "--sidebar-border-color",
+    {
+      lwtProperty: "sidebar_border",
+      optionalElementID: "browser",
+    },
+  ],
+  [
+    "--tabpanel-background-color",
+    {
+      lwtProperty: "ntp_background",
+      processColor(rgbaChannels) {
+        if (
+          !rgbaChannels ||
+          !Services.prefs.getBoolPref("browser.newtabpage.enabled")
+        ) {
+          // We only set the tabpanel background to the new tab background color
+          // if the user uses about:home for new tabs. Otherwise, we flash a
+          // colorful background when a new tab is opened. We will flash the
+          // newtab color in new windows if the user uses about:home for new
+          // tabs but not new windows. However, the flash is concealed by the OS
+          // window-open animation.
+          return null;
+        }
+        // Drop alpha channel
+        let { r, g, b } = rgbaChannels;
+        return `rgb(${r}, ${g}, ${b})`;
+      },
+    },
+  ],
+];
+
+export const ThemeContentPropertyList = [
+  "ntp_background",
+  "ntp_card_background",
+  "ntp_text",
+  "sidebar",
+  "sidebar_highlight",
+  "sidebar_highlight_text",
+  "sidebar_text",
+  "zap_gradient",
+];
diff --git a/browser/themes/Windows8WindowFrameColor.sys.mjs b/browser/themes/Windows8WindowFrameColor.sys.mjs
new file mode 100644
index 0000000000..dfca020255
--- /dev/null
+++ b/browser/themes/Windows8WindowFrameColor.sys.mjs
@@ -0,0 +1,55 @@
+/* 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/. */
+
+import { WindowsRegistry as Registry } from "resource://gre/modules/WindowsRegistry.sys.mjs";
+
+export var Windows8WindowFrameColor = {
+  _windowFrameColor: null,
+
+  get() {
+    if (this._windowFrameColor) {
+      return this._windowFrameColor;
+    }
+
+    const HKCU = Ci.nsIWindowsRegKey.ROOT_KEY_CURRENT_USER;
+    const dwmKey = "Software\\Microsoft\\Windows\\DWM";
+    let customizationColor = Registry.readRegKey(
+      HKCU,
+      dwmKey,
+      "ColorizationColor"
+    );
+    if (customizationColor == undefined) {
+      // Seems to be the default color (hardcoded because of bug 1065998)
+      return [158, 158, 158];
+    }
+
+    // The color returned from the Registry is in decimal form.
+    let customizationColorHex = customizationColor.toString(16);
+
+    // Zero-pad the number just to make sure that it is 8 digits.
+    customizationColorHex = ("00000000" + customizationColorHex).substr(-8);
+    let customizationColorArray = customizationColorHex.match(/../g);
+    let [, fgR, fgG, fgB] = customizationColorArray.map(val =>
+      parseInt(val, 16)
+    );
+    let colorizationColorBalance = Registry.readRegKey(
+      HKCU,
+      dwmKey,
+      "ColorizationColorBalance"
+    );
+    if (colorizationColorBalance == undefined) {
+      colorizationColorBalance = 78;
+    }
+
+    // Window frame base color when Color Intensity is at 0, see bug 1004576.
+    let frameBaseColor = 217;
+    let alpha = colorizationColorBalance / 100;
+
+    // Alpha-blend the foreground color with the frame base color.
+    let r = Math.round(fgR * alpha + frameBaseColor * (1 - alpha));
+    let g = Math.round(fgG * alpha + frameBaseColor * (1 - alpha));
+    let b = Math.round(fgB * alpha + frameBaseColor * (1 - alpha));
+    return (this._windowFrameColor = [r, g, b]);
+  },
+};
diff --git a/browser/themes/addons/alpenglow/background-gradient-dark.svg b/browser/themes/addons/alpenglow/background-gradient-dark.svg
new file mode 100644
index 0000000000..6ab26b42d5
--- /dev/null
+++ b/browser/themes/addons/alpenglow/background-gradient-dark.svg
@@ -0,0 +1,4 @@
+<!-- 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="72" height="144" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="50%" id="a"><stop stop-color="#20123A" offset="0%"/><stop stop-color="#291D4F" offset="100%"/></linearGradient></defs><path fill="url(#a)" d="M0 0h72v144H0z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/browser/themes/addons/alpenglow/background-gradient.svg b/browser/themes/addons/alpenglow/background-gradient.svg
new file mode 100644
index 0000000000..a0b54a46ad
--- /dev/null
+++ b/browser/themes/addons/alpenglow/background-gradient.svg
@@ -0,0 +1,4 @@
+<!-- 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="72" height="144" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="-18.096%" x2="50%" y2="50%" id="a"><stop stop-color="#FF6BBA" offset="0%"/><stop stop-color="#FFC999" offset="100%"/></linearGradient></defs><path fill="url(#a)" d="M0 0h72v144H0z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/browser/themes/addons/alpenglow/background-noodles-left-dark.svg b/browser/themes/addons/alpenglow/background-noodles-left-dark.svg
new file mode 100644
index 0000000000..40d99a78b6
--- /dev/null
+++ b/browser/themes/addons/alpenglow/background-noodles-left-dark.svg
@@ -0,0 +1,4 @@
+<!-- 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="160" height="144" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="9.5%" x2="79.211%" y2="21.548%" id="c"><stop stop-color="#20123A" offset="0%"/><stop stop-color="#20123A" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="62.978%" y2="75.109%" id="d"><stop stop-color="#20123A" offset="0%"/><stop stop-color="#321C64" offset="100%"/></linearGradient><linearGradient x1="41.797%" y1="-6.305%" x2="113.914%" y2="120.857%" id="e"><stop stop-color="#20123A" offset="0%"/><stop stop-color="#5F2ECA" offset="64.418%"/><stop stop-color="#7542E5" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="35.625%" y1="-6.728%" x2="75.087%" y2="128.478%" id="f"><stop stop-color="#2B1753" offset="0%"/><stop stop-color="#7033CA" offset="35.304%"/><stop stop-color="#FF4AD9" offset="73.362%"/><stop stop-color="#FF778E" offset="100%"/><stop stop-color="#FF778E" offset="100%"/></linearGradient><linearGradient x1="51.531%" y1="102.377%" x2="34.091%" y2="-21.792%" id="g"><stop stop-color="#FC4CA0" offset="0%"/><stop stop-color="#FFA769" offset="100%"/></linearGradient><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="a"><stop stop-color="#fff" offset="60%"/><stop stop-color="#fff" stop-opacity="0" offset="100%"/></linearGradient><mask id="b" x="0" y="0" width="100%" height="100%"><rect width="100%" height="100%" fill="url(#a)"/></mask></defs><g mask="url(#b)"><path fill="url(#c)" filter="url(#b)" d="M0 0h160v144H0z"/><path d="M72.036 0C108.15 10.622 135 50.606 135 98.308c0 16.443-3.19 31.97-8.85 45.692H0L-.002 20.97C9.606 11.01 21.095 3.713 33.716 0h38.32z" fill="url(#d)"/><path d="M70.511 0C94.736 17.553 111 50.047 111 87.23c0 21.045-5.21 40.588-14.124 56.77L0 143.997V.003L70.511 0z" fill="url(#e)"/><path d="M38.316 0l52.766 75.046c13.99 19.898 14.364 48.659 2.105 68.954H21.635L0 113.229V0h38.316z" fill="url(#f)"/><path d="M25.588 72.994l2.445 3.333C42.91 95.856 52.223 119.417 56 144H0L-.001 14.588c4.074 21.204 12.588 41.404 25.589 58.406z" fill="url(#g)"/></g></svg>
\ No newline at end of file
diff --git a/browser/themes/addons/alpenglow/background-noodles-left.svg b/browser/themes/addons/alpenglow/background-noodles-left.svg
new file mode 100644
index 0000000000..ee2b4b6b75
--- /dev/null
+++ b/browser/themes/addons/alpenglow/background-noodles-left.svg
@@ -0,0 +1,4 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="160" height="144"><defs><linearGradient id="c" x1="36.13" y1="115.75" x2="36.42" y2="115.63" gradientTransform="matrix(160 0 0 -144 -5724 16732)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fc56a1"/><stop offset="1" stop-color="#fc56a1" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="36.04" y1="115.68" x2="36.45" y2="115.42" gradientTransform="matrix(135 0 0 -144 -4824.07 16732)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fc4ca0"/><stop offset="1" stop-color="#ffa769"/></linearGradient><linearGradient id="e" x1="35.6" y1="116.06" x2="36.35" y2="115.39" gradientTransform="matrix(111 0 0 -144 -3960 16732)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4e27a4"/><stop offset=".34" stop-color="#8b4ee5"/><stop offset=".73" stop-color="#ff4ad9"/><stop offset="1" stop-color="#ff778e"/></linearGradient><linearGradient id="f" x1="35.51" y1="116.3" x2="36.42" y2="115.12" gradientTransform="matrix(102 0 0 -144 -3635.99 16732)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#20123a"/><stop offset=".11" stop-color="#3f2574"/><stop offset=".24" stop-color="#5f39b0"/><stop offset=".34" stop-color="#7245d6"/><stop offset=".39" stop-color="#7a4ae4"/><stop offset=".45" stop-color="#7a4ae4" stop-opacity=".97"/><stop offset=".53" stop-color="#7949e4" stop-opacity=".89"/><stop offset=".63" stop-color="#7948e4" stop-opacity=".75"/><stop offset=".74" stop-color="#7846e4" stop-opacity=".56"/><stop offset=".86" stop-color="#7745e5" stop-opacity=".32"/><stop offset=".99" stop-color="#7542e5" stop-opacity=".02"/><stop offset="1" stop-color="#7542e5" stop-opacity="0"/></linearGradient><linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="a"><stop stop-color="#fff" offset="60%"/><stop stop-color="#fff" stop-opacity="0" offset="100%"/></linearGradient><mask id="b" x="0" y="0" width="100%" height="100%"><rect width="100%" height="100%" fill="url(#a)"/></mask></defs><g mask="url(#b)" fill-rule="evenodd"><path d="M0 0h160v144H0z" fill="url(#c)"/><path d="M72 0c36.11 10.62 63 50.61 63 98.31a119.92 119.92 0 01-8.85 45.69H0V21A77.43 77.43 0 0133.72 0z" fill="url(#d)"/><path d="M70.51 0C94.74 17.55 111 50.05 111 87.23A117.86 117.86 0 0196.88 144H0V0z" fill="url(#e)"/><path d="M38.32 0l52.76 75.05c14 19.89 14.37 48.66 2.11 69H21.64L0 113.23V0z" fill="url(#f)"/><path d="M25.59 73L28 76.33C42.91 95.86 52.22 119.42 56 144H0V14.59C4.07 35.79 12.59 56 25.59 73z" fill="#20123a"/></g></svg>
\ No newline at end of file
diff --git a/browser/themes/addons/alpenglow/background-noodles-right-dark.svg b/browser/themes/addons/alpenglow/background-noodles-right-dark.svg
new file mode 100644
index 0000000000..b8a53679d9
--- /dev/null
+++ b/browser/themes/addons/alpenglow/background-noodles-right-dark.svg
@@ -0,0 +1,4 @@
+<!-- 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="160" height="144" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="40.05%" y1="65.335%" x2="89.619%" y2="55.891%" id="a"><stop stop-color="#20123A" offset="0%"/><stop stop-color="#20123A" stop-opacity="0" offset="100%"/><stop stop-color="#20123A" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="55.904%" y1="13.312%" x2="59.943%" y2="106.223%" id="c"><stop stop-color="#321C64" offset="0%"/><stop stop-color="#20123A" offset="100%"/></linearGradient><linearGradient x1="53.449%" y1="103.324%" x2="83.014%" y2="-63.876%" id="d"><stop stop-color="#20123A" offset="0%"/><stop stop-color="#5F2ECA" offset="64.418%"/><stop stop-color="#7542E5" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="52.55%" y1="106.999%" x2="57.768%" y2="-26.862%" id="e"><stop stop-color="#2B1753" offset="0%"/><stop stop-color="#7033CA" offset="36.937%"/><stop stop-color="#FF4AD9" offset="73.362%"/><stop stop-color="#FF778E" offset="100%"/><stop stop-color="#FF778E" offset="100%"/></linearGradient><linearGradient x1="58.794%" y1="0%" x2="-74.439%" y2="-16.628%" id="f"><stop stop-color="#FC4CA0" offset="0%"/><stop stop-color="#FFA769" offset="100%"/></linearGradient><filter x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" id="b"><feGaussianBlur in="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path fill="url(#a)" filter="url(#b)" transform="rotate(180 80 72)" d="M0 0h160v144H0z"/><path d="M160 0v143.998l-20.783.002C80.276 130.93 34.071 72.955 25 0h135z" fill="url(#c)"/><path d="M160 0v141.76C112.93 119.62 78.896 64.927 76 .003L160 0z" fill="url(#d)"/><path d="M111.14 9.511l.39.968 45.484 116.068A57.65 57.65 0 01160 137h-54V0c1.969 2.852 3.7 6.03 5.14 9.511z" fill="url(#e)" transform="rotate(180 133 68.5)"/><path d="M160 28h-14.998L145 0c3.895 9.971 8.903 19.403 15 28z" fill="url(#f)" transform="rotate(180 152.5 14)"/></g></svg>
\ No newline at end of file
diff --git a/browser/themes/addons/alpenglow/background-noodles-right.svg b/browser/themes/addons/alpenglow/background-noodles-right.svg
new file mode 100644
index 0000000000..da1357b8c7
--- /dev/null
+++ b/browser/themes/addons/alpenglow/background-noodles-right.svg
@@ -0,0 +1,4 @@
+<!-- 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 data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="160" height="144"><defs><linearGradient id="a" x1="36.76" y1="115.32" x2="36.99" y2="115.42" gradientTransform="matrix(-160 0 0 144 5956 -16532)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe82a4"/><stop offset="1" stop-color="#fe7fa3" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="36.29" y1="115.74" x2="35.97" y2="115.48" gradientTransform="matrix(135 0 0 -144 -4799 16732)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fc4ca0"/><stop offset="1" stop-color="#ffa769"/></linearGradient><linearGradient id="c" x1="36.14" y1="116.11" x2="35.99" y2="115.21" gradientTransform="matrix(84 0 0 -141.76 -2912 16472.16)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7542e5"/><stop offset=".15" stop-color="#8b4ee5"/><stop offset=".62" stop-color="#ff4aa2"/><stop offset="1" stop-color="#ff778e"/></linearGradient><linearGradient id="d" x1="191.06" y1="13.93" x2="137.54" y2="64.24" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#20123a"/><stop offset="1" stop-color="#20123a" stop-opacity="0"/></linearGradient></defs><path d="M160 144H0V0h160z" fill-rule="evenodd" fill="url(#a)"/><path d="M160 0v144h-20.78C80.28 130.93 34.07 73 25 0z" fill-rule="evenodd" fill="url(#b)"/><path d="M160 0v141.76C112.93 119.62 78.9 64.93 76 0z" fill-rule="evenodd" fill="url(#c)"/><g fill-rule="evenodd"><path d="M154.86 127.49l-.39-1L109 10.45A56.68 56.68 0 01106 0h54v137a51 51 0 01-5.14-9.51z" fill="#8c58ff"/><path data-name="d" d="M154.86 127.49l-.39-1L109 10.45A56.68 56.68 0 01106 0h54v137a51 51 0 01-5.14-9.51z" fill="url(#d)"/></g><path d="M145 0h15v28a130.53 130.53 0 00-15-28z" fill="#20123a" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/browser/themes/addons/alpenglow/icon.svg b/browser/themes/addons/alpenglow/icon.svg
new file mode 100644
index 0000000000..591ba2fc1b
--- /dev/null
+++ b/browser/themes/addons/alpenglow/icon.svg
@@ -0,0 +1,13 @@
+<!-- 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="0.512202" y1="49.8366" x2="62.5272" y2="0.0151922" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#9059FF"/>
+      <stop offset="0.520833" stop-color="#FF4AA2"/>
+      <stop offset="1" stop-color="#FFBD4F"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/alpenglow/manifest.json b/browser/themes/addons/alpenglow/manifest.json
new file mode 100644
index 0000000000..5dc20b33e8
--- /dev/null
+++ b/browser/themes/addons/alpenglow/manifest.json
@@ -0,0 +1,139 @@
+{
+  "manifest_version": 2,
+
+  "applications": {
+    "gecko": {
+      "id": "firefox-alpenglow@mozilla.org"
+    }
+  },
+
+  "name": "Firefox Alpenglow",
+  "description": "Use a colorful appearance for buttons, menus, and windows.",
+  "version": "1.4",
+  "icons": { "32": "icon.svg" },
+
+  "theme": {
+    "images": {
+      "additional_backgrounds": [
+        "background-noodles-right.svg",
+        "background-noodles-left.svg",
+        "background-gradient.svg"
+      ]
+    },
+
+    "properties": {
+      "additional_backgrounds_alignment": [
+        "right top",
+        "left top",
+        "right top"
+      ],
+      "additional_backgrounds_tiling": ["no-repeat", "no-repeat", "repeat-x"],
+      "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
+    },
+    "colors": {
+      "frame": "hsla(240, 20%, 98%, 1)",
+      "toolbar": "hsla(0, 0%, 100%, .76)",
+      "button_background_active": "hsla(240, 26%, 11%, .16)",
+      "button_background_hover": "hsla(240, 26%, 11%, .08)",
+      "icons": "hsla(258, 66%, 48%, 1)",
+      "icons_attention": "hsla(180, 100%, 32%, 1)",
+      "toolbar_text": "hsla(261, 53%, 15%, 1)",
+      "toolbar_vertical_separator": "hsla(261, 53%, 15%, .2)",
+      "toolbar_field": "hsla(0, 0%, 100%, .8)",
+      "toolbar_field_focus": "hsla(261, 53%, 15%, .96)",
+      "toolbar_field_text": "hsla(261, 53%, 15%, 1)",
+      "toolbar_field_text_focus": "hsla(255, 100%, 94%, 1)",
+      "toolbar_field_border": "transparent",
+      "toolbar_field_border_focus": "hsla(265, 100%, 72%, 1)",
+      "toolbar_field_highlight": "hsla(265, 100%, 72%, .32)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsla(261, 53%, 15%, .32)",
+      "bookmark_text": "hsla(261, 53%, 15%, 1)",
+      "tab_text": "hsla(261, 53%, 15%, 1)",
+      "tab_background_text": "hsla(261, 53%, 15%, 1)",
+      "tab_background_separator": "hsla(261, 53%, 15%, 1)",
+      "tab_line": "hsla(265, 100%, 72%, 1)",
+      "tab_loading": "hsla(265, 100%, 72%, 1)",
+      "ntp_background": "#F9F9FB",
+      "ntp_text": "hsla(261, 53%, 15%, 1)",
+      "popup": "hsla(254, 46%, 21%, 1)",
+      "popup_text": "hsla(255, 100%, 94%, 1)",
+      "popup_border": "hsla(255, 100%, 94%, .32)",
+      "popup_highlight": "hsla(255, 100%, 94%, .12)",
+      "popup_highlight_text": "hsla(0, 0%, 100%, 1)",
+      "sidebar": "hsla(240, 15%, 95%, 1)",
+      "sidebar_text": "hsla(261, 53%, 15%, 1)",
+      "sidebar_border": "hsla(261, 53%, 15%, .24)",
+      "sidebar_highlight": "hsla(265, 100%, 72%, 1)",
+      "sidebar_highlight_text": "hsla(0, 0%, 100%, 1)",
+      "focus_outline": "hsla(258, 65%, 48%, 1)"
+    }
+  },
+  "dark_theme": {
+    "images": {
+      "additional_backgrounds": [
+        "background-noodles-right-dark.svg",
+        "background-noodles-left-dark.svg",
+        "background-gradient-dark.svg"
+      ]
+    },
+
+    "properties": {
+      "additional_backgrounds_alignment": [
+        "right top",
+        "left top",
+        "right top"
+      ],
+      "additional_backgrounds_tiling": ["no-repeat", "no-repeat", "repeat-x"],
+      "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
+    },
+    "colors": {
+      "frame": "hsla(240, 20%, 98%, 1)",
+      "toolbar": "hsla(254, 46%, 21%, .96)",
+      "button_background_active": "hsla(255, 100%, 94%, .24)",
+      "button_background_hover": "hsla(255, 100%, 94%, .12)",
+      "icons": "hsla(271, 100%, 77%, 1)",
+      "icons_attention": "hsla(157, 100%, 66%, 1)",
+      "toolbar_text": "hsla(255, 100%, 94%, 1)",
+      "toolbar_vertical_separator": "hsla(271, 100%, 77%, .4)",
+      "toolbar_field": "hsla(250, 43%, 25%, 1)",
+      "toolbar_field_focus": "hsla(250, 43%, 25%, .98)",
+      "toolbar_field_text": "hsla(255, 100%, 94%, 1)",
+      "toolbar_field_text_focus": "hsla(255, 100%, 94%, 1)",
+      "toolbar_field_border": "transparent",
+      "toolbar_field_border_focus": "hsla(265, 100%, 72%, 1)",
+      "toolbar_field_highlight": "hsla(265, 100%, 72%, .32)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsla(245, 38%, 33%, .96)",
+      "bookmark_text": "hsla(255, 100%, 94%, 1)",
+      "tab_selected": "rgb(60, 31, 123)",
+      "tab_text": "hsla(255, 100%, 94%, 1)",
+      "tab_background_text": "hsla(255, 100%, 94%, 1)",
+      "tab_background_separator": "hsla(255, 100%, 94%, 1)",
+      "tab_line": "hsla(265, 100%, 72%, 1)",
+      "tab_loading": "hsla(265, 100%, 72%, 1)",
+      "ntp_background": "#2A2A2E",
+      "ntp_text": "hsla(255, 100%, 94%, 1)",
+      "popup": "hsla(250, 43%, 25%, 1)",
+      "popup_text": "hsla(255, 100%, 94%, 1)",
+      "popup_border": "hsla(255, 100%, 94%, .32)",
+      "popup_highlight": "hsla(255, 100%, 94%, .12)",
+      "popup_highlight_text": "hsla(0, 0%, 100%, 1)",
+      "sidebar": "hsla(250, 43%, 25%, 1)",
+      "sidebar_text": "hsla(255, 100%, 94%, 1)",
+      "sidebar_border": "hsla(255, 100%, 94%, .24)",
+      "sidebar_highlight": "hsla(259, 76%, 58%, 1)",
+      "sidebar_highlight_text": "hsla(0, 0%, 100%, 1)",
+      "focus_outline": "hsla(265, 100%, 72%, 1)"
+    }
+  },
+
+  "theme_experiment": {
+    "colors": {
+      "focus_outline": "--focus-outline-color"
+    },
+    "properties": {
+      "zap_gradient": "--panel-separator-zap-gradient"
+    }
+  }
+}
diff --git a/browser/themes/addons/alpenglow/preview.svg b/browser/themes/addons/alpenglow/preview.svg
new file mode 100644
index 0000000000..887129ce3b
--- /dev/null
+++ b/browser/themes/addons/alpenglow/preview.svg
@@ -0,0 +1,4 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="680" height="92"><defs><linearGradient id="a" x1="340" y1="110.6483" x2="340" y2="48" gradientTransform="matrix(1, 0, 0, -1, 0, 94)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6bba"/><stop offset="1" stop-color="#ffc999"/></linearGradient><linearGradient id="b" x1="594.6449" y1="19.413" x2="559.1679" y2="2.2744" gradientTransform="matrix(1, 0, 0, -1, 0, 94)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fe82a4"/><stop offset="1" stop-color="#fe7fa3" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="620.5032" y1="28.0963" x2="575.1182" y2="-6.4747" gradientTransform="matrix(1, 0, 0, -1, 0, 94)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fc4ca0"/><stop offset="1" stop-color="#ffa769"/></linearGradient><linearGradient id="d" x1="653.6632" y1="78.8082" x2="619.4852" y2="-42.7065" gradientTransform="matrix(1, 0, 0, -1, 0, 94)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7542e5"/><stop offset="0.15" stop-color="#8b4ee5"/><stop offset="0.62" stop-color="#ff4aa2"/><stop offset="1" stop-color="#ff778e"/></linearGradient><linearGradient id="e" x1="711.0562" y1="80.0741" x2="657.5361" y2="29.7641" gradientTransform="matrix(1, 0, 0, -1, 0, 94)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#20123a"/><stop offset="1" stop-color="#20123a" stop-opacity="0"/></linearGradient><linearGradient id="f" x1="57.8121" y1="32.2012" x2="102.6741" y2="11.5753" gradientTransform="matrix(1, 0, 0, -1, 0, 94)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fc56a1"/><stop offset="1" stop-color="#fc56a1" stop-opacity="0"/></linearGradient><linearGradient id="g" x1="41.4175" y1="20.0672" x2="98.759" y2="-14.0228" xlink:href="#c"/><linearGradient id="h" x1="-18.9468" y1="59.324" x2="82.5921" y2="-10.5968" gradientTransform="matrix(1, 0, 0, -1, 0, 94)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4e27a4"/><stop offset="0.34" stop-color="#8b4ee5"/><stop offset="0.73" stop-color="#ff4ad9"/><stop offset="1" stop-color="#ff778e"/></linearGradient><linearGradient id="i" x1="-37.3141" y1="83.7844" x2="97.6859" y2="-40.2126" gradientTransform="matrix(1, 0, 0, -1, 0, 94)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#20123a"/><stop offset="0.11" stop-color="#3f2574"/><stop offset="0.24" stop-color="#5f39b0"/><stop offset="0.34" stop-color="#7245d6"/><stop offset="0.39" stop-color="#7a4ae4"/><stop offset="0.45" stop-color="#7a4ae4" stop-opacity="0.97"/><stop offset="0.53" stop-color="#7949e4" stop-opacity="0.89"/><stop offset="0.63" stop-color="#7948e4" stop-opacity="0.75"/><stop offset="0.74" stop-color="#7846e4" stop-opacity="0.56"/><stop offset="0.86" stop-color="#7745e5" stop-opacity="0.32"/><stop offset="0.99" stop-color="#7542e5" stop-opacity="0.02"/><stop offset="1" stop-color="#7542e5" stop-opacity="0"/></linearGradient></defs><rect width="680" height="92" fill="url(#a)"/><rect x="520" width="160" height="144" fill="none"/><path d="M680,144H520V0H680Z" fill-rule="evenodd" fill="url(#b)"/><path d="M680,0V144H659.22C600.28,130.93,554.07,73,545,0Z" fill-rule="evenodd" fill="url(#c)"/><path d="M680,0V141.76C632.93,119.62,598.9,64.93,596,0Z" fill-rule="evenodd" fill="url(#d)"/><path d="M674.86,127.49l-.39-1L629,10.45A56.658,56.658,0,0,1,626,0h54V137A51.054,51.054,0,0,1,674.86,127.49Z" fill="#8c58ff" fill-rule="evenodd"/><path d="M674.86,127.49l-.39-1L629,10.45A56.658,56.658,0,0,1,626,0h54V137A51.054,51.054,0,0,1,674.86,127.49Z" fill-rule="evenodd" fill="url(#e)"/><path d="M665,0h15V28A130.5192,130.5192,0,0,0,665,0Z" fill="#20123a" fill-rule="evenodd"/><rect width="160" height="144" fill="none"/><path d="M0,0H160V144H0Z" fill-rule="evenodd" fill="url(#f)"/><path d="M72,0c36.11,10.62,63,50.61,63,98.31A119.9242,119.9242,0,0,1,126.15,144H0V21A77.431,77.431,0,0,1,33.72,0Z" fill-rule="evenodd" fill="url(#g)"/><path d="M70.51,0C94.74,17.55,111,50.05,111,87.23A117.8588,117.8588,0,0,1,96.88,144H0V0Z" fill-rule="evenodd" fill="url(#h)"/><path d="M38.32,0,91.08,75.05c14,19.89,14.37,48.66,2.11,69H21.64L0,113.23V0Z" fill-rule="evenodd" fill="url(#i)"/><path d="M25.59,73,28,76.33C42.91,95.86,52.22,119.42,56,144H0V14.59C4.07,35.79,12.59,56,25.59,73Z" fill="#20123a" fill-rule="evenodd"/><rect x="28" y="5" width="166" height="34" rx="4" fill="#fff" fill-opacity="0.75" stroke="#5a2acb" stroke-width="1.5"/><path d="M53,20H170a2,2,0,0,1,2,2h0a2,2,0,0,1-2,2H53a2,2,0,0,1-2-2h0A2,2,0,0,1,53,20Z" fill="#15141a"/><path d="M223,20H340a2,2,0,0,1,2,2h0a2,2,0,0,1-2,2H223a2,2,0,0,1-2-2h0A2,2,0,0,1,223,20Z" fill="#15141a"/><rect y="44" width="680" height="48" fill="#fff" fill-opacity="0.75"/><circle cx="24" cy="68" r="6.25" fill="none" stroke="#5a2acb" stroke-width="1.5"/><circle cx="60" cy="68" r="6.25" fill="none" stroke="#5a2acb" stroke-width="1.5"/><line x1="663" y1="73.75" x2="649" y2="73.75" fill="none" stroke="#5a2acb" stroke-width="1.5"/><line x1="663" y1="67.75" x2="649" y2="67.75" fill="none" stroke="#5a2acb" stroke-width="1.5"/><line x1="663" y1="61.75" x2="649" y2="61.75" fill="none" stroke="#5a2acb" stroke-width="1.5"/><rect x="114" y="52" width="488" height="32" rx="4" fill="#fff" fill-opacity="0.8"/><circle cx="130" cy="68" r="6.25" fill="none" stroke="#36294e" stroke-width="1.5"/><path d="M148,66H452a2,2,0,0,1,2,2h0a2,2,0,0,1-2,2H148a2,2,0,0,1-2-2h0A2,2,0,0,1,148,66Z" fill="#20123b"/></svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/icon.svg
new file mode 100644
index 0000000000..0bcba9aef3
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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" gradientTransform="rotate(90)">
+      <stop stop-color="#F5AD94"/>
+      <stop offset="1" stop-color="#E1653C"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/manifest.json
new file mode 100644
index 0000000000..25da542d1a
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "abstract-balanced-colorway@mozilla.org"
+    }
+  },
+  "name": "Abstract – Balanced",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(15, 62%, 40%)",
+      "tab_loading_inactive": "hsl(16, 100%, 82%)",
+      "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": "rgba(0, 179, 244, 1)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(15, 62%, 34%)",
+      "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_hover": "hsla(15, 62%, 34%, 0.8)",
+      "address_bar_box_active": "hsla(15, 62%, 34%, 0.65)",
+      "address_bar_box_focus": "hsl(15, 62%, 40%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "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%)",
+      "icons_attention": "hsl(16, 100%, 82%)",
+      "toolbar_field_icons_attention": "hsl(15, 62%, 40%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/preview.svg
new file mode 100644
index 0000000000..24dc27d4c6
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/balanced/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(16, 73%, 97%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/icon.svg
new file mode 100644
index 0000000000..7f5f32157c
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/manifest.json
new file mode 100644
index 0000000000..eda2056e0e
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "abstract-bold-colorway@mozilla.org"
+    }
+  },
+  "name": "Abstract – Bold",
+  "author": "Mozilla",
+  "version": "1.1",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(15, 89%, 86%)",
+      "tab_text": "hsl(15, 89%, 86%)",
+      "tab_selected": "hsl(12, 5%, 21%)",
+      "tab_line": "hsl(15, 100%, 86%)",
+      "tab_loading": "hsl(15, 59%, 75%)",
+      "tab_loading_inactive": "hsl(15, 59%, 75%)",
+      "frame": "hsl(15, 10%, 16%)",
+      "popup": "hsl(12, 5%, 21%)",
+      "popup_text": "hsl(15, 89%, 86%)",
+      "popup_border": "hsl(15, 100%, 86%)",
+      "popup_highlight": "hsla(15, 100%, 86%, 0.2)",
+      "popup_highlight_text": "hsl(15, 89%, 86%)",
+      "toolbar": "hsl(18, 10%, 25%)",
+      "toolbar_text": "hsl(15, 89%, 86%)",
+      "toolbar_field": "hsl(15, 10%, 16%)",
+      "toolbar_field_text": "hsl(15, 89%, 86%)",
+      "toolbar_field_focus": "hsl(12, 5%, 21%)",
+      "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(15, 10%, 16%)",
+      "ntp_background": "hsl(20, 9%, 13%)",
+      "ntp_card_background": "hsl(12, 5%, 21%)",
+      "ntp_text": "hsl(15, 89%, 86%)",
+      "sidebar": "hsl(12, 5%, 21%)",
+      "sidebar_text": "hsl(15, 89%, 86%)",
+      "sidebar_highlight": "hsla(15, 100%, 86%, 0.2)",
+      "address_bar_box": "hsl(12, 5%, 21%)",
+      "address_bar_box_hover": "hsla(12, 5%, 21%, 0.8)",
+      "address_bar_box_active": "hsla(12, 5%, 21%, 0.65)",
+      "address_bar_box_focus": "hsl(18, 10%, 25%)",
+      "address_bar_box_text": "hsl(15, 89%, 86%)",
+      "address_bar_url_color": "hsl(15, 89%, 82%)",
+      "panel_item_hover": "hsla(15, 100%, 86%, 0.2)",
+      "panel_item_active": "hsla(15, 100%, 86%, 0.35)",
+      "panel_separator": "hsl(15, 100%, 86%)",
+      "icons_attention": "hsl(15, 59%, 75%)",
+      "toolbar_field_icons_attention": "hsl(15, 59%, 75%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/abstract/bold/preview.svg
new file mode 100644
index 0000000000..ff37080bdd
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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(15, 100%, 86%)" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(15, 89%, 86%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(15, 89%, 86%)" />
+  <rect y="44" width="680" height="48" fill="hsl(18, 10%, 25%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(15, 89%, 86%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(15, 89%, 86%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(15, 89%, 86%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(15, 89%, 86%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(15, 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(15, 89%, 86%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(15, 89%, 86%)" />
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/icon.svg
new file mode 100644
index 0000000000..e36b822f9a
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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(15, 100%, 78%)"/>
+      <stop offset="1" stop-color="hsl(15, 100%, 86%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/manifest.json
new file mode 100644
index 0000000000..79eadac692
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "abstract-soft-colorway@mozilla.org"
+    }
+  },
+  "name": "Abstract – Soft",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(15, 70%, 38%)",
+      "tab_loading_inactive": "hsl(15, 70%, 38%)",
+      "frame": "hsl(15, 100%, 78%)",
+      "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(15, 100%, 86%)",
+      "toolbar_text": "hsl(30, 5%, 8%)",
+      "toolbar_field": "hsl(15, 100%, 78%)",
+      "toolbar_field_text": "hsl(30, 5%, 8%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(15, 100%, 78%)",
+      "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_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(15, 100%, 86%)",
+      "address_bar_box_text": "hsl(30, 5%, 8%)",
+      "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%)",
+      "icons_attention": "hsl(15, 70%, 38%)",
+      "toolbar_field_icons_attention": "hsl(15, 70%, 38%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/preview.svg
new file mode 100644
index 0000000000..8e979444f9
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/abstract/soft/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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, 100%, 78%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(15, 100%, 86%)" />
+  <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(15, 100%, 78%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/icon.svg
new file mode 100644
index 0000000000..71e10b3326
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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" gradientTransform="rotate(90)">
+      <stop stop-color="#FFE199"/>
+      <stop offset="1" stop-color="#EFA906"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/manifest.json
new file mode 100644
index 0000000000..61a2bc45c0
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "cheers-balanced-colorway@mozilla.org"
+    }
+  },
+  "name": "Cheers – Balanced",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(42, 95%, 60%)",
+      "tab_loading_inactive": "hsl(42, 100%, 27%)",
+      "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": "rgba(0, 179, 244, 1)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(42, 95%, 60%)",
+      "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_hover": "hsla(42, 95%, 60%, 0.8)",
+      "address_bar_box_active": "hsla(42, 95%, 60%, 0.65)",
+      "address_bar_box_focus": "hsl(42, 95%, 70%)",
+      "address_bar_box_text": "hsl(0, 0%, 0%)",
+      "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%)",
+      "icons_attention": "hsl(42, 100%, 27%)",
+      "toolbar_field_icons_attention": "hsl(42, 95%, 60%)",
+      "tab_attention_dot": "hsl(137, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(137, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/preview.svg
new file mode 100644
index 0000000000..1820af6cf3
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/balanced/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 20%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/icon.svg
new file mode 100644
index 0000000000..224dba4eaf
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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%, 20%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/manifest.json
new file mode 100644
index 0000000000..e9d4628b0d
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "cheers-bold-colorway@mozilla.org"
+    }
+  },
+  "name": "Cheers – Bold",
+  "author": "Mozilla",
+  "version": "1.1",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(42, 96%, 65%)",
+      "tab_text": "hsl(42, 96%, 65%)",
+      "tab_selected": "hsl(0, 0%, 16%)",
+      "tab_line": "hsl(42, 80%, 58%)",
+      "tab_loading": "hsl(42, 70%, 72%)",
+      "tab_loading_inactive": "hsl(42, 70%, 72%)",
+      "frame": "hsl(0, 0%, 11%)",
+      "popup": "hsl(0, 0%, 16%)",
+      "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%, 20%)",
+      "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%, 16%)",
+      "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(0, 0%, 11%)",
+      "ntp_background": "hsl(0, 0%, 11%)",
+      "ntp_card_background": "hsl(0, 0%, 16%)",
+      "ntp_text": "hsl(42, 96%, 65%)",
+      "sidebar": "hsl(0, 0%, 16%)",
+      "sidebar_text": "hsl(42, 96%, 65%)",
+      "sidebar_highlight": "hsla(42, 95%, 60%, 0.2)",
+      "address_bar_box": "hsl(0, 0%, 16%)",
+      "address_bar_box_hover": "hsla(0, 0%, 16%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 16%, 0.65)",
+      "address_bar_box_focus": "hsl(0, 0%, 20%)",
+      "address_bar_box_text": "hsl(42, 96%, 65%)",
+      "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%)",
+      "icons_attention": "hsl(42, 70%, 72%)",
+      "toolbar_field_icons_attention": "hsl(42, 70%, 72%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/cheers/bold/preview.svg
new file mode 100644
index 0000000000..ba16e58108
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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%, 16%)" 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%, 20%)" />
+  <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>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/icon.svg
new file mode 100644
index 0000000000..1b9132ccb9
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/manifest.json
new file mode 100644
index 0000000000..fbe7a2add5
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "cheers-soft-colorway@mozilla.org"
+    }
+  },
+  "name": "Cheers – Soft",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(42, 100%, 30%)",
+      "tab_loading_inactive": "hsl(42, 100%, 30%)",
+      "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.9)",
+      "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": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(42, 100%, 70%)",
+      "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.9)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(42, 100%, 84%)",
+      "address_bar_box_text": "hsl(0, 0%, 0%)",
+      "address_bar_url_color": "hsl(42, 100%, 25%)",
+      "panel_item_hover": "hsla(42, 100%, 78%, 0.9)",
+      "panel_item_active": "hsl(42, 100%, 78%)",
+      "panel_separator": "hsl(42, 100%, 60%)",
+      "icons_attention": "hsl(42, 100%, 30%)",
+      "toolbar_field_icons_attention": "hsl(42, 100%, 30%)",
+      "tab_attention_dot": "hsl(137, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(137, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/preview.svg
new file mode 100644
index 0000000000..3d197dacf0
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/cheers/soft/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/icon.svg
new file mode 100644
index 0000000000..46f9d406d0
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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" gradientTransform="rotate(90)">
+      <stop stop-color="#D2CEC6"/>
+      <stop offset="1" stop-color="#8E8671"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/manifest.json
new file mode 100644
index 0000000000..ee50d27de7
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "elemental-balanced-colorway@mozilla.org"
+    }
+  },
+  "name": "Elemental – Balanced",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(40, 7%, 18%)",
+      "tab_loading_inactive": "hsl(40, 8%, 85%)",
+      "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(40, 7%, 55%, 0.4)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(43, 7%, 40%)",
+      "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": "rgba(0, 179, 244, 1)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(38, 7%, 30%)",
+      "ntp_background": "hsl(42, 8%, 78%)",
+      "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(40, 7%, 55%, 0.4)",
+      "address_bar_box": "hsl(38, 7%, 30%)",
+      "address_bar_box_hover": "hsla(38, 7%, 30%, 0.8)",
+      "address_bar_box_active": "hsla(38, 7%, 30%, 0.65)",
+      "address_bar_box_focus": "hsl(43, 7%, 40%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(150, 2%, 35%)",
+      "panel_item_hover": "hsla(40, 7%, 55%, 0.4)",
+      "panel_item_active": "hsla(40, 7%, 55%, 0.55)",
+      "panel_separator": "hsl(43, 7%, 60%)",
+      "icons_attention": "hsl(40, 8%, 85%)",
+      "toolbar_field_icons_attention": "hsl(40, 7%, 18%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/preview.svg
new file mode 100644
index 0000000000..c700f4656d
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/balanced/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(40, 7%, 92%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(43, 7%, 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(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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/icon.svg
new file mode 100644
index 0000000000..311409f39c
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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(42, 6%, 43%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/manifest.json
new file mode 100644
index 0000000000..6dd0ca7cfc
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "elemental-bold-colorway@mozilla.org"
+    }
+  },
+  "name": "Elemental – Bold",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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%)",
+      "tab_loading": "hsl(45, 6%, 88%)",
+      "tab_loading_inactive": "hsl(45, 6%, 88%)",
+      "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(42, 6%, 43%)",
+      "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": "rgba(0, 221, 255, 0.7)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(38, 7%, 30%)",
+      "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_hover": "hsla(40, 7%, 25%, 0.8)",
+      "address_bar_box_active": "hsla(40, 7%, 25%, 0.65)",
+      "address_bar_box_focus": "hsl(42, 6%, 43%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "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%)",
+      "icons_attention": "hsl(45, 6%, 88%)",
+      "toolbar_field_icons_attention": "hsl(45, 6%, 88%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/elemental/bold/preview.svg
new file mode 100644
index 0000000000..8c1cd4867c
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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(42, 6%, 43%)" />
+  <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>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/icon.svg
new file mode 100644
index 0000000000..cb634ce131
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/manifest.json
new file mode 100644
index 0000000000..b49d4d2209
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "elemental-soft-colorway@mozilla.org"
+    }
+  },
+  "name": "Elemental – Soft",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(42, 7%, 38%)",
+      "tab_loading_inactive": "hsl(42, 7%, 38%)",
+      "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": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(45, 6%, 88%)",
+      "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_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(30, 7%, 94%)",
+      "address_bar_box_text": "hsl(48, 10%, 10%)",
+      "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%)",
+      "icons_attention": "hsl(42, 7%, 38%)",
+      "toolbar_field_icons_attention": "hsl(42, 7%, 38%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/preview.svg
new file mode 100644
index 0000000000..dce730c57e
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/elemental/soft/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/icon.svg
new file mode 100644
index 0000000000..08f3eaf469
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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" gradientTransform="rotate(90)">
+      <stop stop-color="#F9DDE0"/>
+      <stop offset="1" stop-color="#E18995"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/manifest.json
new file mode 100644
index 0000000000..d744db57f3
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "foto-balanced-colorway@mozilla.org"
+    }
+  },
+  "name": "Foto – Balanced",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(351, 37%, 40%)",
+      "tab_loading_inactive": "hsl(352, 56%, 84%)",
+      "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": "rgba(0, 179, 244, 1)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(351, 37%, 40%)",
+      "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_hover": "hsla(351, 37%, 40%, 0.8)",
+      "address_bar_box_active": "hsla(351, 37%, 40%, 0.65)",
+      "address_bar_box_focus": "hsl(351, 37%, 47%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "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%)",
+      "icons_attention": "hsl(352, 56%, 84%)",
+      "toolbar_field_icons_attention": "hsl(351, 37%, 40%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/preview.svg
new file mode 100644
index 0000000000..1c43a6e67d
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/foto/balanced/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(349, 35%, 94%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/bold/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/foto/bold/icon.svg
new file mode 100644
index 0000000000..b08be54e42
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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(350, 32%, 30%)"/>
+      <stop offset="1" stop-color="hsl(351, 32%, 42%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/bold/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/foto/bold/manifest.json
new file mode 100644
index 0000000000..91abfe5119
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/foto/bold/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "foto-bold-colorway@mozilla.org"
+    }
+  },
+  "name": "Foto – Bold",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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%)",
+      "tab_loading": "hsl(352, 56%, 84%)",
+      "tab_loading_inactive": "hsl(352, 56%, 84%)",
+      "frame": "hsl(350, 32%, 30%)",
+      "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%, 42%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(350, 32%, 30%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(351, 27%, 25%)",
+      "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(350, 32%, 30%)",
+      "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_hover": "hsla(351, 27%, 25%, 0.8)",
+      "address_bar_box_active": "hsla(351, 27%, 25%, 0.65)",
+      "address_bar_box_focus": "hsl(351, 32%, 42%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(350, 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%)",
+      "icons_attention": "hsl(352, 56%, 84%)",
+      "toolbar_field_icons_attention": "hsl(352, 56%, 84%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/bold/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/foto/bold/preview.svg
new file mode 100644
index 0000000000..338672498f
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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(350, 32%, 30%)" />
+  <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%, 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(350, 32%, 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>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/soft/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/foto/soft/icon.svg
new file mode 100644
index 0000000000..9552e234f0
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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(351, 47%, 89%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/soft/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/foto/soft/manifest.json
new file mode 100644
index 0000000000..e9f1edf319
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/foto/soft/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "foto-soft-colorway@mozilla.org"
+    }
+  },
+  "name": "Foto – Soft",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(351, 32%, 42%)",
+      "tab_loading_inactive": "hsl(351, 32%, 42%)",
+      "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(351, 47%, 89%)",
+      "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": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(352, 56%, 84%)",
+      "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_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(351, 47%, 89%)",
+      "address_bar_box_text": "hsl(351, 32%, 8%)",
+      "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%)",
+      "icons_attention": "hsl(351, 32%, 42%)",
+      "toolbar_field_icons_attention": "hsl(351, 32%, 42%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/foto/soft/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/foto/soft/preview.svg
new file mode 100644
index 0000000000..e21d5c9de8
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/foto/soft/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(351, 47%, 89%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/icon.svg
new file mode 100644
index 0000000000..a6bb9c5a8b
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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" gradientTransform="rotate(90)">
+      <stop stop-color="#EBD1FA"/>
+      <stop offset="1" stop-color="#A864CE"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/manifest.json
new file mode 100644
index 0000000000..b7d668485a
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "graffiti-balanced-colorway@mozilla.org"
+    }
+  },
+  "name": "Graffiti – Balanced",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(278, 32%, 35%)",
+      "tab_loading_inactive": "hsl(279, 77%, 95%)",
+      "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": "rgba(0, 179, 244, 1)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(278, 33%, 40%)",
+      "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_hover": "hsla(278, 33%, 40%, 0.8)",
+      "address_bar_box_active": "hsla(278, 33%, 40%, 0.65)",
+      "address_bar_box_focus": "hsl(279, 29%, 52%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "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%)",
+      "icons_attention": "hsl(279, 77%, 95%)",
+      "toolbar_field_icons_attention": "hsl(278, 32%, 35%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/preview.svg
new file mode 100644
index 0000000000..9aa245de3e
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/balanced/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(278, 31%, 95%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/icon.svg
new file mode 100644
index 0000000000..764d072a09
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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(279, 31%, 28%)"/>
+      <stop offset="1" stop-color="hsl(278, 27%, 40%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/manifest.json
new file mode 100644
index 0000000000..e56600702e
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "graffiti-bold-colorway@mozilla.org"
+    }
+  },
+  "name": "Graffiti – Bold",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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%)",
+      "tab_loading": "hsl(278, 79%, 85%)",
+      "tab_loading_inactive": "hsl(278, 79%, 85%)",
+      "frame": "hsl(279, 31%, 28%)",
+      "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%, 40%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(279, 31%, 28%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(275, 15%, 22%)",
+      "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(279, 31%, 28%)",
+      "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_hover": "hsla(275, 15%, 22%, 0.8)",
+      "address_bar_box_active": "hsla(275, 15%, 22%, 0.65)",
+      "address_bar_box_focus": "hsl(278, 27%, 40%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "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%)",
+      "icons_attention": "hsl(278, 79%, 85%)",
+      "toolbar_field_icons_attention": "hsl(278, 79%, 85%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/graffiti/bold/preview.svg
new file mode 100644
index 0000000000..f1db86b92e
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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(279, 31%, 28%)" />
+  <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%, 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(279, 31%, 28%)" />
+  <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>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/icon.svg
new file mode 100644
index 0000000000..d50944e91a
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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, 79%, 85%)"/>
+      <stop offset="1" stop-color="hsl(278, 80%, 91%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/manifest.json
new file mode 100644
index 0000000000..dba350671b
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "graffiti-soft-colorway@mozilla.org"
+    }
+  },
+  "name": "Graffiti – Soft",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(278, 33%, 44%)",
+      "tab_loading_inactive": "hsl(278, 33%, 44%)",
+      "frame": "hsl(278, 79%, 85%)",
+      "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, 80%, 91%)",
+      "toolbar_text": "hsl(278, 22%, 10%)",
+      "toolbar_field": "hsl(278, 79%, 85%)",
+      "toolbar_field_text": "hsl(278, 22%, 10%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(278, 79%, 85%)",
+      "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_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(278, 80%, 91%)",
+      "address_bar_box_text": "hsl(278, 22%, 10%)",
+      "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%)",
+      "icons_attention": "hsl(278, 33%, 44%)",
+      "toolbar_field_icons_attention": "hsl(278, 33%, 44%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/preview.svg
new file mode 100644
index 0000000000..ed76cdcce9
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/graffiti/soft/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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, 79%, 85%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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, 80%, 91%)" />
+  <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, 79%, 85%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/icon.svg
new file mode 100644
index 0000000000..4c06426349
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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" gradientTransform="rotate(90)">
+      <stop stop-color="#B6D8C4"/>
+      <stop offset="1" stop-color="#609F7A"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/manifest.json
new file mode 100644
index 0000000000..c265b4ae87
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "lush-balanced-colorway@mozilla.org"
+    }
+  },
+  "name": "Lush – Balanced",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(138, 16%, 32%)",
+      "tab_loading_inactive": "hsl(147, 25%, 86%)",
+      "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": "rgba(0, 179, 244, 1)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(144, 16%, 30%)",
+      "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_hover": "hsla(144, 16%, 30%, 0.8)",
+      "address_bar_box_active": "hsla(144, 16%, 30%, 0.65)",
+      "address_bar_box_focus": "hsl(146, 15%, 36%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "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%)",
+      "icons_attention": "hsl(147, 25%, 86%)",
+      "toolbar_field_icons_attention": "hsl(138, 16%, 32%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/preview.svg
new file mode 100644
index 0000000000..3bfe84c75f
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/lush/balanced/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(120, 7%, 94%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/bold/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/lush/bold/icon.svg
new file mode 100644
index 0000000000..9c2c88dd7b
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/lush/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(139, 16%, 30%)"/>
+      <stop offset="1" stop-color="hsl(139, 15%, 42%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/bold/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/lush/bold/manifest.json
new file mode 100644
index 0000000000..dd4011023d
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/lush/bold/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "lush-bold-colorway@mozilla.org"
+    }
+  },
+  "name": "Lush – Bold",
+  "author": "Mozilla",
+  "version": "1.1",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 100%)",
+      "tab_selected": "hsl(140, 2%, 28%)",
+      "tab_line": "hsl(139, 8%, 48%)",
+      "tab_loading": "hsl(146, 44%, 86%)",
+      "tab_loading_inactive": "hsl(146, 44%, 86%)",
+      "frame": "hsl(139, 16%, 30%)",
+      "popup": "hsl(140, 2%, 28%)",
+      "popup_text": "hsl(0, 0%, 100%)",
+      "popup_border": "hsl(140, 10%, 35%)",
+      "popup_highlight": "hsla(137, 18%, 50%, 0.42)",
+      "popup_highlight_text": "hsl(0, 0%, 100%)",
+      "toolbar": "hsl(139, 15%, 42%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(139, 16%, 30%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(140, 2%, 28%)",
+      "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(139, 16%, 30%)",
+      "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_hover": "hsla(140, 2%, 28%, 0.8)",
+      "address_bar_box_active": "hsla(140, 2%, 28%, 0.65)",
+      "address_bar_box_focus": "hsl(139, 15%, 42%)",
+      "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%)",
+      "icons_attention": "hsl(146, 44%, 86%)",
+      "toolbar_field_icons_attention": "hsl(146, 44%, 86%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/bold/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/lush/bold/preview.svg
new file mode 100644
index 0000000000..83af350291
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/lush/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(139, 16%, 30%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(140, 2%, 28%)" stroke="hsl(139, 8%, 48%)" 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(139, 15%, 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(139, 16%, 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>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/soft/icon.svg b/browser/themes/addons/colorways/2021-life-in-color/lush/soft/icon.svg
new file mode 100644
index 0000000000..79cf4d5bb7
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/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>
diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/soft/manifest.json b/browser/themes/addons/colorways/2021-life-in-color/lush/soft/manifest.json
new file mode 100644
index 0000000000..1f4ef55c98
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/lush/soft/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "lush-soft-colorway@mozilla.org"
+    }
+  },
+  "name": "Lush – Soft",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(145, 24%, 32%)",
+      "tab_loading_inactive": "hsl(145, 24%, 32%)",
+      "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": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(147, 25%, 86%)",
+      "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_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(140, 26%, 93%)",
+      "address_bar_box_text": "hsl(150, 6%, 20%)",
+      "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%)",
+      "icons_attention": "hsl(145, 24%, 32%)",
+      "toolbar_field_icons_attention": "hsl(145, 24%, 32%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2021-life-in-color/lush/soft/preview.svg b/browser/themes/addons/colorways/2021-life-in-color/lush/soft/preview.svg
new file mode 100644
index 0000000000..611339319e
--- /dev/null
+++ b/browser/themes/addons/colorways/2021-life-in-color/lush/soft/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/icon.svg
new file mode 100644
index 0000000000..1422130dc6
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/activist/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(220, 72%, 28%)"/>
+      <stop offset="1" stop-color="hsl(220, 49%, 48%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/manifest.json
new file mode 100644
index 0000000000..4c75d2fab5
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/manifest.json
@@ -0,0 +1,78 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "activist-balanced-colorway@mozilla.org"
+    }
+  },
+  "name": "Activist – Balanced",
+  "author": "Mozilla",
+  "version": "1.1.2",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "properties": {
+      "color_scheme": "light",
+      "content_color_scheme": "auto"
+    },
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 0%)",
+      "tab_selected": "hsl(223, 100%, 99%)",
+      "tab_line": "transparent",
+      "tab_loading": "hsl(0, 0%, 0%)",
+      "tab_loading_inactive": "hsl(0, 0%, 0%)",
+      "frame": "hsl(220, 72%, 28%)",
+      "popup": "hsl(228, 100%, 99%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(220, 58%, 39%)",
+      "popup_highlight": "hsla(220, 54%, 80%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(220, 49%, 48%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(223, 100%, 99%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(228, 100%, 99%)",
+      "toolbar_field_border_focus": "rgba(0, 179, 244, 1)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(220, 72%, 28%)",
+      "ntp_background": "hsl(221, 63%, 87%)",
+      "ntp_card_background": "hsl(228, 100%, 99%)",
+      "ntp_text": "hsl(0, 0%, 0%)",
+      "sidebar": "hsl(228, 100%, 99%)",
+      "sidebar_text": "hsl(0, 0%, 0%)",
+      "sidebar_highlight": "hsla(220, 54%, 80%, 0.3)",
+      "address_bar_box": "hsl(220, 72%, 28%)",
+      "address_bar_box_hover": "hsla(220, 72%, 28%, 0.8)",
+      "address_bar_box_active": "hsla(220, 72%, 28%, 0.65)",
+      "address_bar_box_focus": "hsl(220, 49%, 48%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(220, 76%, 31%)",
+      "panel_item_hover": "hsla(220, 54%, 80%, 0.3)",
+      "panel_item_active": "hsla(220, 54%, 80%, 0.45)",
+      "panel_separator": "hsl(220, 58%, 39%)",
+      "icons_attention": "hsl(0, 0%, 0%)",
+      "toolbar_field_icons_attention": "hsl(0, 0%, 0%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/preview.svg
new file mode 100644
index 0000000000..9ebc168c7e
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/activist/balanced/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(220, 72%, 28%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(223, 100%, 99%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(220, 49%, 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(223, 100%, 99%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/bold/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/activist/bold/icon.svg
new file mode 100644
index 0000000000..37eee3b21e
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/activist/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(233, 73%, 12%)"/>
+      <stop offset="1" stop-color="hsl(234, 90%, 19%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/bold/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/activist/bold/manifest.json
new file mode 100644
index 0000000000..d3404ca9a5
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/activist/bold/manifest.json
@@ -0,0 +1,74 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "activist-bold-colorway@mozilla.org"
+    }
+  },
+  "name": "Activist – Bold",
+  "author": "Mozilla",
+  "version": "1.1.2",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 100%)",
+      "tab_selected": "hsl(220, 79%, 11%)",
+      "tab_line": "hsl(220, 54%, 67%)",
+      "tab_loading": "hsl(220, 70%, 78%)",
+      "tab_loading_inactive": "hsl(220, 70%, 78%)",
+      "frame": "hsl(233, 73%, 12%)",
+      "popup": "hsl(220, 79%, 11%)",
+      "popup_text": "hsl(0, 0%, 100%)",
+      "popup_border": "hsl(220, 69%, 66%)",
+      "popup_highlight": "hsla(220, 89%, 69%, 0.2)",
+      "popup_highlight_text": "hsl(0, 0%, 100%)",
+      "toolbar": "hsl(234, 90%, 19%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(233, 73%, 12%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(220, 79%, 11%)",
+      "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(233, 73%, 12%)",
+      "ntp_background": "hsl(222, 100%, 3%)",
+      "ntp_card_background": "hsl(220, 79%, 11%)",
+      "ntp_text": "hsl(0, 0%, 100%)",
+      "sidebar": "hsl(220, 79%, 11%)",
+      "sidebar_text": "hsl(0, 0%, 100%)",
+      "sidebar_highlight": "hsla(220, 89%, 69%, 0.2)",
+      "address_bar_box": "hsl(220, 79%, 11%)",
+      "address_bar_box_active": "hsla(220, 79%, 11%, 0.65)",
+      "address_bar_box_focus": "hsl(234, 90%, 19%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(219, 37%, 59%)",
+      "panel_item_hover": "hsla(220, 89%, 69%, 0.2)",
+      "panel_item_active": "hsla(220, 89%, 69%, 0.35)",
+      "panel_separator": "hsl(220, 69%, 66%)",
+      "icons_attention": "hsl(220, 70%, 78%)",
+      "toolbar_field_icons_attention": "hsl(220, 70%, 78%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/bold/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/activist/bold/preview.svg
new file mode 100644
index 0000000000..cf1f18c9b1
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/activist/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(233, 73%, 12%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(220, 79%, 11%)" stroke="hsl(220, 54%, 67%)" 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(234, 90%, 19%)" />
+  <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(233, 73%, 12%)" />
+  <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>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/soft/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/activist/soft/icon.svg
new file mode 100644
index 0000000000..403f3e5dfd
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/activist/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(226, 45%, 79%)"/>
+      <stop offset="1" stop-color="hsl(227, 47%, 90%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/soft/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/activist/soft/manifest.json
new file mode 100644
index 0000000000..05753ccc52
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/activist/soft/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "activist-soft-colorway@mozilla.org"
+    }
+  },
+  "name": "Activist – Soft",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(227, 91%, 41%)",
+      "tab_loading_inactive": "hsl(227, 91%, 41%)",
+      "frame": "hsl(226, 45%, 79%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(226, 54%, 56%)",
+      "popup_highlight": "hsla(226, 54%, 56%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(227, 47%, 90%)",
+      "toolbar_text": "hsl(0, 0%, 0%)",
+      "toolbar_field": "hsl(226, 45%, 79%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(226, 45%, 79%)",
+      "ntp_background": "hsl(226, 68%, 96%)",
+      "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(226, 54%, 56%, 0.3)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(227, 47%, 90%)",
+      "address_bar_box_text": "hsl(0, 0%, 0%)",
+      "address_bar_url_color": "hsl(226, 67%, 37%)",
+      "panel_item_hover": "hsla(226, 54%, 56%, 0.3)",
+      "panel_item_active": "hsla(226, 54%, 56%, 0.45)",
+      "panel_separator": "hsl(226, 54%, 56%)",
+      "icons_attention": "hsl(227, 91%, 41%)",
+      "toolbar_field_icons_attention": "hsl(227, 91%, 41%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/activist/soft/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/activist/soft/preview.svg
new file mode 100644
index 0000000000..d8756b95ad
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/activist/soft/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(226, 45%, 79%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(227, 47%, 90%)" />
+  <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(226, 45%, 79%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/icon.svg
new file mode 100644
index 0000000000..4e70d68e8b
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/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(266, 39%, 35%)"/>
+      <stop offset="1" stop-color="hsl(265, 34%, 47%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/manifest.json
new file mode 100644
index 0000000000..8c6a583464
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/manifest.json
@@ -0,0 +1,78 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "dreamer-balanced-colorway@mozilla.org"
+    }
+  },
+  "name": "Dreamer – Balanced",
+  "author": "Mozilla",
+  "version": "1.1.2",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "properties": {
+      "color_scheme": "light",
+      "content_color_scheme": "auto"
+    },
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 0%)",
+      "tab_selected": "hsl(277, 31%, 95%)",
+      "tab_line": "transparent",
+      "tab_loading": "hsl(0, 0%, 0%)",
+      "tab_loading_inactive": "hsl(0, 0%, 0%)",
+      "frame": "hsl(266, 39%, 35%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(266, 66%, 24%)",
+      "popup_highlight": "hsla(264, 43%, 85%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(265, 34%, 47%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(277, 31%, 95%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 179, 244, 1)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(266, 39%, 35%)",
+      "ntp_background": "hsl(263, 59%, 91%)",
+      "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(264, 43%, 85%, 0.3)",
+      "address_bar_box": "hsl(266, 39%, 35%)",
+      "address_bar_box_hover": "hsla(266, 39%, 35%, 0.8)",
+      "address_bar_box_active": "hsla(266, 39%, 35%, 0.65)",
+      "address_bar_box_focus": "hsl(265, 34%, 47%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(266, 39%, 35%)",
+      "panel_item_hover": "hsla(264, 43%, 85%, 0.3)",
+      "panel_item_active": "hsla(264, 43%, 85%, 0.45)",
+      "panel_separator": "hsl(266, 66%, 24%)",
+      "icons_attention": "hsl(0, 0%, 0%)",
+      "toolbar_field_icons_attention": "hsl(0, 0%, 0%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/preview.svg
new file mode 100644
index 0000000000..c0277ca6a3
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/balanced/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(266, 39%, 35%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(277, 31%, 95%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(265, 34%, 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(277, 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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/icon.svg
new file mode 100644
index 0000000000..ffcb472f42
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/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(266, 68%, 20%)"/>
+      <stop offset="1" stop-color="hsl(265, 45%, 29%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/manifest.json
new file mode 100644
index 0000000000..2d7b867562
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/manifest.json
@@ -0,0 +1,74 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "dreamer-bold-colorway@mozilla.org"
+    }
+  },
+  "name": "Dreamer – Bold",
+  "author": "Mozilla",
+  "version": "1.1.1",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 100%)",
+      "tab_selected": "hsl(267, 54%, 15%)",
+      "tab_line": "hsl(266, 49%, 45%)",
+      "tab_loading": "hsl(266, 83%, 81%)",
+      "tab_loading_inactive": "hsl(266, 83%, 81%)",
+      "frame": "hsl(266, 68%, 20%)",
+      "popup": "hsl(267, 54%, 15%)",
+      "popup_text": "hsl(0, 0%, 100%)",
+      "popup_border": "hsl(266, 60%, 67%)",
+      "popup_highlight": "hsla(266, 39%, 35%, 0.6)",
+      "popup_highlight_text": "hsl(0, 0%, 100%)",
+      "toolbar": "hsl(265, 45%, 29%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(266, 68%, 20%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(267, 54%, 15%)",
+      "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(266, 68%, 20%)",
+      "ntp_background": "hsl(256, 100%, 4%)",
+      "ntp_card_background": "hsl(267, 54%, 15%)",
+      "ntp_text": "hsl(0, 0%, 100%)",
+      "sidebar": "hsl(267, 54%, 15%)",
+      "sidebar_text": "hsl(0, 0%, 100%)",
+      "sidebar_highlight": "hsla(266, 39%, 35%, 0.6)",
+      "address_bar_box": "hsl(267, 54%, 15%)",
+      "address_bar_box_active": "hsla(267, 54%, 15%, 0.65)",
+      "address_bar_box_focus": "hsl(265, 45%, 29%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(266, 72%, 82%)",
+      "panel_item_hover": "hsla(266, 39%, 35%, 0.6)",
+      "panel_item_active": "hsla(266, 39%, 35%, 0.75)",
+      "panel_separator": "hsl(266, 60%, 67%)",
+      "icons_attention": "hsl(266, 83%, 81%)",
+      "toolbar_field_icons_attention": "hsl(266, 83%, 81%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/dreamer/bold/preview.svg
new file mode 100644
index 0000000000..c172daef44
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/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(266, 68%, 20%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(267, 54%, 15%)" stroke="hsl(266, 49%, 45%)" 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(265, 45%, 29%)" />
+  <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(266, 68%, 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>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/icon.svg
new file mode 100644
index 0000000000..f4f3e0c2c8
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/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(258, 49%, 84%)"/>
+      <stop offset="1" stop-color="hsl(259, 69%, 94%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/manifest.json
new file mode 100644
index 0000000000..350b354405
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "dreamer-soft-colorway@mozilla.org"
+    }
+  },
+  "name": "Dreamer – Soft",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(278, 49%, 35%)",
+      "tab_loading_inactive": "hsl(278, 49%, 35%)",
+      "frame": "hsl(258, 49%, 84%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(278, 22%, 10%)",
+      "popup_border": "hsl(258, 72%, 43%)",
+      "popup_highlight": "hsla(259, 56%, 79%, 0.3)",
+      "popup_highlight_text": "hsl(278, 22%, 10%)",
+      "toolbar": "hsl(259, 69%, 94%)",
+      "toolbar_text": "hsl(278, 22%, 10%)",
+      "toolbar_field": "hsl(258, 49%, 84%)",
+      "toolbar_field_text": "hsl(278, 22%, 10%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(258, 49%, 84%)",
+      "ntp_background": "hsl(258, 76%, 97%)",
+      "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(259, 56%, 79%, 0.3)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(259, 69%, 94%)",
+      "address_bar_box_text": "hsl(278, 22%, 10%)",
+      "address_bar_url_color": "hsl(258, 46%, 46%)",
+      "panel_item_hover": "hsla(259, 56%, 79%, 0.3)",
+      "panel_item_active": "hsla(259, 56%, 79%, 0.45)",
+      "panel_separator": "hsl(258, 72%, 43%)",
+      "icons_attention": "hsl(278, 49%, 35%)",
+      "toolbar_field_icons_attention": "hsl(278, 49%, 35%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/preview.svg
new file mode 100644
index 0000000000..f801303d7d
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/dreamer/soft/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(258, 49%, 84%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(259, 69%, 94%)" />
+  <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(258, 49%, 84%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/icon.svg
new file mode 100644
index 0000000000..28974b9b4b
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/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(45, 85%, 63%)"/>
+      <stop offset="1" stop-color="hsl(45, 93%, 77%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/manifest.json
new file mode 100644
index 0000000000..17eac4aa7f
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "expressionist-balanced-colorway@mozilla.org"
+    }
+  },
+  "name": "Expressionist – Balanced",
+  "author": "Mozilla",
+  "version": "1.1",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 0%)",
+      "tab_text": "hsl(0, 0%, 0%)",
+      "tab_selected": "hsl(46, 91%, 95%)",
+      "tab_line": "transparent",
+      "tab_loading": "hsl(0, 0%, 0%)",
+      "tab_loading_inactive": "hsl(0, 0%, 0%)",
+      "frame": "hsl(45, 85%, 63%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(33, 91%, 27%)",
+      "popup_highlight": "hsla(45, 85%, 63%, 0.2)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(45, 93%, 77%)",
+      "toolbar_text": "hsl(0, 0%, 0%)",
+      "toolbar_field": "hsl(46, 91%, 95%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 179, 244, 1)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(45, 85%, 63%)",
+      "ntp_background": "hsl(46, 94%, 94%)",
+      "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(45, 85%, 63%, 0.2)",
+      "address_bar_box": "hsl(45, 85%, 63%)",
+      "address_bar_box_hover": "hsla(45, 85%, 63%, 0.8)",
+      "address_bar_box_active": "hsla(45, 85%, 63%, 0.65)",
+      "address_bar_box_focus": "hsl(45, 93%, 77%)",
+      "address_bar_box_text": "hsl(0, 0%, 0%)",
+      "address_bar_url_color": "hsl(33, 91%, 27%)",
+      "panel_item_hover": "hsla(45, 85%, 63%, 0.2)",
+      "panel_item_active": "hsla(45, 85%, 63%, 0.35)",
+      "panel_separator": "hsl(33, 91%, 27%)",
+      "icons_attention": "hsl(0, 0%, 0%)",
+      "toolbar_field_icons_attention": "hsl(0, 0%, 0%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/preview.svg
new file mode 100644
index 0000000000..8d0bb43756
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/balanced/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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, 85%, 63%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(46, 91%, 95%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(45, 93%, 77%)" />
+  <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(46, 91%, 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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/icon.svg
new file mode 100644
index 0000000000..bd6d7f390f
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/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(45, 95%, 17%)"/>
+      <stop offset="1" stop-color="hsl(45, 89%, 25%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/manifest.json
new file mode 100644
index 0000000000..514463473c
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "expressionist-bold-colorway@mozilla.org"
+    }
+  },
+  "name": "Expressionist – Bold",
+  "author": "Mozilla",
+  "version": "1.1",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 100%)",
+      "tab_selected": "hsl(47, 95%, 8%)",
+      "tab_line": "hsl(45, 86%, 83%)",
+      "tab_loading": "hsl(45, 68%, 66%)",
+      "tab_loading_inactive": "hsl(45, 68%, 66%)",
+      "frame": "hsl(45, 95%, 17%)",
+      "popup": "hsl(47, 95%, 8%)",
+      "popup_text": "hsl(0, 0%, 100%)",
+      "popup_border": "hsl(45, 49%, 77%)",
+      "popup_highlight": "hsla(45, 87%, 47%, 0.2)",
+      "popup_highlight_text": "hsl(0, 0%, 100%)",
+      "toolbar": "hsl(45, 89%, 25%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(45, 95%, 17%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(47, 95%, 8%)",
+      "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(45, 95%, 17%)",
+      "ntp_background": "hsl(46, 68%, 4%)",
+      "ntp_card_background": "hsl(47, 95%, 8%)",
+      "ntp_text": "hsl(0, 0%, 100%)",
+      "sidebar": "hsl(47, 95%, 8%)",
+      "sidebar_text": "hsl(0, 0%, 100%)",
+      "sidebar_highlight": "hsla(45, 87%, 47%, 0.2)",
+      "address_bar_box": "hsl(47, 95%, 8%)",
+      "address_bar_box_hover": "hsla(47, 95%, 8%, 0.8)",
+      "address_bar_box_active": "hsla(47, 95%, 8%, 0.65)",
+      "address_bar_box_focus": "hsl(45, 89%, 25%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(45, 78%, 82%)",
+      "panel_item_hover": "hsla(45, 87%, 47%, 0.2)",
+      "panel_item_active": "hsla(45, 87%, 47%, 0.35)",
+      "panel_separator": "hsl(45, 49%, 77%)",
+      "icons_attention": "hsl(45, 68%, 66%)",
+      "toolbar_field_icons_attention": "hsl(45, 68%, 66%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/expressionist/bold/preview.svg
new file mode 100644
index 0000000000..e26a8edcf0
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/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(45, 95%, 17%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(47, 95%, 8%)" stroke="hsl(45, 86%, 83%)" 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(45, 89%, 25%)" />
+  <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(45, 95%, 17%)" />
+  <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>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/icon.svg
new file mode 100644
index 0000000000..a97d148a37
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/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, 76%, 85%)"/>
+      <stop offset="1" stop-color="hsl(46, 94%, 94%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/manifest.json
new file mode 100644
index 0000000000..de192b05df
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "expressionist-soft-colorway@mozilla.org"
+    }
+  },
+  "name": "Expressionist – Soft",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(33, 74%, 29%)",
+      "tab_loading_inactive": "hsl(33, 74%, 29%)",
+      "frame": "hsl(45, 76%, 85%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(30, 5%, 8%)",
+      "popup_border": "hsl(45, 91%, 30%)",
+      "popup_highlight": "hsla(40, 90%, 50%, 0.2)",
+      "popup_highlight_text": "hsl(30, 5%, 8%)",
+      "toolbar": "hsl(46, 94%, 94%)",
+      "toolbar_text": "hsl(30, 5%, 8%)",
+      "toolbar_field": "hsl(45, 76%, 85%)",
+      "toolbar_field_text": "hsl(30, 5%, 8%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(45, 76%, 85%)",
+      "ntp_background": "hsl(44, 100%, 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(40, 90%, 50%, 0.2)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(46, 94%, 94%)",
+      "address_bar_box_text": "hsl(30, 5%, 8%)",
+      "address_bar_url_color": "hsl(33, 86%, 23%)",
+      "panel_item_hover": "hsla(40, 90%, 50%, 0.2)",
+      "panel_item_active": "hsla(40, 90%, 50%, 0.35)",
+      "panel_separator": "hsl(45, 91%, 30%)",
+      "icons_attention": "hsl(33, 74%, 29%)",
+      "toolbar_field_icons_attention": "hsl(33, 74%, 29%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/preview.svg
new file mode 100644
index 0000000000..9eb3ddf051
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/expressionist/soft/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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, 76%, 85%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(46, 94%, 94%)" />
+  <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(45, 76%, 85%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/icon.svg
new file mode 100644
index 0000000000..29a6895ca7
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/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(14, 94%, 55%)"/>
+      <stop offset="1" stop-color="hsl(14, 93%, 83%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/manifest.json
new file mode 100644
index 0000000000..b47d0dcbd5
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "innovator-balanced-colorway@mozilla.org"
+    }
+  },
+  "name": "Innovator – Balanced",
+  "author": "Mozilla",
+  "version": "1.1.1",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 0%)",
+      "tab_selected": "hsl(12, 100%, 91%)",
+      "tab_line": "transparent",
+      "tab_loading": "hsl(0, 0%, 0%)",
+      "tab_loading_inactive": "hsl(0, 0%, 0%)",
+      "frame": "hsl(14, 94%, 55%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(10, 92%, 33%)",
+      "popup_highlight": "hsla(17, 89%, 79%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(14, 93%, 83%)",
+      "toolbar_text": "hsl(0, 0%, 0%)",
+      "toolbar_field": "hsl(12, 100%, 91%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 179, 244, 1)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(14, 94%, 55%)",
+      "ntp_background": "hsl(11, 100%, 90%)",
+      "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(17, 89%, 79%, 0.3)",
+      "address_bar_box": "hsl(14, 94%, 55%)",
+      "address_bar_box_hover": "hsla(14, 94%, 55%, 0.8)",
+      "address_bar_box_active": "hsla(14, 94%, 55%, 0.65)",
+      "address_bar_box_focus": "hsl(14, 93%, 83%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(10, 86%, 40%)",
+      "panel_item_hover": "hsla(17, 89%, 79%, 0.3)",
+      "panel_item_active": "hsla(17, 89%, 79%, 0.45)",
+      "panel_separator": "hsl(10, 92%, 33%)",
+      "icons_attention": "hsl(0, 0%, 0%)",
+      "toolbar_field_icons_attention": "hsl(0, 0%, 0%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/preview.svg
new file mode 100644
index 0000000000..292ad647a2
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/balanced/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(14, 94%, 55%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(12, 100%, 91%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(14, 93%, 83%)" />
+  <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(12, 100%, 91%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/icon.svg
new file mode 100644
index 0000000000..3c96b19dd2
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/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(10, 89%, 18%)"/>
+      <stop offset="1" stop-color="hsl(11, 87%, 32%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/manifest.json
new file mode 100644
index 0000000000..395405b791
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "innovator-bold-colorway@mozilla.org"
+    }
+  },
+  "name": "Innovator – Bold",
+  "author": "Mozilla",
+  "version": "1.1",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 100%)",
+      "tab_selected": "hsl(11, 96%, 10%)",
+      "tab_line": "hsl(10, 93%, 89%)",
+      "tab_loading": "hsl(11, 88%, 90%)",
+      "tab_loading_inactive": "hsl(11, 88%, 90%)",
+      "frame": "hsl(10, 89%, 18%)",
+      "popup": "hsl(11, 96%, 10%)",
+      "popup_text": "hsl(0, 0%, 100%)",
+      "popup_border": "hsl(10, 60%, 68%)",
+      "popup_highlight": "hsla(10, 85%, 36%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 100%)",
+      "toolbar": "hsl(11, 87%, 32%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(10, 89%, 18%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(11, 96%, 10%)",
+      "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(10, 89%, 18%)",
+      "ntp_background": "hsl(10, 100%, 1%)",
+      "ntp_card_background": "hsl(11, 96%, 10%)",
+      "ntp_text": "hsl(0, 0%, 100%)",
+      "sidebar": "hsl(11, 96%, 10%)",
+      "sidebar_text": "hsl(0, 0%, 100%)",
+      "sidebar_highlight": "hsla(10, 85%, 36%, 0.3)",
+      "address_bar_box": "hsl(11, 96%, 10%)",
+      "address_bar_box_hover": "hsla(11, 96%, 10%, 0.8)",
+      "address_bar_box_active": "hsla(11, 96%, 10%, 0.65)",
+      "address_bar_box_focus": "hsl(11, 87%, 32%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(350, 57%, 90%)",
+      "panel_item_hover": "hsla(10, 85%, 36%, 0.3)",
+      "panel_item_active": "hsla(10, 85%, 36%, 0.45)",
+      "panel_separator": "hsl(10, 60%, 68%)",
+      "icons_attention": "hsl(11, 88%, 90%)",
+      "toolbar_field_icons_attention": "hsl(11, 88%, 90%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/innovator/bold/preview.svg
new file mode 100644
index 0000000000..fdb79fe84d
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/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(10, 89%, 18%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(11, 96%, 10%)" stroke="hsl(10, 93%, 89%)" 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(11, 87%, 32%)" />
+  <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(10, 89%, 18%)" />
+  <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>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/icon.svg
new file mode 100644
index 0000000000..6df542ae42
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/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(14, 81%, 81%)"/>
+      <stop offset="1" stop-color="hsl(14, 64%, 87%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/manifest.json
new file mode 100644
index 0000000000..df0e55a309
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "innovator-soft-colorway@mozilla.org"
+    }
+  },
+  "name": "Innovator – Soft",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(14, 89%, 28%)",
+      "tab_loading_inactive": "hsl(14, 89%, 28%)",
+      "frame": "hsl(14, 81%, 81%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(351, 32%, 8%)",
+      "popup_border": "hsl(14, 93%, 36%)",
+      "popup_highlight": "hsla(14, 83%, 76%, 0.4)",
+      "popup_highlight_text": "hsl(351, 32%, 8%)",
+      "toolbar": "hsl(14, 64%, 87%)",
+      "toolbar_text": "hsl(351, 32%, 8%)",
+      "toolbar_field": "hsl(14, 81%, 81%)",
+      "toolbar_field_text": "hsl(351, 32%, 8%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(14, 81%, 81%)",
+      "ntp_background": "hsl(14, 84%, 95%)",
+      "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(14, 83%, 76%, 0.4)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(14, 64%, 87%)",
+      "address_bar_box_text": "hsl(351, 32%, 8%)",
+      "address_bar_url_color": "hsl(14, 86%, 41%)",
+      "panel_item_hover": "hsla(14, 83%, 76%, 0.4)",
+      "panel_item_active": "hsla(14, 83%, 76%, 0.55)",
+      "panel_separator": "hsl(14, 93%, 36%)",
+      "icons_attention": "hsl(14, 89%, 28%)",
+      "toolbar_field_icons_attention": "hsl(14, 89%, 28%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/preview.svg
new file mode 100644
index 0000000000..fd076d525e
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/innovator/soft/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(14, 81%, 81%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(14, 64%, 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(14, 81%, 81%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/icon.svg
new file mode 100644
index 0000000000..dec120e11f
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/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(354, 71%, 43%)"/>
+      <stop offset="1" stop-color="hsl(354, 80%, 69%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/manifest.json
new file mode 100644
index 0000000000..0ef95e6f04
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/manifest.json
@@ -0,0 +1,74 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "playmaker-balanced-colorway@mozilla.org"
+    }
+  },
+  "name": "Playmaker – Balanced",
+  "author": "Mozilla",
+  "version": "1.1.2",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 0%)",
+      "tab_selected": "hsl(352, 65%, 95%)",
+      "tab_line": "transparent",
+      "tab_loading": "hsl(0, 0%, 0%)",
+      "tab_loading_inactive": "hsl(0, 0%, 0%)",
+      "frame": "hsl(354, 71%, 43%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(354, 87%, 36%)",
+      "popup_highlight": "hsla(355, 62%, 75%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(354, 80%, 69%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(352, 65%, 95%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 179, 244, 1)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(354, 71%, 43%)",
+      "ntp_background": "hsl(355, 73%, 91%)",
+      "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(355, 62%, 75%, 0.3)",
+      "address_bar_box": "hsl(354, 71%, 43%)",
+      "address_bar_box_hover": "hsla(354, 71%, 43%, 0.8)",
+      "address_bar_box_active": "hsla(354, 71%, 43%, 0.65)",
+      "address_bar_box_focus": "hsl(354, 80%, 69%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(354, 79%, 40%)",
+      "panel_item_hover": "hsla(355, 62%, 75%, 0.3)",
+      "panel_item_active": "hsla(355, 62%, 75%, 0.45)",
+      "panel_separator": "hsl(354, 87%, 36%)",
+      "icons_attention": "hsl(0, 0%, 0%)",
+      "toolbar_field_icons_attention": "hsl(0, 0%, 0%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/preview.svg
new file mode 100644
index 0000000000..69fd21bad0
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/balanced/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(354, 71%, 43%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(352, 65%, 95%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(354, 80%, 69%)" />
+  <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(352, 65%, 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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/icon.svg
new file mode 100644
index 0000000000..8ca7b43562
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/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(354, 78%, 18%)"/>
+      <stop offset="1" stop-color="hsl(354, 56%, 28%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/manifest.json
new file mode 100644
index 0000000000..9229b9c7b4
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "playmaker-bold-colorway@mozilla.org"
+    }
+  },
+  "name": "Playmaker – Bold",
+  "author": "Mozilla",
+  "version": "1.1",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 100%)",
+      "tab_selected": "hsl(355, 61%, 11%)",
+      "tab_line": "hsl(354, 80%, 40%)",
+      "tab_loading": "hsl(0, 95%, 84%)",
+      "tab_loading_inactive": "hsl(0, 95%, 84%)",
+      "frame": "hsl(354, 78%, 18%)",
+      "popup": "hsl(355, 61%, 11%)",
+      "popup_text": "hsl(0, 0%, 100%)",
+      "popup_border": "hsl(354, 83%, 75%)",
+      "popup_highlight": "hsla(354, 71%, 43%, 0.4)",
+      "popup_highlight_text": "hsl(0, 0%, 100%)",
+      "toolbar": "hsl(354, 56%, 28%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(354, 78%, 18%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(355, 61%, 11%)",
+      "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(354, 78%, 18%)",
+      "ntp_background": "hsl(0, 50%, 1%)",
+      "ntp_card_background": "hsl(355, 61%, 11%)",
+      "ntp_text": "hsl(0, 0%, 100%)",
+      "sidebar": "hsl(355, 61%, 11%)",
+      "sidebar_text": "hsl(0, 0%, 100%)",
+      "sidebar_highlight": "hsla(354, 71%, 43%, 0.4)",
+      "address_bar_box": "hsl(355, 61%, 11%)",
+      "address_bar_box_hover": "hsla(355, 61%, 11%, 0.8)",
+      "address_bar_box_active": "hsla(355, 61%, 11%, 0.65)",
+      "address_bar_box_focus": "hsl(354, 56%, 28%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(4, 82%, 76%)",
+      "panel_item_hover": "hsla(354, 71%, 43%, 0.4)",
+      "panel_item_active": "hsla(354, 71%, 43%, 0.55)",
+      "panel_separator": "hsl(354, 83%, 75%)",
+      "icons_attention": "hsl(0, 95%, 84%)",
+      "toolbar_field_icons_attention": "hsl(0, 95%, 84%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/playmaker/bold/preview.svg
new file mode 100644
index 0000000000..bc3f80cbd2
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/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(354, 78%, 18%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(355, 61%, 11%)" stroke="hsl(354, 80%, 40%)" 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(354, 56%, 28%)" />
+  <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(354, 78%, 18%)" />
+  <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>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/icon.svg
new file mode 100644
index 0000000000..53cef4c9b9
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/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(354, 91%, 87%)"/>
+      <stop offset="1" stop-color="hsl(355, 100%, 93%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/manifest.json
new file mode 100644
index 0000000000..5497dd7e9a
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "playmaker-soft-colorway@mozilla.org"
+    }
+  },
+  "name": "Playmaker – Soft",
+  "author": "Mozilla",
+  "version": "1.1",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(7, 92%, 15%)",
+      "tab_text": "hsl(7, 92%, 15%)",
+      "tab_selected": "hsl(0, 0%, 100%)",
+      "tab_line": "transparent",
+      "tab_loading": "hsl(10, 89%, 22%)",
+      "tab_loading_inactive": "hsl(10, 89%, 22%)",
+      "frame": "hsl(354, 91%, 87%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(7, 92%, 15%)",
+      "popup_border": "hsl(355, 96%, 29%)",
+      "popup_highlight": "hsla(354, 93%, 84%, 0.3)",
+      "popup_highlight_text": "hsl(7, 92%, 15%)",
+      "toolbar": "hsl(355, 100%, 93%)",
+      "toolbar_text": "hsl(7, 92%, 15%)",
+      "toolbar_field": "hsl(354, 91%, 87%)",
+      "toolbar_field_text": "hsl(7, 92%, 15%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(354, 91%, 87%)",
+      "ntp_background": "hsl(0, 100%, 99%)",
+      "ntp_card_background": "hsl(0, 0%, 100%)",
+      "ntp_text": "hsl(7, 92%, 15%)",
+      "sidebar": "hsl(0, 0%, 100%)",
+      "sidebar_text": "hsl(7, 92%, 15%)",
+      "sidebar_highlight": "hsla(354, 93%, 84%, 0.3)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(355, 100%, 93%)",
+      "address_bar_box_text": "hsl(7, 92%, 15%)",
+      "address_bar_url_color": "hsl(355, 90%, 30%)",
+      "panel_item_hover": "hsla(354, 93%, 84%, 0.3)",
+      "panel_item_active": "hsla(354, 93%, 84%, 0.45)",
+      "panel_separator": "hsl(355, 96%, 29%)",
+      "icons_attention": "hsl(10, 89%, 22%)",
+      "toolbar_field_icons_attention": "hsl(10, 89%, 22%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/preview.svg
new file mode 100644
index 0000000000..08d6960850
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/playmaker/soft/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(354, 91%, 87%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(7, 92%, 15%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(7, 92%, 15%)" />
+  <rect y="44" width="680" height="48" fill="hsl(355, 100%, 93%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(7, 92%, 15%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(7, 92%, 15%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(7, 92%, 15%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(7, 92%, 15%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(7, 92%, 15%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(354, 91%, 87%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(7, 92%, 15%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(7, 92%, 15%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/icon.svg
new file mode 100644
index 0000000000..4404484e37
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/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(147, 94%, 25%)"/>
+      <stop offset="1" stop-color="hsl(146, 38%, 49%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/manifest.json
new file mode 100644
index 0000000000..7710cde886
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "visionary-balanced-colorway@mozilla.org"
+    }
+  },
+  "name": "Visionary – Balanced",
+  "author": "Mozilla",
+  "version": "1.1.2",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 0%)",
+      "tab_selected": "hsl(150, 57%, 97%)",
+      "tab_line": "transparent",
+      "tab_loading": "hsl(0, 0%, 0%)",
+      "tab_loading_inactive": "hsl(0, 0%, 0%)",
+      "frame": "hsl(147, 94%, 25%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(147, 72%, 21%)",
+      "popup_highlight": "hsla(147, 40%, 78%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(146, 38%, 49%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(150, 57%, 97%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 179, 244, 1)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(147, 94%, 25%)",
+      "ntp_background": "hsl(146, 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(147, 40%, 78%, 0.3)",
+      "address_bar_box": "hsl(147, 94%, 25%)",
+      "address_bar_box_hover": "hsla(147, 94%, 25%, 0.8)",
+      "address_bar_box_active": "hsla(147, 94%, 25%, 0.65)",
+      "address_bar_box_focus": "hsl(146, 38%, 49%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(147, 89%, 19%)",
+      "panel_item_hover": "hsla(147, 40%, 78%, 0.3)",
+      "panel_item_active": "hsla(147, 40%, 78%, 0.45)",
+      "panel_separator": "hsl(147, 72%, 21%)",
+      "icons_attention": "hsl(0, 0%, 0%)",
+      "toolbar_field_icons_attention": "hsl(0, 0%, 0%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/preview.svg
new file mode 100644
index 0000000000..e08c04ad37
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/balanced/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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, 94%, 25%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(150, 57%, 97%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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, 38%, 49%)" />
+  <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(150, 57%, 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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/icon.svg
new file mode 100644
index 0000000000..caadabeede
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/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(146, 89%, 11%)"/>
+      <stop offset="1" stop-color="hsl(147, 82%, 17%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/manifest.json
new file mode 100644
index 0000000000..45adf3316e
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "visionary-bold-colorway@mozilla.org"
+    }
+  },
+  "name": "Visionary – Bold",
+  "author": "Mozilla",
+  "version": "1.1",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 100%)",
+      "tab_selected": "hsl(148, 74%, 7%)",
+      "tab_line": "hsl(146, 65%, 21%)",
+      "tab_loading": "hsl(147, 72%, 49%)",
+      "tab_loading_inactive": "hsl(147, 72%, 49%)",
+      "frame": "hsl(146, 89%, 11%)",
+      "popup": "hsl(148, 74%, 7%)",
+      "popup_text": "hsl(0, 0%, 100%)",
+      "popup_border": "hsl(146, 66%, 37%)",
+      "popup_highlight": "hsla(133, 94%, 27%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 100%)",
+      "toolbar": "hsl(147, 82%, 17%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(146, 89%, 11%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(148, 74%, 7%)",
+      "toolbar_field_border_focus": "rgba(0, 221, 255, 0.7)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(146, 89%, 11%)",
+      "ntp_background": "hsl(150, 29%, 3%)",
+      "ntp_card_background": "hsl(148, 74%, 7%)",
+      "ntp_text": "hsl(0, 0%, 100%)",
+      "sidebar": "hsl(148, 74%, 7%)",
+      "sidebar_text": "hsl(0, 0%, 100%)",
+      "sidebar_highlight": "hsla(133, 94%, 27%, 0.3)",
+      "address_bar_box": "hsl(148, 74%, 7%)",
+      "address_bar_box_hover": "hsla(148, 74%, 7%, 0.8)",
+      "address_bar_box_active": "hsla(148, 74%, 7%, 0.65)",
+      "address_bar_box_focus": "hsl(147, 82%, 17%)",
+      "address_bar_box_text": "hsl(0, 0%, 100%)",
+      "address_bar_url_color": "hsl(40, 6%, 90%)",
+      "panel_item_hover": "hsla(133, 94%, 27%, 0.3)",
+      "panel_item_active": "hsla(133, 94%, 27%, 0.45)",
+      "panel_separator": "hsl(146, 66%, 37%)",
+      "icons_attention": "hsl(147, 72%, 49%)",
+      "toolbar_field_icons_attention": "hsl(147, 72%, 49%)",
+      "tab_attention_dot": "hsl(94, 100%, 71%)",
+      "appmenu_update_icon_color": "hsl(94, 100%, 71%)",
+      "appmenu_info_icon_color": "hsl(173, 100%, 71%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/visionary/bold/preview.svg
new file mode 100644
index 0000000000..9d03199725
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/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(146, 89%, 11%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(148, 74%, 7%)" stroke="hsl(146, 65%, 21%)" 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(147, 82%, 17%)" />
+  <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(146, 89%, 11%)" />
+  <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>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/icon.svg b/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/icon.svg
new file mode 100644
index 0000000000..6de52afaf2
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/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, 53%, 75%)"/>
+      <stop offset="1" stop-color="hsl(146, 49%, 85%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/manifest.json b/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/manifest.json
new file mode 100644
index 0000000000..e335d3f4db
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "visionary-soft-colorway@mozilla.org"
+    }
+  },
+  "name": "Visionary – Soft",
+  "author": "Mozilla",
+  "version": "1.1",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(48, 10%, 10%)",
+      "tab_text": "hsl(48, 10%, 10%)",
+      "tab_selected": "hsl(140, 60%, 98%)",
+      "tab_line": "transparent",
+      "tab_loading": "hsl(144, 70%, 21%)",
+      "tab_loading_inactive": "hsl(144, 70%, 21%)",
+      "frame": "hsl(147, 53%, 75%)",
+      "popup": "hsl(140, 60%, 98%)",
+      "popup_text": "hsl(48, 10%, 10%)",
+      "popup_border": "hsl(147, 89%, 22%)",
+      "popup_highlight": "hsla(147, 54%, 52%, 0.3)",
+      "popup_highlight_text": "hsl(48, 10%, 10%)",
+      "toolbar": "hsl(146, 49%, 85%)",
+      "toolbar_text": "hsl(48, 10%, 10%)",
+      "toolbar_field": "hsl(147, 53%, 75%)",
+      "toolbar_field_text": "hsl(48, 10%, 10%)",
+      "toolbar_field_focus": "hsl(140, 60%, 98%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(147, 53%, 75%)",
+      "ntp_background": "hsl(148, 100%, 97%)",
+      "ntp_card_background": "hsl(140, 60%, 98%)",
+      "ntp_text": "hsl(48, 10%, 10%)",
+      "sidebar": "hsl(140, 60%, 98%)",
+      "sidebar_text": "hsl(48, 10%, 10%)",
+      "sidebar_highlight": "hsla(147, 54%, 52%, 0.3)",
+      "address_bar_box": "hsl(140, 60%, 98%)",
+      "address_bar_box_hover": "hsla(140, 60%, 98%, 0.8)",
+      "address_bar_box_active": "hsla(140, 60%, 98%, 0.65)",
+      "address_bar_box_focus": "hsl(146, 49%, 85%)",
+      "address_bar_box_text": "hsl(48, 10%, 10%)",
+      "address_bar_url_color": "hsl(147, 73%, 27%)",
+      "panel_item_hover": "hsla(147, 54%, 52%, 0.3)",
+      "panel_item_active": "hsla(147, 54%, 52%, 0.45)",
+      "panel_separator": "hsl(147, 89%, 22%)",
+      "icons_attention": "hsl(144, 70%, 21%)",
+      "toolbar_field_icons_attention": "hsl(144, 70%, 21%)",
+      "tab_attention_dot": "hsl(146, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(146, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/preview.svg b/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/preview.svg
new file mode 100644
index 0000000000..864706d582
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-independent-voices/visionary/soft/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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, 53%, 75%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(140, 60%, 98%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(146, 49%, 85%)" />
+  <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(147, 53%, 75%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-true-colors/blue/icon.svg b/browser/themes/addons/colorways/2022-true-colors/blue/icon.svg
new file mode 100644
index 0000000000..f562013826
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/blue/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(206, 43%, 65%)"/>
+      <stop offset="1" stop-color="hsl(206, 43%, 78%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-true-colors/blue/manifest.json b/browser/themes/addons/colorways/2022-true-colors/blue/manifest.json
new file mode 100644
index 0000000000..c0c38d40a1
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/blue/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "2022blue-colorway@mozilla.org"
+    }
+  },
+  "name": "Chillaxing",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(207, 60%, 36%)",
+      "tab_loading_inactive": "hsl(207, 60%, 36%)",
+      "frame": "hsl(206, 43%, 65%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(207, 43%, 75%)",
+      "popup_highlight": "hsla(207, 44%, 70%, 0.6)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(206, 43%, 78%)",
+      "toolbar_text": "hsl(0, 0%, 0%)",
+      "toolbar_field": "hsl(206, 43%, 65%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(206, 43%, 65%)",
+      "ntp_background": "hsl(207, 43%, 85%)",
+      "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(207, 44%, 70%, 0.6)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(206, 43%, 78%)",
+      "address_bar_box_text": "hsl(0, 0%, 0%)",
+      "address_bar_url_color": "hsl(207, 43%, 41%)",
+      "panel_item_hover": "hsla(207, 44%, 70%, 0.6)",
+      "panel_item_active": "hsla(207, 44%, 70%, 0.75)",
+      "panel_separator": "hsl(207, 43%, 75%)",
+      "icons_attention": "hsl(207, 60%, 36%)",
+      "toolbar_field_icons_attention": "hsl(207, 60%, 36%)",
+      "tab_attention_dot": "hsl(145, 33%, 40%)",
+      "appmenu_update_icon_color": "hsl(145, 33%, 40%)",
+      "appmenu_info_icon_color": "hsl(206, 50%, 41%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-true-colors/blue/preview.svg b/browser/themes/addons/colorways/2022-true-colors/blue/preview.svg
new file mode 100644
index 0000000000..96ca0f7ec8
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/blue/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(206, 43%, 65%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(206, 43%, 78%)" />
+  <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(206, 43%, 65%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-true-colors/green/icon.svg b/browser/themes/addons/colorways/2022-true-colors/green/icon.svg
new file mode 100644
index 0000000000..2ff592a450
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/green/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(142, 32%, 57%)"/>
+      <stop offset="1" stop-color="hsl(142, 32%, 73%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-true-colors/green/manifest.json b/browser/themes/addons/colorways/2022-true-colors/green/manifest.json
new file mode 100644
index 0000000000..540507a9fa
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/green/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "2022green-colorway@mozilla.org"
+    }
+  },
+  "name": "Vegging Out",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(142, 24%, 32%)",
+      "tab_loading_inactive": "hsl(142, 24%, 32%)",
+      "frame": "hsl(142, 32%, 57%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(142, 25%, 75%)",
+      "popup_highlight": "hsla(142, 32%, 78%, 0.8)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(142, 32%, 73%)",
+      "toolbar_text": "hsl(0, 0%, 0%)",
+      "toolbar_field": "hsl(142, 32%, 57%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(142, 32%, 57%)",
+      "ntp_background": "hsl(143, 32%, 89%)",
+      "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(142, 32%, 78%, 0.8)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(142, 32%, 73%)",
+      "address_bar_box_text": "hsl(0, 0%, 0%)",
+      "address_bar_url_color": "hsl(143, 35%, 30%)",
+      "panel_item_hover": "hsla(142, 32%, 78%, 0.8)",
+      "panel_item_active": "hsla(142, 32%, 78%, 0.95)",
+      "panel_separator": "hsl(142, 25%, 75%)",
+      "icons_attention": "hsl(142, 24%, 32%)",
+      "toolbar_field_icons_attention": "hsl(142, 24%, 32%)",
+      "tab_attention_dot": "hsl(141, 15%, 36%)",
+      "appmenu_update_icon_color": "hsl(141, 15%, 36%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 31%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-true-colors/green/preview.svg b/browser/themes/addons/colorways/2022-true-colors/green/preview.svg
new file mode 100644
index 0000000000..db7900891a
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/green/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(142, 32%, 57%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(142, 32%, 73%)" />
+  <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(142, 32%, 57%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-true-colors/orange/icon.svg b/browser/themes/addons/colorways/2022-true-colors/orange/icon.svg
new file mode 100644
index 0000000000..1eb441ce04
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/orange/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, 94%, 65%)"/>
+      <stop offset="1" stop-color="hsl(17, 92%, 80%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-true-colors/orange/manifest.json b/browser/themes/addons/colorways/2022-true-colors/orange/manifest.json
new file mode 100644
index 0000000000..8643398f91
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/orange/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "2022orange-colorway@mozilla.org"
+    }
+  },
+  "name": "That’s So Fire",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(16, 70%, 38%)",
+      "tab_loading_inactive": "hsl(16, 70%, 38%)",
+      "frame": "hsl(16, 94%, 65%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(16, 72%, 76%)",
+      "popup_highlight": "hsla(16, 90%, 50%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(17, 92%, 80%)",
+      "toolbar_text": "hsl(0, 0%, 0%)",
+      "toolbar_field": "hsl(16, 94%, 65%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(16, 94%, 65%)",
+      "ntp_background": "hsl(17, 92%, 90%)",
+      "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(16, 90%, 50%, 0.3)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(17, 92%, 80%)",
+      "address_bar_box_text": "hsl(0, 0%, 0%)",
+      "address_bar_url_color": "hsl(16, 90%, 43%)",
+      "panel_item_hover": "hsla(16, 90%, 50%, 0.3)",
+      "panel_item_active": "hsla(16, 90%, 50%, 0.45)",
+      "panel_separator": "hsl(16, 72%, 76%)",
+      "icons_attention": "hsl(16, 70%, 38%)",
+      "toolbar_field_icons_attention": "hsl(16, 70%, 38%)",
+      "tab_attention_dot": "hsl(145, 15%, 43%)",
+      "appmenu_update_icon_color": "hsl(145, 15%, 43%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 41%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-true-colors/orange/preview.svg b/browser/themes/addons/colorways/2022-true-colors/orange/preview.svg
new file mode 100644
index 0000000000..fbb738a93b
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/orange/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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, 94%, 65%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(17, 92%, 80%)" />
+  <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(16, 94%, 65%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-true-colors/purple/icon.svg b/browser/themes/addons/colorways/2022-true-colors/purple/icon.svg
new file mode 100644
index 0000000000..2e9e6dd54d
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/purple/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(284, 35%, 70%)"/>
+      <stop offset="1" stop-color="hsl(285, 36%, 81%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-true-colors/purple/manifest.json b/browser/themes/addons/colorways/2022-true-colors/purple/manifest.json
new file mode 100644
index 0000000000..2edb9ceaa8
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/purple/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "2022purple-colorway@mozilla.org"
+    }
+  },
+  "name": "Bomb-dot-com",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(285, 35%, 42%)",
+      "tab_loading_inactive": "hsl(285, 35%, 42%)",
+      "frame": "hsl(284, 35%, 70%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(284, 80%, 77%)",
+      "popup_highlight": "hsla(284, 61%, 75%, 0.6)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(285, 36%, 81%)",
+      "toolbar_text": "hsl(0, 0%, 0%)",
+      "toolbar_field": "hsl(284, 35%, 70%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(284, 35%, 70%)",
+      "ntp_background": "hsl(284, 35%, 88%)",
+      "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(284, 61%, 75%, 0.6)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(285, 36%, 81%)",
+      "address_bar_box_text": "hsl(0, 0%, 0%)",
+      "address_bar_url_color": "hsl(285, 32%, 40%)",
+      "panel_item_hover": "hsla(284, 61%, 75%, 0.6)",
+      "panel_item_active": "hsla(284, 61%, 75%, 0.75)",
+      "panel_separator": "hsl(284, 80%, 77%)",
+      "icons_attention": "hsl(285, 35%, 42%)",
+      "toolbar_field_icons_attention": "hsl(285, 35%, 42%)",
+      "tab_attention_dot": "hsl(145, 35%, 46%)",
+      "appmenu_update_icon_color": "hsl(145, 35%, 46%)",
+      "appmenu_info_icon_color": "hsl(203, 80%, 50%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-true-colors/purple/preview.svg b/browser/themes/addons/colorways/2022-true-colors/purple/preview.svg
new file mode 100644
index 0000000000..76f57a9fb6
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/purple/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(284, 35%, 70%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(285, 36%, 81%)" />
+  <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(284, 35%, 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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-true-colors/red/icon.svg b/browser/themes/addons/colorways/2022-true-colors/red/icon.svg
new file mode 100644
index 0000000000..899cffc519
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/red/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(356, 95%, 67%)"/>
+      <stop offset="1" stop-color="hsl(356, 91%, 75%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-true-colors/red/manifest.json b/browser/themes/addons/colorways/2022-true-colors/red/manifest.json
new file mode 100644
index 0000000000..b4cfb2a82a
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/red/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "2022red-colorway@mozilla.org"
+    }
+  },
+  "name": "Rawrrr!",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(356, 72%, 27%)",
+      "tab_loading_inactive": "hsl(356, 72%, 27%)",
+      "frame": "hsl(356, 95%, 67%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(356, 61%, 78%)",
+      "popup_highlight": "hsla(356, 75%, 76%, 0.6)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(356, 91%, 75%)",
+      "toolbar_text": "hsl(0, 0%, 0%)",
+      "toolbar_field": "hsl(356, 95%, 67%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(356, 95%, 67%)",
+      "ntp_background": "hsl(356, 84%, 88%)",
+      "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(356, 75%, 76%, 0.6)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(356, 91%, 75%)",
+      "address_bar_box_text": "hsl(0, 0%, 0%)",
+      "address_bar_url_color": "hsl(356, 72%, 42%)",
+      "panel_item_hover": "hsla(356, 75%, 76%, 0.6)",
+      "panel_item_active": "hsla(356, 75%, 76%, 0.75)",
+      "panel_separator": "hsl(356, 61%, 78%)",
+      "icons_attention": "hsl(356, 72%, 27%)",
+      "toolbar_field_icons_attention": "hsl(356, 72%, 27%)",
+      "tab_attention_dot": "hsl(145, 15%, 34%)",
+      "appmenu_update_icon_color": "hsl(145, 15%, 34%)",
+      "appmenu_info_icon_color": "hsl(204, 75%, 28%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-true-colors/red/preview.svg b/browser/themes/addons/colorways/2022-true-colors/red/preview.svg
new file mode 100644
index 0000000000..7ce088c235
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/red/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(356, 95%, 67%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(356, 91%, 75%)" />
+  <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(356, 95%, 67%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-true-colors/yellow/icon.svg b/browser/themes/addons/colorways/2022-true-colors/yellow/icon.svg
new file mode 100644
index 0000000000..055ac2904b
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/yellow/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(39, 98%, 63%)"/>
+      <stop offset="1" stop-color="hsl(39, 98%, 84%)"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/colorways/2022-true-colors/yellow/manifest.json b/browser/themes/addons/colorways/2022-true-colors/yellow/manifest.json
new file mode 100644
index 0000000000..fad940bbb4
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/yellow/manifest.json
@@ -0,0 +1,76 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "2022yellow-colorway@mozilla.org"
+    }
+  },
+  "name": "Cheese Puff",
+  "author": "Mozilla",
+  "version": "1.1",
+  "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",
+      "tab_loading": "hsl(29, 84%, 46%)",
+      "tab_loading_inactive": "hsl(29, 84%, 46%)",
+      "frame": "hsl(39, 98%, 63%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(39, 100%, 68%)",
+      "popup_highlight": "hsla(39, 100%, 72%, 0.9)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(39, 98%, 84%)",
+      "toolbar_text": "hsl(0, 0%, 0%)",
+      "toolbar_field": "hsl(39, 98%, 63%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "rgba(0, 96, 223, 0.5)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(39, 98%, 63%)",
+      "ntp_background": "hsl(39, 97%, 87%)",
+      "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(39, 100%, 72%, 0.9)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_hover": "hsla(0, 0%, 100%, 0.8)",
+      "address_bar_box_active": "hsla(0, 0%, 100%, 0.65)",
+      "address_bar_box_focus": "hsl(39, 98%, 84%)",
+      "address_bar_box_text": "hsl(0, 0%, 0%)",
+      "address_bar_url_color": "hsl(39, 100%, 30%)",
+      "panel_item_hover": "hsla(39, 100%, 72%, 0.9)",
+      "panel_item_active": "hsl(39, 100%, 72%)",
+      "panel_separator": "hsl(39, 100%, 68%)",
+      "icons_attention": "hsl(29, 84%, 46%)",
+      "toolbar_field_icons_attention": "hsl(29, 84%, 46%)",
+      "tab_attention_dot": "hsl(138, 15%, 44%)",
+      "appmenu_update_icon_color": "hsl(138, 15%, 44%)",
+      "appmenu_info_icon_color": "hsl(203, 77%, 41%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_hover": "--urlbar-box-hover-bgcolor",
+      "address_bar_box_active": "--urlbar-box-active-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",
+      "toolbar_field_icons_attention": "--lwt-toolbar-field-icon-fill-attention",
+      "tab_attention_dot": "--lwt-tab-attention-icon-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_loading_inactive": "--lwt-tab-loading-fill-inactive"
+    }
+  }
+}
diff --git a/browser/themes/addons/colorways/2022-true-colors/yellow/preview.svg b/browser/themes/addons/colorways/2022-true-colors/yellow/preview.svg
new file mode 100644
index 0000000000..dfe21a4881
--- /dev/null
+++ b/browser/themes/addons/colorways/2022-true-colors/yellow/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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(39, 98%, 63%)" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  </g>
+  <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(39, 98%, 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(39, 98%, 63%)" />
+  <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%)" />
+  <defs>
+  <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="2" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+    <feOffset />
+    <feGaussianBlur stdDeviation="0.5" />
+    <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+  </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/dark/experiment.css b/browser/themes/addons/dark/experiment.css
new file mode 100644
index 0000000000..be11bc1988
--- /dev/null
+++ b/browser/themes/addons/dark/experiment.css
@@ -0,0 +1,6 @@
+/* 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/. */
+
+/* Proton Dark theme */
+@import url("chrome://browser/skin/light-dark-overrides.css");
diff --git a/browser/themes/addons/dark/icon.svg b/browser/themes/addons/dark/icon.svg
new file mode 100644
index 0000000000..6d60850b77
--- /dev/null
+++ b/browser/themes/addons/dark/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="#42414D"/>
+      <stop offset="1" stop-color="#1C1B22"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/dark/manifest.json b/browser/themes/addons/dark/manifest.json
new file mode 100644
index 0000000000..eb8242fbb8
--- /dev/null
+++ b/browser/themes/addons/dark/manifest.json
@@ -0,0 +1,97 @@
+{
+  "manifest_version": 2,
+
+  "applications": {
+    "gecko": {
+      "id": "firefox-compact-dark@mozilla.org"
+    }
+  },
+
+  "name": "Dark",
+  "description": "A theme with a dark color scheme.",
+  "author": "Mozilla",
+  "version": "1.2",
+
+  "icons": {"32": "icon.svg"},
+
+  "theme": {
+    "colors": {
+      "tab_background_text": "#fbfbfe",
+      "tab_selected": "rgb(66,65,77)",
+      "tab_text": "rgb(251,251,254)",
+      "icons": "rgb(251,251,254)",
+      "frame": "#1c1b22",
+      "popup": "rgb(66,65,77)",
+      "popup_text": "rgb(251,251,254)",
+      "popup_border": "rgb(82,82,94)",
+      "popup_highlight": "rgb(43,42,51)",
+      "tab_line": "transparent",
+      "toolbar": "rgb(43,42,51)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(240, 5%, 5%)",
+      "toolbar_field": "rgb(28,27,34)",
+      "toolbar_field_border": "transparent",
+      "toolbar_field_text": "rgb(251,251,254)",
+      "toolbar_field_focus": "rgb(66,65,77)",
+      "toolbar_text": "rgb(251, 251, 254)",
+      "ntp_background": "rgb(43, 42, 51)",
+      "ntp_card_background": "rgb(66,65,77)",
+      "ntp_text": "rgb(251, 251, 254)",
+      "sidebar": "#38383D",
+      "sidebar_text": "rgb(249, 249, 250)",
+      "sidebar_border": "rgba(255, 255, 255, 0.1)",
+      "button": "rgb(43,42,51)",
+      "button_hover": "rgb(82,82,94)",
+      "button_active": "rgb(91,91,102)",
+      "button_primary": "rgb(0, 221, 255)",
+      "button_primary_hover": "rgb(128, 235, 255)",
+      "button_primary_active": "rgb(170, 242, 255)",
+      "button_primary_color": "rgb(43, 42, 51)",
+      "input_background": "#42414D",
+      "input_color": "rgb(251,251,254)",
+      "input_border": "#8f8f9d",
+      "autocomplete_popup_separator": "rgb(82,82,94)",
+      "appmenu_update_icon_color": "#54FFBD",
+      "appmenu_info_icon_color": "#80EBFF",
+      "tab_icon_overlay_stroke": "rgb(66,65,77)",
+      "tab_icon_overlay_fill": "rgb(251,251,254)"
+    },
+    "properties": {
+      "color_scheme": "dark",
+      "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)",
+      "panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
+      "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)",
+      "toolbar_field_icon_opacity": "1",
+      "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
+    }
+  },
+
+  "theme_experiment": {
+    "stylesheet": "experiment.css",
+    "colors": {
+      "button": "--button-bgcolor",
+      "button_hover": "--button-hover-bgcolor",
+      "button_active": "--button-active-bgcolor",
+      "button_primary": "--button-primary-bgcolor",
+      "button_primary_hover": "--button-primary-hover-bgcolor",
+      "button_primary_active": "--button-primary-active-bgcolor",
+      "button_primary_color": "--button-primary-color",
+      "input_background": "--input-bgcolor",
+      "input_color": "--input-color",
+      "input_border": "--input-border-color",
+      "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
+      "zoom_controls": "--zoom-controls-bgcolor",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_icon_overlay_stroke": "--tab-icon-overlay-stroke",
+      "tab_icon_overlay_fill": "--tab-icon-overlay-fill"
+    },
+    "properties": {
+      "panel_hover": "--panel-item-hover-bgcolor",
+      "panel_active": "--arrowpanel-dimmed-further",
+      "panel_active_darker": "--panel-item-active-bgcolor",
+      "toolbar_field_icon_opacity": "--urlbar-icon-fill-opacity",
+      "zap_gradient": "--panel-separator-zap-gradient"
+    }
+  }
+}
diff --git a/browser/themes/addons/dark/preview.svg b/browser/themes/addons/dark/preview.svg
new file mode 100644
index 0000000000..7fd9cbcfa7
--- /dev/null
+++ b/browser/themes/addons/dark/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" viewBox="0 0 680 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="#1C1B22" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="#42414D" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="#FBFBFE" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="#B8B7BB" />
+  <rect y="44" width="680" height="48" fill="#2B2A33" />
+  <circle cx="24" cy="68" r="6.25" stroke="#FBFBFE" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="#FBFBFE" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="#FBFBFE" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="#FBFBFE" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="#FBFBFE" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="#1C1B22" />
+  <circle cx="130" cy="68" r="6.25" stroke="white" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="white" />
+</svg>
diff --git a/browser/themes/addons/jar.mn b/browser/themes/addons/jar.mn
new file mode 100644
index 0000000000..69bb3000d6
--- /dev/null
+++ b/browser/themes/addons/jar.mn
@@ -0,0 +1,102 @@
+# 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/.
+
+browser.jar:
+%  resource builtin-themes %content/builtin-themes/
+
+  content/builtin-themes/alpenglow                 (alpenglow/*.svg)
+  content/builtin-themes/alpenglow/manifest.json   (alpenglow/manifest.json)
+
+  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/colorways/2021lush/soft                          (colorways/2021-life-in-color/lush/soft/*.svg)
+  content/builtin-themes/colorways/2021lush/soft/manifest.json            (colorways/2021-life-in-color/lush/soft/manifest.json)
+  content/builtin-themes/colorways/2021lush/balanced                      (colorways/2021-life-in-color/lush/balanced/*.svg)
+  content/builtin-themes/colorways/2021lush/balanced/manifest.json        (colorways/2021-life-in-color/lush/balanced/manifest.json)
+  content/builtin-themes/colorways/2021lush/bold                          (colorways/2021-life-in-color/lush/bold/*.svg)
+  content/builtin-themes/colorways/2021lush/bold/manifest.json            (colorways/2021-life-in-color/lush/bold/manifest.json)
+  content/builtin-themes/colorways/2021abstract/soft                      (colorways/2021-life-in-color/abstract/soft/*.svg)
+  content/builtin-themes/colorways/2021abstract/soft/manifest.json        (colorways/2021-life-in-color/abstract/soft/manifest.json)
+  content/builtin-themes/colorways/2021abstract/balanced                  (colorways/2021-life-in-color/abstract/balanced/*.svg)
+  content/builtin-themes/colorways/2021abstract/balanced/manifest.json    (colorways/2021-life-in-color/abstract/balanced/manifest.json)
+  content/builtin-themes/colorways/2021abstract/bold                      (colorways/2021-life-in-color/abstract/bold/*.svg)
+  content/builtin-themes/colorways/2021abstract/bold/manifest.json        (colorways/2021-life-in-color/abstract/bold/manifest.json)
+  content/builtin-themes/colorways/2021elemental/soft                     (colorways/2021-life-in-color/elemental/soft/*.svg)
+  content/builtin-themes/colorways/2021elemental/soft/manifest.json       (colorways/2021-life-in-color/elemental/soft/manifest.json)
+  content/builtin-themes/colorways/2021elemental/balanced                 (colorways/2021-life-in-color/elemental/balanced/*.svg)
+  content/builtin-themes/colorways/2021elemental/balanced/manifest.json   (colorways/2021-life-in-color/elemental/balanced/manifest.json)
+  content/builtin-themes/colorways/2021elemental/bold                     (colorways/2021-life-in-color/elemental/bold/*.svg)
+  content/builtin-themes/colorways/2021elemental/bold/manifest.json       (colorways/2021-life-in-color/elemental/bold/manifest.json)
+  content/builtin-themes/colorways/2021cheers/soft                        (colorways/2021-life-in-color/cheers/soft/*.svg)
+  content/builtin-themes/colorways/2021cheers/soft/manifest.json          (colorways/2021-life-in-color/cheers/soft/manifest.json)
+  content/builtin-themes/colorways/2021cheers/balanced                    (colorways/2021-life-in-color/cheers/balanced/*.svg)
+  content/builtin-themes/colorways/2021cheers/balanced/manifest.json      (colorways/2021-life-in-color/cheers/balanced/manifest.json)
+  content/builtin-themes/colorways/2021cheers/bold                        (colorways/2021-life-in-color/cheers/bold/*.svg)
+  content/builtin-themes/colorways/2021cheers/bold/manifest.json          (colorways/2021-life-in-color/cheers/bold/manifest.json)
+  content/builtin-themes/colorways/2021graffiti/soft                      (colorways/2021-life-in-color/graffiti/soft/*.svg)
+  content/builtin-themes/colorways/2021graffiti/soft/manifest.json        (colorways/2021-life-in-color/graffiti/soft/manifest.json)
+  content/builtin-themes/colorways/2021graffiti/balanced                  (colorways/2021-life-in-color/graffiti/balanced/*.svg)
+  content/builtin-themes/colorways/2021graffiti/balanced/manifest.json    (colorways/2021-life-in-color/graffiti/balanced/manifest.json)
+  content/builtin-themes/colorways/2021graffiti/bold                      (colorways/2021-life-in-color/graffiti/bold/*.svg)
+  content/builtin-themes/colorways/2021graffiti/bold/manifest.json        (colorways/2021-life-in-color/graffiti/bold/manifest.json)
+  content/builtin-themes/colorways/2021foto/soft                          (colorways/2021-life-in-color/foto/soft/*.svg)
+  content/builtin-themes/colorways/2021foto/soft/manifest.json            (colorways/2021-life-in-color/foto/soft/manifest.json)
+  content/builtin-themes/colorways/2021foto/balanced                      (colorways/2021-life-in-color/foto/balanced/*.svg)
+  content/builtin-themes/colorways/2021foto/balanced/manifest.json        (colorways/2021-life-in-color/foto/balanced/manifest.json)
+  content/builtin-themes/colorways/2021foto/bold                          (colorways/2021-life-in-color/foto/bold/*.svg)
+  content/builtin-themes/colorways/2021foto/bold/manifest.json            (colorways/2021-life-in-color/foto/bold/manifest.json)
+  content/builtin-themes/colorways/2022blue                   (colorways/2022-true-colors/blue/*.svg)
+  content/builtin-themes/colorways/2022blue/manifest.json     (colorways/2022-true-colors/blue/manifest.json)
+  content/builtin-themes/colorways/2022green                  (colorways/2022-true-colors/green/*.svg)
+  content/builtin-themes/colorways/2022green/manifest.json    (colorways/2022-true-colors/green/manifest.json)
+  content/builtin-themes/colorways/2022orange                 (colorways/2022-true-colors/orange/*.svg)
+  content/builtin-themes/colorways/2022orange/manifest.json   (colorways/2022-true-colors/orange/manifest.json)
+  content/builtin-themes/colorways/2022purple                 (colorways/2022-true-colors/purple/*.svg)
+  content/builtin-themes/colorways/2022purple/manifest.json   (colorways/2022-true-colors/purple/manifest.json)
+  content/builtin-themes/colorways/2022red                    (colorways/2022-true-colors/red/*.svg)
+  content/builtin-themes/colorways/2022red/manifest.json      (colorways/2022-true-colors/red/manifest.json)
+  content/builtin-themes/colorways/2022yellow                 (colorways/2022-true-colors/yellow/*.svg)
+  content/builtin-themes/colorways/2022yellow/manifest.json   (colorways/2022-true-colors/yellow/manifest.json)
+  content/builtin-themes/colorways/2022playmaker/soft                         (colorways/2022-independent-voices/playmaker/soft/*.svg)
+  content/builtin-themes/colorways/2022playmaker/soft/manifest.json           (colorways/2022-independent-voices/playmaker/soft/manifest.json)
+  content/builtin-themes/colorways/2022playmaker/balanced                     (colorways/2022-independent-voices/playmaker/balanced/*.svg)
+  content/builtin-themes/colorways/2022playmaker/balanced/manifest.json       (colorways/2022-independent-voices/playmaker/balanced/manifest.json)
+  content/builtin-themes/colorways/2022playmaker/bold                         (colorways/2022-independent-voices/playmaker/bold/*.svg)
+  content/builtin-themes/colorways/2022playmaker/bold/manifest.json           (colorways/2022-independent-voices/playmaker/bold/manifest.json)
+  content/builtin-themes/colorways/2022expressionist/soft                     (colorways/2022-independent-voices/expressionist/soft/*.svg)
+  content/builtin-themes/colorways/2022expressionist/soft/manifest.json       (colorways/2022-independent-voices/expressionist/soft/manifest.json)
+  content/builtin-themes/colorways/2022expressionist/balanced                 (colorways/2022-independent-voices/expressionist/balanced/*.svg)
+  content/builtin-themes/colorways/2022expressionist/balanced/manifest.json   (colorways/2022-independent-voices/expressionist/balanced/manifest.json)
+  content/builtin-themes/colorways/2022expressionist/bold                     (colorways/2022-independent-voices/expressionist/bold/*.svg)
+  content/builtin-themes/colorways/2022expressionist/bold/manifest.json       (colorways/2022-independent-voices/expressionist/bold/manifest.json)
+  content/builtin-themes/colorways/2022visionary/soft                         (colorways/2022-independent-voices/visionary/soft/*.svg)
+  content/builtin-themes/colorways/2022visionary/soft/manifest.json           (colorways/2022-independent-voices/visionary/soft/manifest.json)
+  content/builtin-themes/colorways/2022visionary/balanced                     (colorways/2022-independent-voices/visionary/balanced/*.svg)
+  content/builtin-themes/colorways/2022visionary/balanced/manifest.json       (colorways/2022-independent-voices/visionary/balanced/manifest.json)
+  content/builtin-themes/colorways/2022visionary/bold                         (colorways/2022-independent-voices/visionary/bold/*.svg)
+  content/builtin-themes/colorways/2022visionary/bold/manifest.json           (colorways/2022-independent-voices/visionary/bold/manifest.json)
+  content/builtin-themes/colorways/2022activist/soft                          (colorways/2022-independent-voices/activist/soft/*.svg)
+  content/builtin-themes/colorways/2022activist/soft/manifest.json            (colorways/2022-independent-voices/activist/soft/manifest.json)
+  content/builtin-themes/colorways/2022activist/balanced                      (colorways/2022-independent-voices/activist/balanced/*.svg)
+  content/builtin-themes/colorways/2022activist/balanced/manifest.json        (colorways/2022-independent-voices/activist/balanced/manifest.json)
+  content/builtin-themes/colorways/2022activist/bold                          (colorways/2022-independent-voices/activist/bold/*.svg)
+  content/builtin-themes/colorways/2022activist/bold/manifest.json            (colorways/2022-independent-voices/activist/bold/manifest.json)
+  content/builtin-themes/colorways/2022dreamer/soft                           (colorways/2022-independent-voices/dreamer/soft/*.svg)
+  content/builtin-themes/colorways/2022dreamer/soft/manifest.json             (colorways/2022-independent-voices/dreamer/soft/manifest.json)
+  content/builtin-themes/colorways/2022dreamer/balanced                       (colorways/2022-independent-voices/dreamer/balanced/*.svg)
+  content/builtin-themes/colorways/2022dreamer/balanced/manifest.json         (colorways/2022-independent-voices/dreamer/balanced/manifest.json)
+  content/builtin-themes/colorways/2022dreamer/bold                           (colorways/2022-independent-voices/dreamer/bold/*.svg)
+  content/builtin-themes/colorways/2022dreamer/bold/manifest.json             (colorways/2022-independent-voices/dreamer/bold/manifest.json)
+  content/builtin-themes/colorways/2022innovator/soft                         (colorways/2022-independent-voices/innovator/soft/*.svg)
+  content/builtin-themes/colorways/2022innovator/soft/manifest.json           (colorways/2022-independent-voices/innovator/soft/manifest.json)
+  content/builtin-themes/colorways/2022innovator/balanced                     (colorways/2022-independent-voices/innovator/balanced/*.svg)
+  content/builtin-themes/colorways/2022innovator/balanced/manifest.json       (colorways/2022-independent-voices/innovator/balanced/manifest.json)
+  content/builtin-themes/colorways/2022innovator/bold                         (colorways/2022-independent-voices/innovator/bold/*.svg)
+  content/builtin-themes/colorways/2022innovator/bold/manifest.json           (colorways/2022-independent-voices/innovator/bold/manifest.json)
diff --git a/browser/themes/addons/light/experiment.css b/browser/themes/addons/light/experiment.css
new file mode 100644
index 0000000000..fbb5ce4f51
--- /dev/null
+++ b/browser/themes/addons/light/experiment.css
@@ -0,0 +1,6 @@
+/* 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/. */
+
+/* Proton Light theme */
+@import url("chrome://browser/skin/light-dark-overrides.css");
diff --git a/browser/themes/addons/light/icon.svg b/browser/themes/addons/light/icon.svg
new file mode 100644
index 0000000000..5a4c2d0e67
--- /dev/null
+++ b/browser/themes/addons/light/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="11.4829" y1="51" x2="43.4829" y2="19" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F0F0F4"/>
+      <stop offset="1" stop-color="#F9F9FB"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/light/manifest.json b/browser/themes/addons/light/manifest.json
new file mode 100644
index 0000000000..9faa95b863
--- /dev/null
+++ b/browser/themes/addons/light/manifest.json
@@ -0,0 +1,98 @@
+{
+  "manifest_version": 2,
+
+  "applications": {
+    "gecko": {
+      "id": "firefox-compact-light@mozilla.org"
+    }
+  },
+
+  "name": "Light",
+  "description": "A theme with a light color scheme.",
+  "author": "Mozilla",
+  "version": "1.2",
+
+  "icons": {"32": "icon.svg"},
+
+  "theme": {
+    "colors": {
+      "tab_background_text": "rgb(21,20,26)",
+      "tab_selected": "#fff",
+      "tab_text": "rgb(21,20,26)",
+      "icons": "rgb(91,91,102)",
+      "frame": "#f0f0f4",
+      "popup": "#fff",
+      "popup_text": "rgb(21,20,26)",
+      "popup_border": "rgb(240,240,244)",
+      "popup_highlight": "#e0e0e6",
+      "popup_highlight_text": "#15141a",
+      "tab_line": "transparent",
+      "toolbar": "#f9f9fb",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "#ccc",
+      "toolbar_field": "#f0f0f4",
+      "toolbar_field_text": "rgb(21,20,26)",
+      "toolbar_field_border": "transparent",
+      "toolbar_field_focus": "white",
+      "toolbar_text": "rgb(21,20,26)",
+      "ntp_background": "#F9F9FB",
+      "ntp_text": "rgb(21, 20, 26)",
+      "popup_action_color": "rgb(91,91,102)",
+      "button": "rgba(207,207,216,.33)",
+      "button_hover": "rgba(207,207,216,.66)",
+      "button_active": "rgb(207,207,216)",
+      "button_primary": "rgb(0, 97, 224)",
+      "button_primary_hover": "rgb(2, 80, 187)",
+      "button_primary_active": "rgb(5, 62, 148)",
+      "button_primary_color": "rgb(251, 251, 254)",
+      "input_color": "rgb(21,20,26)",
+      "input_background": "rgb(255,255,255)",
+      "autocomplete_popup_hover": "rgb(240,240,244)",
+      "autocomplete_popup_separator": "rgb(240,240,244)",
+      "appmenu_update_icon_color": "#2AC3A2",
+      "appmenu_info_icon_color": "#0090ED",
+      "tab_icon_overlay_stroke": "rgb(255,255,255)",
+      "tab_icon_overlay_fill": "rgb(91,91,102)"
+    },
+    "properties": {
+      "color_scheme": "light",
+      "panel_hover": "color-mix(in srgb, currentColor 12%, transparent)",
+      "panel_active": "color-mix(in srgb, currentColor 20%, transparent)",
+      "panel_active_darker": "color-mix(in srgb, currentColor 27%, transparent)",
+      "toolbar_field_icon_opacity": "0.72",
+      "input_border_color": "color-mix(in srgb, currentColor 41%, transparent)",
+      "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
+    }
+  },
+
+  "theme_experiment": {
+    "stylesheet": "experiment.css",
+    "colors": {
+      "popup_action_color": "--urlbar-popup-action-color",
+      "button": "--button-bgcolor",
+      "button_hover": "--button-hover-bgcolor",
+      "button_active": "--button-active-bgcolor",
+      "button_primary": "--button-primary-bgcolor",
+      "button_primary_hover": "--button-primary-hover-bgcolor",
+      "button_primary_active": "--button-primary-active-bgcolor",
+      "button_primary_color": "--button-primary-color",
+      "input_background": "--input-bgcolor",
+      "input_color": "--input-color",
+      "input_border": "--input-border-color",
+      "autocomplete_popup_hover": "--autocomplete-popup-hover-background",
+      "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_icon_overlay_stroke": "--tab-icon-overlay-stroke",
+      "tab_icon_overlay_fill": "--tab-icon-overlay-fill"
+    },
+    "properties": {
+      "panel_hover": "--panel-item-hover-bgcolor",
+      "panel_active": "--arrowpanel-dimmed-further",
+      "panel_active_darker": "--panel-item-active-bgcolor",
+      "toolbar_field_icon_opacity": "--urlbar-icon-fill-opacity",
+      "input_border_color": "--input-border-color",
+      "zap_gradient": "--panel-separator-zap-gradient"
+    }
+  }
+}
diff --git a/browser/themes/addons/light/preview.svg b/browser/themes/addons/light/preview.svg
new file mode 100644
index 0000000000..19e9643169
--- /dev/null
+++ b/browser/themes/addons/light/preview.svg
@@ -0,0 +1,36 @@
+<!-- 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="#F0F0F4" />
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="white" />
+  </g>
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="#15141A" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="#15141A" />
+  <rect y="44" width="680" height="48" fill="#F9F9FB" />
+  <circle cx="24" cy="68" r="6.25" stroke="#5B5B66" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="#5B5B66" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="#5B5B66" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="#5B5B66" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="#5B5B66" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="#F0F0F4" />
+  <circle cx="130" cy="68" r="6.25" stroke="#5B5B66" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="#5B5B66" />
+  <defs>
+    <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+      <feOffset />
+      <feGaussianBlur stdDeviation="2" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+      <feOffset />
+      <feGaussianBlur stdDeviation="0.5" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
+      <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+    </filter>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/moz.build b/browser/themes/addons/moz.build
new file mode 100644
index 0000000000..d988c0ff9b
--- /dev/null
+++ b/browser/themes/addons/moz.build
@@ -0,0 +1,7 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+JAR_MANIFESTS += ["jar.mn"]
diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
new file mode 100644
index 0000000000..31a762b322
--- /dev/null
+++ b/browser/themes/linux/browser.css
@@ -0,0 +1,447 @@
+/* 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/. */
+
+@import url("chrome://browser/skin/browser-shared.css");
+@import url("chrome://browser/skin/contextmenu.css");
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/**
+ * We intentionally do not include browser-custom-colors.css,
+ * instead choosing to fall back to system colours and transparencies
+ * in order to accomodate the wider variety of system themes on that
+ * platform.
+ */
+
+:root {
+  --toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white);
+  --toolbar-non-lwt-textcolor: -moz-dialogtext;
+
+  --panel-separator-color: ThreeDShadow;
+
+  --chrome-content-separator-color: ThreeDShadow;
+}
+
+#TabsToolbar:not(:-moz-lwtheme),
+#TabsToolbar[brighttext]:not(:-moz-lwtheme) {
+  --tab-attention-icon-color: AccentColor;
+}
+
+:root:-moz-lwtheme {
+  --chrome-content-separator-color: rgba(0,0,0,.3);
+
+  --panel-separator-color: hsla(210,4%,10%,.14);
+}
+
+:root[lwt-popup-brighttext] {
+  --panel-separator-color: rgba(249,249,250,.1);
+}
+
+#menubar-items {
+  -moz-box-orient: vertical; /* for flex hack */
+}
+
+#navigator-toolbox {
+  appearance: none;
+  background-color: transparent;
+  border-top: none;
+}
+
+.browser-toolbar {
+  padding: 0;
+}
+
+.browser-toolbar:not(.titlebar-color) {
+  background-color: var(--toolbar-bgcolor);
+  color: var(--toolbar-color);
+  appearance: none;
+  border-style: none;
+}
+
+#nav-bar:not([tabs-hidden="true"]) {
+  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3));
+  /* This is needed for some toolbar button animations. Gross :( */
+  position: relative;
+}
+
+/* Bookmark menus */
+menu.bookmark-item,
+menuitem.bookmark-item {
+  min-width: 0;
+  max-width: 32em;
+}
+
+.bookmark-item:not(.subviewbutton) > .menu-iconic-left {
+  margin-block: 0;
+}
+
+/* Bookmark drag and drop styles */
+.bookmark-item[dragover-into="true"] {
+  background: SelectedItem !important;
+  color: SelectedItemText !important;
+}
+
+.bookmark-item[cutting] > .toolbarbutton-icon,
+.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
+  opacity: 0.5;
+}
+
+.bookmark-item[cutting] > .toolbarbutton-text,
+.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
+  opacity: 0.7;
+}
+
+/* Address bar */
+#urlbar,
+#searchbar {
+  font-size: 1.05em;
+}
+
+@supports -moz-bool-pref("browser.urlbar.experimental.expandTextOnFocus") {
+  #urlbar[breakout-extend] {
+    font-size: 1.14em;
+  }
+}
+
+:root {
+  --toolbar-field-border-color: ThreeDShadow;
+}
+
+/* Address bar results view */
+
+:root:not(:-moz-lwtheme) {
+  --urlbar-popup-action-color: -moz-nativehyperlinktext;
+  --autocomplete-popup-highlight-background: SelectedItem;
+  --autocomplete-popup-highlight-color: SelectedItemText;
+}
+
+/* AutoComplete */
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
+  border-top: 1px solid ThreeDShadow;
+}
+
+/* Content area */
+
+
+#browser {
+  --sidebar-border-color: ThreeDShadow;
+}
+
+.sidebar-splitter {
+  appearance: none;
+  width: 6px;
+  background-color: -moz-dialog;
+  border: 1px ThreeDShadow;
+  border-style: none solid;
+}
+
+/* Tabstrip */
+
+#tabbrowser-tabs {
+  /* override the global style to allow the selected tab to be above the nav-bar */
+  z-index: auto;
+}
+
+#TabsToolbar {
+  min-height: 0;
+}
+
+#TabsToolbar:not(:-moz-lwtheme) {
+  appearance: auto;
+  -moz-default-appearance: menubar;
+  color: -moz-menubartext;
+}
+
+#context_reloadTab {
+  list-style-image: url("moz-icon://stock/gtk-refresh?size=menu");
+}
+
+#context_closeOtherTabs {
+  list-style-image: url("moz-icon://stock/gtk-clear?size=menu");
+}
+
+#context_closeOtherTabs[disabled] {
+  list-style-image: url("moz-icon://stock/gtk-clear?size=menu&state=disabled");
+}
+
+#context_undoCloseTab {
+  list-style-image: url("moz-icon://stock/gtk-undelete?size=menu");
+}
+
+#context_closeTab {
+  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
+}
+
+/* All tabs menupopup */
+
+.alltabs-item[selected="true"] {
+  font-weight: bold;
+}
+
+/* Status panel */
+
+#statuspanel-label {
+  margin: 0;
+  padding: 2px 4px;
+  background-color: -moz-dialog;
+  border: 1px none ThreeDShadow;
+  border-top-style: solid;
+  color: -moz-dialogText;
+  text-shadow: none;
+  color-scheme: light;
+}
+
+@media (-moz-content-prefers-color-scheme: dark) {
+  #statuspanel-label {
+    color-scheme: dark;
+  }
+}
+
+#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(ltr),
+#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(rtl) {
+  border-right-style: solid;
+  border-top-right-radius: .3em;
+  margin-right: 1em;
+}
+
+#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(rtl),
+#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(ltr) {
+  border-left-style: solid;
+  border-top-left-radius: .3em;
+  margin-left: 1em;
+}
+
+
+#UITourHighlight {
+  /* Below are some fixes for people without an X compositor on Linux.
+     This is why we can't have nice things: */
+  /* Animations don't repaint properly without an X compositor. */
+  animation-name: none !important;
+  /* Opacity rounds to 0 or 1 on Linux without an X compositor, making the
+     background color not visible. Anti-aliasing is not available either. Make a
+     thicker outline and cancel border-radius for that case. */
+     outline: 4px solid rgb(0,200,215);
+     border-radius: 0 !important;
+}
+
+#UITourTooltipDescription {
+  font-size: 1.05rem;
+}
+
+#UITourTooltipClose {
+  margin-inline-end: -4px;
+}
+
+/**
+ * Override the --arrowpanel-padding so the background extends
+ * to the sides and bottom of the panel.
+ */
+#UITourTooltipButtons {
+  margin-inline-start: -10px;
+  margin-bottom: -10px;
+}
+
+#context-navigation > .menuitem-iconic > .menu-iconic-left {
+  /* override toolkit/themes/linux/global/menu.css */
+  padding-inline-end: 0 !important;
+  margin-inline-end: 0 !important;
+}
+
+/**
+ * Titlebar drawing:
+ *
+ * We draw to titlebar when Gkt+ CSD is available. This is mostly
+ * straight-forward, but getting the window corners to look perfect is a bit
+ * tricky, as there are different variables to take into account.
+ *
+ * GTK windows have both a window radius (exposed via the
+ * `-moz-gtk-csd-titlebar-radius`) environment variable, and a window shadow
+ * (which we can't read back from GTK). Note that the native drawing does draw
+ * the shadow already.
+ *
+ * So there are multiple configurations to consider:
+ *
+ *  * Whether we're using Wayland vs. X11
+ *  * Whether we're using a lightweight theme or not.
+ *
+ * Consider the simple case (default system theme). We render the titlebar
+ * using `-moz-default-appearance: -moz-window-titlebar;`, then don't draw
+ * anything else. Success!
+ *
+ * Now consider lightweight themes: We need to render the native titlebar
+ * behind the "theme" titlebar in order to render the native shadow on X11. But
+ * we can't just use the #navigator-toolbox as that's where the lightweight
+ * theme background goes, so we need to use the #navigator-toolbox-background.
+ * We still have to apply the corner radii to #navigator-toolbox of course, so
+ * the lightweight theme background doesn't overflow the titlebar radius.
+ *
+ * In a Wayland-only world, the setup could be much simpler: We could apply the
+ * titlebar appearance to #navigator-toolbox, and just apply the border radius
+ * on the <body> or #navigator-toolbox-background to clip the extra shadow when
+ * using the system theme. For the lightweight theme, we could use
+ * appearance: none and the titlebar radius on the toolbox. In X11 however, we
+ * do need the native titlebar behind at all times.
+ */
+@media (-moz-gtk-csd-available) {
+  :root[tabsintitlebar][sizemode="normal"] {
+    background-color: transparent;
+  }
+
+  :root[tabsintitlebar] #titlebar {
+    color: CaptionText;
+  }
+
+  :root[tabsintitlebar] #titlebar:-moz-window-inactive {
+    color: InactiveCaptionText;
+  }
+
+  :root[tabsintitlebar] #titlebar:-moz-lwtheme {
+    color: inherit;
+  }
+
+  :root[tabsintitlebar] #navigator-toolbox-background {
+    appearance: auto;
+    -moz-default-appearance: -moz-window-titlebar-maximized;
+  }
+
+  :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #navigator-toolbox-background {
+    -moz-default-appearance: -moz-window-titlebar;
+  }
+
+  :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #navigator-toolbox:-moz-lwtheme,
+  :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) dialog::backdrop {
+    border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
+    border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
+  }
+
+  /* When temporarily showing the menu bar, make it at least as tall as the tab
+   * bar such that the window controls don't appear to move up. */
+  :root[tabsintitlebar] #toolbar-menubar[autohide="true"] {
+    height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin));
+  }
+
+  /* Make #TabsToolbar transparent as we style underlying #titlebar with
+   * -moz-window-titlebar (Gtk+ theme). */
+  :root[tabsintitlebar] #TabsToolbar,
+  :root[tabsintitlebar] #toolbar-menubar {
+    appearance: none;
+    color: inherit;
+  }
+
+  :root[tabsintitlebar] #main-menubar {
+    color: inherit;
+  }
+
+  /* The button box must appear on top of the navigator-toolbox in order for
+   * click and hover mouse events to work properly for the button in the restored
+   * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
+   * can swallow those events. */
+  .titlebar-buttonbox {
+    z-index: 1;
+    -moz-box-align: center;
+  }
+
+  /* Render titlebar command buttons according to system config.
+   * Use full scale icons here as the Gtk+ does. */
+  .titlebar-min {
+    appearance: auto;
+    -moz-default-appearance: -moz-window-button-minimize;
+    -moz-box-ordinal-group: env(-moz-gtk-csd-minimize-button-position);
+  }
+  .titlebar-max {
+    appearance: auto;
+    -moz-default-appearance: -moz-window-button-maximize;
+    -moz-box-ordinal-group: env(-moz-gtk-csd-maximize-button-position);
+  }
+  .titlebar-restore {
+    appearance: auto;
+    -moz-default-appearance: -moz-window-button-restore;
+    -moz-box-ordinal-group: env(-moz-gtk-csd-maximize-button-position);
+  }
+  .titlebar-close {
+    appearance: auto;
+    -moz-default-appearance: -moz-window-button-close;
+    -moz-box-ordinal-group: env(-moz-gtk-csd-close-button-position);
+  }
+
+  /* When using lightweight themes, use our own buttons since native ones might
+   * assume a native background in order to be visible. */
+  .titlebar-button:-moz-lwtheme {
+    appearance: none;
+    border-radius: 100%;
+  }
+  .titlebar-button > .toolbarbutton-icon:-moz-lwtheme {
+    padding: 6px;
+    -moz-context-properties: stroke;
+    stroke: currentColor;
+  }
+  .titlebar-min:-moz-lwtheme {
+    list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
+  }
+  .titlebar-max:-moz-lwtheme {
+    list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
+  }
+  .titlebar-restore:-moz-lwtheme {
+    list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
+  }
+  .titlebar-close:-moz-lwtheme {
+    list-style-image: url(chrome://browser/skin/window-controls/close.svg);
+  }
+  .titlebar-button:-moz-lwtheme:hover {
+    background-color: color-mix(in srgb, currentColor 12%, transparent);
+  }
+  .titlebar-button:-moz-lwtheme:hover:active {
+    background-color: color-mix(in srgb, currentColor 20%, transparent);
+  }
+  .titlebar-close:-moz-lwtheme:hover {
+    background-color: #d70022;
+    color: white;
+  }
+  .titlebar-close:-moz-lwtheme:hover:active {
+    background-color: #ff0039;
+  }
+
+  @media not (-moz-gtk-csd-minimize-button) {
+    .titlebar-min {
+      display: none;
+    }
+  }
+  @media not (-moz-gtk-csd-maximize-button) {
+    .titlebar-restore,
+    .titlebar-max {
+      display: none;
+    }
+  }
+  @media not (-moz-gtk-csd-close-button) {
+    .titlebar-close {
+      display: none;
+    }
+  }
+
+  @media (-moz-gtk-csd-reversed-placement) {
+    .titlebar-buttonbox-container {
+      -moz-box-ordinal-group: 0;
+    }
+  }
+}
+
+#historySwipeAnimationPreviousArrow {
+  background: url("chrome://browser/skin/history-swipe-arrow.svg")
+              center left / 192px 192px no-repeat transparent;
+  will-change: transform;
+  -moz-context-properties: fill;
+}
+#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+#historySwipeAnimationNextArrow {
+  background: url("chrome://browser/skin/history-swipe-arrow.svg")
+              center left / 192px 192px no-repeat transparent;
+  will-change: transform;
+  -moz-context-properties: fill;
+}
+#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
diff --git a/browser/themes/linux/customizableui/panelUI.css b/browser/themes/linux/customizableui/panelUI.css
new file mode 100644
index 0000000000..63969676ec
--- /dev/null
+++ b/browser/themes/linux/customizableui/panelUI.css
@@ -0,0 +1,14 @@
+/* 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/. */
+
+@import "chrome://browser/skin/customizableui/panelUI-shared.css";
+
+menupopup::part(drop-indicator) {
+  /* To account for the shadow margin + border of the panel */
+  margin-inline-start: 5px;
+}
+
+.subviewradio > .radio-label-box {
+  appearance: none;
+}
diff --git a/browser/themes/linux/downloads/allDownloadsView.css b/browser/themes/linux/downloads/allDownloadsView.css
new file mode 100644
index 0000000000..cae3f34a22
--- /dev/null
+++ b/browser/themes/linux/downloads/allDownloadsView.css
@@ -0,0 +1,5 @@
+/* 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/. */
+
+@import "chrome://browser/skin/downloads/allDownloadsView.inc.css";
diff --git a/browser/themes/linux/downloads/downloads.css b/browser/themes/linux/downloads/downloads.css
new file mode 100644
index 0000000000..5c00c1a7fa
--- /dev/null
+++ b/browser/themes/linux/downloads/downloads.css
@@ -0,0 +1,14 @@
+/* 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/. */
+
+@import "chrome://browser/skin/downloads/downloads.inc.css";
+
+/*** List items and similar elements in the summary ***/
+
+:root {
+  --downloads-item-height: 5.5em;
+  --downloads-item-font-size-factor: 0.9;
+  --downloads-item-details-opacity: 0.6;
+  --downloads-item-disabled-opacity: 0.6;
+}
diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn
new file mode 100644
index 0000000000..b81188c22b
--- /dev/null
+++ b/browser/themes/linux/jar.mn
@@ -0,0 +1,27 @@
+# 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/.
+
+browser.jar:
+% skin browser classic/1.0 %skin/classic/browser/
+#include ../shared/jar.inc.mn
+  skin/classic/browser/sanitizeDialog.css
+  skin/classic/browser/browser.css
+  skin/classic/browser/contextmenu.css                (../shared/contextmenu.css)
+  skin/classic/browser/monitor-base.png
+  skin/classic/browser/monitor-border.png
+  skin/classic/browser/pageInfo.css
+  skin/classic/browser/pageInfo.png
+  skin/classic/browser/webRTC-legacy-indicator.css    (../shared/webRTC-legacy-indicator.css)
+  skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css)
+  skin/classic/browser/downloads/allDownloadsView.css (downloads/allDownloadsView.css)
+  skin/classic/browser/downloads/downloads.css        (downloads/downloads.css)
+  skin/classic/browser/places/organizer.css           (places/organizer.css)
+  skin/classic/browser/preferences/alwaysAsk.png      (preferences/alwaysAsk.png)
+  skin/classic/browser/preferences/applications.css   (preferences/applications.css)
+  skin/classic/browser/window-controls/close.svg      (../windows/window-controls/close.svg)
+  skin/classic/browser/window-controls/maximize.svg   (../windows/window-controls/maximize.svg)
+  skin/classic/browser/window-controls/minimize.svg   (../windows/window-controls/minimize.svg)
+  skin/classic/browser/window-controls/restore.svg    (../windows/window-controls/restore.svg)
+  skin/classic/browser/e10s-64@2x.png                 (../shared/e10s-64@2x.png)
+  skin/classic/browser/history-swipe-arrow.svg        (../shared/swipe-gesture-icons/history-swipe-arrow.svg)
diff --git a/browser/themes/linux/monitor-base.png b/browser/themes/linux/monitor-base.png
new file mode 100644
index 0000000000..45a2410217
--- /dev/null
+++ b/browser/themes/linux/monitor-base.png
diff --git a/browser/themes/linux/monitor-border.png b/browser/themes/linux/monitor-border.png
new file mode 100644
index 0000000000..f05dcb7839
--- /dev/null
+++ b/browser/themes/linux/monitor-border.png
diff --git a/browser/themes/linux/moz.build b/browser/themes/linux/moz.build
new file mode 100644
index 0000000000..20e4e3af75
--- /dev/null
+++ b/browser/themes/linux/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+JAR_MANIFESTS += ["jar.mn"]
+
+DEFINES["MENUBAR_CAN_AUTOHIDE"] = 1
diff --git a/browser/themes/linux/pageInfo.css b/browser/themes/linux/pageInfo.css
new file mode 100644
index 0000000000..c87a18c02d
--- /dev/null
+++ b/browser/themes/linux/pageInfo.css
@@ -0,0 +1,151 @@
+/* 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/. */
+
+@import url("chrome://global/skin/global.css");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* View buttons */
+#viewGroup > radio {
+  list-style-image: url("chrome://browser/skin/pageInfo.png");
+  appearance: none;
+  min-width: 4.5em;
+  margin: 0;
+  padding: 3px;
+  color: FieldText;
+}
+
+#viewGroup > radio[selected="true"] {
+  background-color: SelectedItem;
+  color: SelectedItemText;
+}
+
+#viewGroup > radio > .radio-label-box {
+  padding: 0 6px;
+}
+
+#viewGroup:focus-visible > radio[focused="true"] > .radio-label-box {
+  outline: var(--default-focusring);
+}
+
+#topBar {
+  border-bottom: 1px solid ThreeDShadow;
+  padding-inline-start: 10px;
+  background-color: Field;
+  color: FieldText;
+}
+
+#generalTab {
+  -moz-image-region: rect(0px, 32px, 32px, 0px)
+}
+
+#mediaTab {
+  -moz-image-region: rect(0px, 64px, 32px, 32px)
+}
+
+#permTab {
+  -moz-image-region: rect(0px, 128px, 32px, 96px)
+}
+
+#securityTab {
+  -moz-image-region: rect(0px, 160px, 32px, 128px)
+}
+
+/* Misc */
+tree {
+  margin: .5em;
+}
+
+html|input {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+html|input.header {
+  margin-inline-start: 0;
+}
+
+#imagecontainerbox {
+  margin: .5em;
+  background: white;
+  overflow: auto;
+  border: 1px solid ThreeDLightShadow;
+}
+
+html|input:disabled {
+  font-style: italic;
+}
+
+/* General Tab */
+#generalPanel > #titletext {
+  margin-inline-start: 5px;
+}
+
+#securityBox description {
+  margin-inline-start: 10px;
+}
+
+#general-security-identity {
+  white-space: pre-wrap;
+  line-height: 2em;
+}
+
+/* Media Tab */
+#imagetree {
+  min-height: 10em;
+  margin-block: 2px 0;
+}
+
+#mediaSplitter {
+  appearance: none;
+  height: .8em;
+}
+
+#mediaTable {
+  margin-bottom: 2em;
+}
+
+#mediaLabelColumn {
+  min-width: 10em;
+}
+
+#thepreviewimage {
+  margin: 1em;
+}
+
+treechildren::-moz-tree-cell-text(broken) {
+  font-style: italic;
+  color: graytext;
+}
+
+/* Permissions Tab */
+
+#permList {
+  appearance: auto;
+  -moz-default-appearance: listbox;
+  margin: .5em;
+  overflow: auto;
+  color: FieldText;
+}
+
+.permission {
+  padding: 6px 7px;
+  min-height: 25px;
+  border-bottom: 1px dotted ThreeDShadow;
+}
+
+.permissionLabel {
+  font-weight: bold;
+}
+
+.permission:hover {
+  background-color: -moz-dialog;
+  color: -moz-DialogText;
+}
+
+/* Security Tab */
+
+#securityPanel table {
+  margin-bottom: 1em;
+}
diff --git a/browser/themes/linux/pageInfo.png b/browser/themes/linux/pageInfo.png
new file mode 100644
index 0000000000..cdd511cf1f
--- /dev/null
+++ b/browser/themes/linux/pageInfo.png
diff --git a/browser/themes/linux/places/organizer.css b/browser/themes/linux/places/organizer.css
new file mode 100644
index 0000000000..3866e70dfa
--- /dev/null
+++ b/browser/themes/linux/places/organizer.css
@@ -0,0 +1,152 @@
+/* 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/. */
+
+/* Toolbar */
+
+#placesToolbar {
+  appearance: auto;
+  -moz-default-appearance: menubar;
+  color: -moz-menubartext;
+}
+
+@media (-moz-menubar-drag) {
+  #placesToolbar {
+    -moz-window-dragging: drag;
+  }
+}
+
+#placesToolbar > toolbarbutton {
+  color: -moz-menubartext;
+}
+
+#placesToolbar > toolbarbutton:hover {
+  color: ButtonText;
+}
+
+#placesToolbar > toolbarbutton[disabled] {
+  color: GrayText;
+}
+
+/* Back button */
+
+#back-button {
+  list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=toolbar");
+}
+#back-button[disabled] {
+  list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=toolbar&state=disabled");
+}
+
+#back-button:-moz-locale-dir(rtl) {
+  list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=toolbar");
+}
+#back-button[disabled]:-moz-locale-dir(rtl) {
+  list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=toolbar&state=disabled");
+}
+
+/* Forward button */
+
+#forward-button {
+  list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=toolbar");
+}
+#forward-button[disabled] {
+  list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=toolbar&state=disabled");
+}
+
+#forward-button:-moz-locale-dir(rtl) {
+  list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=toolbar");
+}
+#forward-button[disabled]:-moz-locale-dir(rtl) {
+  list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=toolbar&state=disabled");
+}
+
+/* Menus */
+#placesMenu > menu {
+  padding-inline-start: 4px;
+  appearance: auto;
+  -moz-default-appearance: toolbarbutton;
+}
+
+#placesMenu > menu:hover {
+  color: ButtonText;
+}
+
+#placesMenu > menu:active,
+#placesMenu > menu[open] {
+  color: -moz-buttonactivetext;
+}
+
+#placesMenu > menu::after {
+  content: "";
+  display: -moz-box;
+  width: 12px;
+  height: 12px;
+  content: url("chrome://global/skin/icons/arrow-down-12.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* Root View */
+#placesView {
+  background-color: Window;
+}
+
+/* Info box */
+#infoBox:not([hidden="true"]) {
+  display: block;
+}
+
+#editBookmarkPanelContent {
+  grid-template-columns: auto 1fr;
+}
+
+#editBookmarkPanelContent .caption-label:not([hidden="true"]) {
+  display: block;
+  grid-column: 2;
+}
+
+#editBookmarkPanelContent input {
+  margin: 4px;
+}
+
+#editBookmarkPanelContent label {
+  align-self: center;
+}
+
+#editBMPanel_itemsCountText {
+  grid-column: auto / span 2;
+  justify-self: center;
+}
+
+#editBMPanel_tagsSelectorRow {
+  grid-column: auto / span 2;
+}
+
+#detailsPane {
+  height: 16em;
+  padding: 5px;
+}
+
+/* Expanders */
+
+.expander-up,
+.expander-down {
+  min-width: 0;
+  padding: 2px 0;
+  padding-inline-start: 2px;
+}
+
+.expander-up > .button-box {
+  appearance: auto;
+  -moz-default-appearance: button-arrow-up;
+}
+
+.expander-down > .button-box {
+  appearance: auto;
+  -moz-default-appearance: button-arrow-down;
+}
+
+/* Downloads pane */
+#clearDownloadsButton > .toolbarbutton-icon {
+  display: none;
+}
diff --git a/browser/themes/linux/preferences/alwaysAsk.png b/browser/themes/linux/preferences/alwaysAsk.png
new file mode 100644
index 0000000000..c6720e19e7
--- /dev/null
+++ b/browser/themes/linux/preferences/alwaysAsk.png
diff --git a/browser/themes/linux/preferences/applications.css b/browser/themes/linux/preferences/applications.css
new file mode 100644
index 0000000000..2627b06d00
--- /dev/null
+++ b/browser/themes/linux/preferences/applications.css
@@ -0,0 +1,43 @@
+/* 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/. */
+
+richlistitem[appHandlerIcon="handleInternally"],
+menuitem[appHandlerIcon="handleInternally"] {
+  list-style-image: url("chrome://branding/content/icon32.png");
+}
+
+richlistitem[appHandlerIcon="ask"],
+menuitem[appHandlerIcon="ask"] {
+  list-style-image: url("chrome://browser/skin/preferences/alwaysAsk.png");
+}
+
+richlistitem[appHandlerIcon="save"],
+menuitem[appHandlerIcon="save"] {
+  list-style-image: url("moz-icon://stock/gtk-save?size=menu");
+}
+
+richlistitem[appHandlerIcon="plugin"],
+menuitem[appHandlerIcon="plugin"] {
+  list-style-image: url("chrome://global/skin/icons/plugin.svg");
+}
+
+#appList {
+  min-height: 212px;
+}
+
+#appList > richlistitem {
+  -moz-box-align: center;
+}
+
+#appList > richlistitem > image {
+  margin: 5px;
+  width: 32px;
+  height: 32px;
+}
+
+#appList > richlistitem > label {
+  margin: 0px;
+  padding: 5px;
+  white-space: nowrap;
+}
diff --git a/browser/themes/linux/sanitizeDialog.css b/browser/themes/linux/sanitizeDialog.css
new file mode 100644
index 0000000000..4883786a9f
--- /dev/null
+++ b/browser/themes/linux/sanitizeDialog.css
@@ -0,0 +1,16 @@
+/* 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/. */
+
+#sanitizeDurationChoice {
+  margin-inline-end: 0;
+}
+
+/* Align the duration label with the warning box and item list */
+#sanitizeDurationLabel {
+  margin-inline-start: 3px;
+}
+
+#sanitizeEverythingWarningIcon {
+  list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=dialog");
+}
diff --git a/browser/themes/linux/window-controls/close.svg b/browser/themes/linux/window-controls/close.svg
new file mode 100644
index 0000000000..9d0a252357
--- /dev/null
+++ b/browser/themes/linux/window-controls/close.svg
@@ -0,0 +1,6 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <path stroke="context-stroke" stroke-width=".9" fill="none" d="M1,1 l 10,10 M1,11 l 10,-10"/>
+</svg>
diff --git a/browser/themes/linux/window-controls/minimize.svg b/browser/themes/linux/window-controls/minimize.svg
new file mode 100644
index 0000000000..7ffa1fecbb
--- /dev/null
+++ b/browser/themes/linux/window-controls/minimize.svg
@@ -0,0 +1,6 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <line stroke="context-stroke" stroke-width=".9" fill="none" shape-rendering="crispEdges" x1="1" y1="5.5" x2="11" y2="5.5"/>
+</svg>
diff --git a/browser/themes/linux/window-controls/restore.svg b/browser/themes/linux/window-controls/restore.svg
new file mode 100644
index 0000000000..80b71b178d
--- /dev/null
+++ b/browser/themes/linux/window-controls/restore.svg
@@ -0,0 +1,7 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke" stroke-width=".9" fill="none" shape-rendering="crispEdges">
+  <rect x="1.5" y="3.5" width="7" height="7"/>
+  <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5"/>
+</svg>
diff --git a/browser/themes/moz.build b/browser/themes/moz.build
new file mode 100644
index 0000000000..6a9126de41
--- /dev/null
+++ b/browser/themes/moz.build
@@ -0,0 +1,50 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+with Files("**"):
+    BUG_COMPONENT = ("Firefox", "Theme")
+
+with Files("ThemeVariableMap.sys.mjs"):
+    BUG_COMPONENT = ("WebExtensions", "Themes")
+
+EXTRA_JS_MODULES += [
+    "BuiltInThemeConfig.sys.mjs",
+    "BuiltInThemes.sys.mjs",
+    "ThemeVariableMap.sys.mjs",
+]
+
+BROWSER_CHROME_MANIFESTS += [
+    "test/browser/browser.ini",
+]
+
+XPCSHELL_TESTS_MANIFESTS += [
+    "test/xpcshell/xpcshell.ini",
+]
+
+toolkit = CONFIG["MOZ_WIDGET_TOOLKIT"]
+
+if toolkit == "windows":
+    EXTRA_JS_MODULES += [
+        "Windows8WindowFrameColor.sys.mjs",
+    ]
+
+if toolkit == "cocoa":
+    DIRS += ["osx"]
+elif toolkit == "gtk":
+    DIRS += ["linux"]
+else:
+    DIRS += ["windows"]
+
+DIRS += ["addons", "shared/app-marketplace-icons"]
+
+with Files("osx/**"):
+    SCHEDULES.exclusive = ["macosx"]
+
+with Files("linux/**"):
+    SCHEDULES.exclusive = ["linux"]
+
+with Files("windows/**"):
+    SCHEDULES.exclusive = ["windows"]
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
new file mode 100644
index 0000000000..e16c87ff37
--- /dev/null
+++ b/browser/themes/osx/browser.css
@@ -0,0 +1,458 @@
+/* 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/. */
+
+@import url("chrome://browser/skin/browser-shared.css");
+@import url("chrome://browser/skin/browser-custom-colors.css");
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --toolbar-non-lwt-bgcolor: -moz-dialog;
+  --toolbar-non-lwt-textcolor: -moz-dialogtext;
+
+  --panel-separator-color: hsla(210,4%,10%,.14);
+
+  --arrowpanel-field-background: rgba(249,249,250,.3);
+
+  --chrome-content-separator-color: #e1e1e2;
+}
+
+:root:-moz-lwtheme {
+  --chrome-content-separator-color: rgba(0,0,0,.3);
+}
+
+:root[lwt-popup-brighttext] {
+  --panel-separator-color: rgba(249,249,250,.1);
+  --arrowpanel-field-background: rgba(12,12,13,.3);
+}
+
+#browser {
+  /* #browser and #navigator-toolbox must have relative positions so that the
+     latter can slide over the former in fullscreen mode. */
+  position: relative;
+}
+
+#navigator-toolbox {
+  appearance: none;
+  position: relative;
+}
+
+#navigator-toolbox:not(:-moz-lwtheme) {
+  background-color: window;
+}
+
+@media not (prefers-contrast) {
+  #navigator-toolbox:not(:-moz-lwtheme) {
+    background-color: #f0f0f4;
+  }
+}
+
+/*
+  This is a workaround for Bug 1482157
+  -moz-default-appearance: toolbox; makes the macOS sheets attached to the
+  element's bottom border. We cannot put this property on the toolbox itself as
+  it cancels all backgrounds that are there, so we set it on the toolbox bottom
+  border.
+*/
+#navigator-toolbox::after {
+  content: "";
+  display: -moz-box;
+  appearance: auto;
+  -moz-default-appearance: toolbox;
+  height: 1px;
+  margin-top: -1px;
+  opacity: 0.001;
+}
+
+/** Begin titlebar **/
+
+#titlebar {
+  /* Centrally align content items vertically */
+  -moz-box-pack: center;
+}
+
+.titlebar-button {
+  display: none;
+}
+
+.titlebar-buttonbox-container {
+  -moz-box-align: center;
+}
+
+/* Hide window controls in fullscreen */
+:root[inFullscreen] .titlebar-buttonbox-container {
+  display: none;
+}
+
+.titlebar-buttonbox:-moz-locale-dir(ltr) {
+  margin-left: 12px;
+  margin-right: 0;
+}
+
+.titlebar-buttonbox:-moz-locale-dir(rtl) {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+@media (-moz-mac-rtl) {
+  .titlebar-buttonbox:-moz-locale-dir(ltr) {
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+
+  .titlebar-buttonbox:-moz-locale-dir(rtl) {
+    margin-left: 0;
+    margin-right: 12px;
+  }
+}
+
+/** End titlebar **/
+
+:root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
+  border-top: 1px solid rgba(0,0,0,0.65);
+}
+
+.browser-toolbar {
+  appearance: none;
+}
+
+.browser-toolbar:not(.titlebar-color) {
+  background: var(--toolbar-bgcolor);
+  color: var(--toolbar-color);
+}
+
+/* Draw the bottom border of the tabs toolbar when titlebar isn't using vibrancy */
+:root:not([inFullscreen], [tabsintitlebar]) #nav-bar:not([tabs-hidden="true"]),
+#nav-bar:not([tabs-hidden="true"]):-moz-lwtheme {
+  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3));
+}
+
+#nav-bar:not([tabs-hidden="true"]) {
+  /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed.
+     The animations use position:absolute and require a positioned #nav-bar. */
+  position: relative;
+}
+
+/* ----- BOOKMARK TOOLBAR ----- */
+
+#nav-bar-customization-target > #wrapper-personal-bookmarks > #personal-bookmarks {
+  min-height: 32px;
+  -moz-box-align: center;
+}
+
+/* Workaround for native menubar inheritance */
+.openintabs-menuitem {
+  list-style-image: none;
+}
+
+.bookmark-item[cutting] > .toolbarbutton-icon,
+.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
+  opacity: 0.5;
+}
+
+.bookmark-item[cutting] > .toolbarbutton-text,
+.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
+  opacity: 0.7;
+}
+
+/* ----- BOOKMARK MENUS ----- */
+
+.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#bookmarksToolbarFolderMenu,
+#BMB_bookmarksToolbar,
+#panelMenu_bookmarksToolbar {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg");
+}
+
+/* Inactive elements are faded out on OSX */
+.toolbarbutton-1:not(:hover):-moz-window-inactive,
+.bookmark-item:not(:hover):-moz-window-inactive,
+:root:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] {
+  opacity: 0.5;
+}
+
+/* Address bar */
+
+@media not (prefers-contrast) {
+  :root:not(:-moz-lwtheme) #urlbar {
+    --urlbar-box-bgcolor: white;
+  }
+  :root[lwt-default-theme-in-dark-mode] #urlbar {
+    --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color);
+  }
+}
+
+@media (prefers-contrast) {
+  /* The "increase contrast" preference on macOS draws a 1px black line around
+     panels, including the separate search bar. Since the Urlbar is not
+     implemented as a panel, it does not get this outline. This outline rule
+     resembles the system outline, bringing the Urlbar in line with panels and
+     other Mac apps. */
+  #urlbar[open] > #urlbar-background {
+    outline: 1px solid var(--focus-outline-color)
+  }
+}
+
+#urlbar,
+#searchbar {
+  font-size: 1.25em;
+}
+
+@supports -moz-bool-pref("browser.urlbar.experimental.expandTextOnFocus") {
+  #urlbar[breakout-extend] {
+    font-size: 1.36em;
+  }
+}
+
+/* Move the margin to the parent element to properly position the ::after badge */
+moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left > .menu-iconic-icon {
+  margin-inline: 0;
+}
+moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
+  margin-inline: 0 5px;
+}
+
+/* ----- AUTOCOMPLETE ----- */
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
+  border-top: 1px solid #C7C7C7;
+}
+
+/* Bookmarking panel */
+
+/* The following elements come from editBookmarkPanel.inc.xhtml. Styling that's
+   specific to the editBookmarkPanel should be in browser.css. Styling that
+   should be shared by all editBookmarkPanel.inc.xhtml consumers should be in
+   editBookmark.css. */
+
+#editBMPanel_newFolderBox {
+  background-color: var(--arrowpanel-field-background);
+  color: inherit;
+  border: 1px solid var(--panel-separator-color);
+  border-radius: 0 0 2px 2px;
+  margin: 0;
+  padding: 0;
+  height: 24px;
+}
+
+#editBMPanel_newFolderButton {
+  appearance: none;
+  -moz-box-flex: 1;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
+  border: none;
+  border-radius: 0;
+  padding: 0 9px;
+  margin: 0;
+  min-height: 24px;
+  height: 24px;
+  color: inherit;
+  list-style-image: url("chrome://global/skin/icons/plus.svg");
+}
+
+#editBMPanel_newFolderButton:hover {
+  background-color: var(--arrowpanel-dimmed);
+}
+
+#editBMPanel_newFolderButton:hover:active {
+  background-color: var(--arrowpanel-dimmed-further);
+}
+
+#editBMPanel_newFolderButton .button-text {
+  -moz-box-flex: 1; /* push the button icon to the start side */
+  text-align: start;
+}
+
+/**** folder tree and tag selector ****/
+
+#editBMPanel_folderTree,
+#editBMPanel_tagsSelector {
+  appearance: none;
+  background-color: var(--arrowpanel-field-background);
+  color: inherit;
+  border-radius: 2px;
+  border: 1px solid var(--panel-separator-color);
+  margin: 0;
+}
+
+#editBMPanel_folderTree > treechildren::-moz-tree-row(blur,selected),
+#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
+  background-color: var(--arrowpanel-dimmed);
+}
+
+#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur,selected),
+#editBMPanel_folderTree > treechildren::-moz-tree-image(blur,selected),
+#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur,selected),
+#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
+  color: inherit;
+}
+
+#editBMPanel_folderTree {
+  border-bottom: none;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
+  margin: 0 !important;
+  min-width: 27em;
+  position: relative;
+}
+
+/* ----- SIDEBAR ELEMENTS ----- */
+
+#browser {
+  --sidebar-border-color: hsla(240, 5%, 5%, .1);
+}
+
+#sidebar-box {
+  /* Default font size is 11px on mac, so this is 12px */
+  font-size: 1.0909rem;
+  --sidebar-background-color: -moz-mac-source-list;
+}
+
+/* Give the sidebar a vibrant appearance. Only do this when no lwtheme sidebar
+ * rules are in use. Vibrant appearance values only work if there is no
+ * background-color rendered behind the element. If the active theme has sidebar
+ * rules, we want to show the theme's background-color in the sidebar. */
+#sidebar-box:not([lwt-sidebar]) {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-source-list;
+  -moz-font-smoothing-background-color: -moz-mac-source-list;
+}
+
+/* ----- CONTENT ----- */
+
+.openintabs-menuitem {
+  list-style-image: none;
+}
+
+/* ::::: tabbrowser ::::: */
+
+#tabbrowser-tabbox {
+  margin: 0;
+}
+
+.tab-label {
+  margin-block: 1px 0;
+}
+
+.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"], [multiselected]) {
+  opacity: .9;
+}
+
+/*
+ * Force the overlay to create a new stacking context so it always appears on
+ * top of the icon.
+ */
+.tab-icon-overlay {
+  opacity: 0.9999;
+}
+
+.tab-label-container:not([selected="true"], [multiselected]) {
+  opacity: .7;
+}
+
+.tabbrowser-tab {
+  font: message-box;
+  border: none;
+}
+.tabbrowser-tab[multiselected]:not(:-moz-lwtheme),
+.tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
+  /* overriding tabbox.css */
+  color: hsl(240, 5%, 5%);
+}
+
+.tabbrowser-tab[multiselected],
+.tabbrowser-tab[visuallyselected=true] {
+  /* overriding tabbox.css */
+  text-shadow: inherit;
+}
+
+#tabbrowser-tabs {
+  /* overriding tabbox.css */
+  -moz-box-align: stretch;
+  margin-bottom: 0;
+  position: static;
+  z-index: auto;
+}
+
+/* Bookmark drag and drop styles */
+
+.bookmark-item[dragover-into="true"] {
+  background: SelectedItem !important;
+  color: SelectedItemText !important;
+}
+
+/* Status panel */
+
+#statuspanel-label {
+  margin: 0;
+  padding: 2px 4px;
+  background-color: #f9f9fa;
+  border: 1px none #ddd;
+  border-top-style: solid;
+  color: #444;
+  text-shadow: none;
+}
+
+@media (-moz-content-prefers-color-scheme: dark) {
+  #statuspanel-label {
+    background-color: hsl(240, 1%, 20%);
+    border-color: hsl(240, 1%, 40%);
+    color: rgb(249, 249, 250);
+  }
+}
+
+#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(ltr),
+#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(rtl) {
+  border-right-style: solid;
+  border-top-right-radius: .3em;
+  margin-right: 1em;
+}
+
+#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(rtl),
+#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(ltr) {
+  border-left-style: solid;
+  border-top-left-radius: .3em;
+  margin-left: 1em;
+}
+
+/* On mac, the popup notification contents are indented by default and so
+  the default closebutton margins from notification.css require adjustment */
+
+.click-to-play-plugins-notification-description-box > .popup-notification-closebutton {
+  margin-inline-end: -6px;
+  margin-top: -7px;
+}
+
+#UITourTooltipDescription {
+  font-size: 1.18rem;
+  line-height: 2rem;
+}
+
+#UITourTooltipClose {
+  margin-inline-end: -10px;
+  margin-top: -14px;
+}
+
+#historySwipeAnimationPreviousArrow {
+  background: url("chrome://browser/skin/history-swipe-arrow.svg")
+              center left / 64px 128px no-repeat transparent;
+  will-change: transform;
+}
+#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+#historySwipeAnimationNextArrow {
+  background: url("chrome://browser/skin/history-swipe-arrow.svg")
+              center left / 64px 128px no-repeat transparent;
+  will-change: transform;
+}
+#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
diff --git a/browser/themes/osx/customizableui/panelUI.css b/browser/themes/osx/customizableui/panelUI.css
new file mode 100644
index 0000000000..9579a3797d
--- /dev/null
+++ b/browser/themes/osx/customizableui/panelUI.css
@@ -0,0 +1,67 @@
+/* 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/. */
+
+@import "chrome://browser/skin/customizableui/panelUI-shared.css";
+
+#downloadsPanel,
+#widget-overflow,
+#appMenu-popup,
+#customizationui-widget-panel,
+#identity-popup,
+#permission-popup,
+#protections-popup,
+#appMenu-notification-popup,
+#BMB_bookmarksPopup,
+#editBookmarkPanel {
+  margin-top: -1px;
+}
+
+.panel-subview-body {
+  scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
+}
+
+#appMenu-mainView > .panel-subview-body > .panel-banner-item {
+  padding-inline-start: 18px;
+}
+
+.subviewbutton:not([image],[targetURI],.bookmark-item) > .menu-iconic-left {
+  display: none;
+}
+
+.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
+  padding-inline-start: 6px;
+}
+
+.PanelUI-remotetabs-notabsforclient-label {
+  margin-inline-start: 19px;
+  font-size: 13px;
+}
+
+#PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label {
+  margin-inline-start: 23px;
+}
+
+#PanelUI-remotetabs-tabslist {
+  padding-bottom: 4px;
+}
+
+.panel-button {
+  appearance: none;
+  border-radius: 2px;
+  background-color: var(--arrowpanel-dimmed);
+  color: inherit;
+  padding: 2px 6px;
+}
+
+.panel-button:not([disabled]):hover {
+  background-color: var(--panel-item-hover-bgcolor);
+}
+
+.panel-button:not([disabled]):hover:active {
+  background-color: var(--panel-item-active-bgcolor);
+}
+
+.panel-button:focus-visible {
+  outline: var(--focus-outline);
+}
diff --git a/browser/themes/osx/downloads/allDownloadsView.css b/browser/themes/osx/downloads/allDownloadsView.css
new file mode 100644
index 0000000000..3740280d80
--- /dev/null
+++ b/browser/themes/osx/downloads/allDownloadsView.css
@@ -0,0 +1,15 @@
+/* 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/. */
+
+@import "chrome://browser/skin/downloads/allDownloadsView.inc.css";
+
+/*** List items ***/
+
+.downloadProgress::-moz-progress-bar {
+  background-color: #3c9af8;
+}
+
+.downloadProgress[paused]::-moz-progress-bar {
+  background-color: #a6a6a6;
+}
diff --git a/browser/themes/osx/downloads/downloads.css b/browser/themes/osx/downloads/downloads.css
new file mode 100644
index 0000000000..62112bd7d7
--- /dev/null
+++ b/browser/themes/osx/downloads/downloads.css
@@ -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/. */
+
+@import "chrome://browser/skin/downloads/downloads.inc.css";
+
+:root {
+  --downloads-item-height: 6em;
+  --downloads-item-font-size-factor: 0.80;
+  --downloads-item-details-opacity: 0.7;
+  --downloads-item-disabled-opacity: 0.7;
+}
diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn
new file mode 100644
index 0000000000..dc3089dfa0
--- /dev/null
+++ b/browser/themes/osx/jar.mn
@@ -0,0 +1,25 @@
+# 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/.
+
+browser.jar:
+% skin browser classic/1.0 %skin/classic/browser/
+#include ../shared/jar.inc.mn
+  skin/classic/browser/sanitizeDialog.css
+  skin/classic/browser/browser.css
+  skin/classic/browser/browser-custom-colors.css     (../shared/browser-custom-colors.css)
+  skin/classic/browser/pageInfo.css
+  skin/classic/browser/customizableui/panelUI.css    (customizableui/panelUI.css)
+  skin/classic/browser/downloads/allDownloadsView.css (downloads/allDownloadsView.css)
+  skin/classic/browser/downloads/downloads.css              (downloads/downloads.css)
+  skin/classic/browser/monitor-base.png
+  skin/classic/browser/monitor-border.png
+  skin/classic/browser/places/organizer.css                 (places/organizer.css)
+  skin/classic/browser/preferences/alwaysAsk.png            (preferences/alwaysAsk.png)
+  skin/classic/browser/preferences/application.png          (preferences/application.png)
+  skin/classic/browser/preferences/saveFile.png             (preferences/saveFile.png)
+  skin/classic/browser/preferences/applications.css         (preferences/applications.css)
+  skin/classic/browser/share.svg                            (share.svg)
+  skin/classic/browser/e10s-64@2x.png                       (../shared/e10s-64@2x.png)
+  skin/classic/browser/webRTC-menubar-indicator.css         (../shared/webRTC-menubar-indicator.css)
+  skin/classic/browser/history-swipe-arrow.svg              (swipe-gesture-icons/history-swipe-arrow.svg)
diff --git a/browser/themes/osx/monitor-base.png b/browser/themes/osx/monitor-base.png
new file mode 100644
index 0000000000..7b61c6b45b
--- /dev/null
+++ b/browser/themes/osx/monitor-base.png
diff --git a/browser/themes/osx/monitor-border.png b/browser/themes/osx/monitor-border.png
new file mode 100644
index 0000000000..54337d8bb0
--- /dev/null
+++ b/browser/themes/osx/monitor-border.png
diff --git a/browser/themes/osx/moz.build b/browser/themes/osx/moz.build
new file mode 100644
index 0000000000..d988c0ff9b
--- /dev/null
+++ b/browser/themes/osx/moz.build
@@ -0,0 +1,7 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+JAR_MANIFESTS += ["jar.mn"]
diff --git a/browser/themes/osx/pageInfo.css b/browser/themes/osx/pageInfo.css
new file mode 100644
index 0000000000..3a8c8fc9be
--- /dev/null
+++ b/browser/themes/osx/pageInfo.css
@@ -0,0 +1,137 @@
+/* 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/. */
+
+@import "chrome://global/skin/global.css";
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+#topBar {
+  appearance: auto;
+  -moz-default-appearance: toolbar;
+  -moz-window-dragging: drag;
+  -moz-box-align: center;
+  -moz-box-pack: center;
+}
+
+#viewGroup {
+  margin: 4px 0 9px;
+}
+
+#viewGroup > radio,
+#viewGroup > toolbarbutton {
+  -moz-box-orient: vertical;
+  -moz-box-align: center;
+  appearance: auto;
+  -moz-default-appearance: toolbarbutton;
+  font: menu;
+  margin: 0;
+  padding: 0 6px;
+  height: 22px;
+}
+
+@media (-moz-mac-big-sur-theme: 0) {
+  #viewGroup > radio[selected=true],
+  #viewGroup > toolbarbutton[checked=true] {
+    color: #FFF !important;
+    text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
+  }
+}
+
+/* Misc */
+tree {
+  margin: .5em;
+}
+
+html|input {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+html|input.header {
+  margin-inline-start: 0;
+}
+
+#imagecontainerbox {
+  margin: .5em;
+  background: white;
+  overflow: auto;
+  border: 1px solid ThreeDLightShadow;
+}
+
+html|input:disabled {
+  font-style: italic;
+}
+
+.help-button {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-help-button;
+}
+
+/* General Tab */
+
+#securityBox description {
+  margin-inline-start: 10px;
+}
+
+#general-security-identity {
+  white-space: pre-wrap;
+  line-height: 2em;
+}
+
+/* Media Tab */
+#imagetree {
+  min-height: 10em;
+  margin-bottom: 0;
+}
+
+#mediaSplitter {
+  background: none;
+}
+
+#mediaTable {
+  margin-bottom: 2em;
+}
+
+#mediaLabelColumn {
+  min-width: 10em;
+}
+
+#thepreviewimage {
+  margin: 1em;
+}
+
+treechildren::-moz-tree-cell-text(broken) {
+  font-style: italic;
+  color: graytext;
+}
+
+/* Permissions Tab */
+#permList {
+  margin: .5em;
+  overflow: auto;
+  appearance: auto;
+  -moz-default-appearance: listbox;
+  color: FieldText;
+}
+
+.permission {
+  padding: 6px 7px;
+  min-height: 25px;
+  border-bottom: 1px dotted ThreeDShadow;
+}
+
+.permissionLabel {
+  font-weight: bold;
+}
+
+.permission:hover {
+  background-color: -moz-dialog;
+  color: -moz-DialogText;
+}
+
+/* Security Tab */
+
+#securityPanel table {
+  margin-bottom: 1em;
+}
diff --git a/browser/themes/osx/places/organizer.css b/browser/themes/osx/places/organizer.css
new file mode 100644
index 0000000000..fe9c8df833
--- /dev/null
+++ b/browser/themes/osx/places/organizer.css
@@ -0,0 +1,230 @@
+/* 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/. */
+
+/* Places Organizer Sidebars */
+
+#placesList {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-source-list;
+  width: 160px;
+}
+
+#placesList > treechildren::-moz-tree-cell-text {
+  margin-inline-end: 6px;
+}
+
+#placesList > treechildren::-moz-tree-row(selected) {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-source-list-selection;
+  -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
+}
+
+#placesList > treechildren::-moz-tree-row(selected,focus) {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-active-source-list-selection;
+  -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
+}
+
+#placesList > treechildren::-moz-tree-cell(separator) {
+  cursor: default;
+}
+
+#placesList > treechildren::-moz-tree-separator {
+  border-top: 1px solid color-mix(in srgb, FieldText 70%, transparent);
+  margin: 0 10px;
+}
+
+#placesToolbar {
+  padding: 0 4px 3px;
+}
+
+#placesView {
+  border-top: none !important;
+}
+
+#placesView > splitter {
+  border-inline-start: none !important;
+  border-inline-end: 1px solid color-mix(in srgb, FieldText 30%, transparent);
+  min-width: 1px;
+  width: 3px;
+  margin-inline-start: -3px;
+  position: relative;
+  background-image: none !important;
+}
+
+#placesToolbar > toolbarbutton {
+  margin: 4px 4px 5px;
+  padding: 0;
+  height: 22px;
+  appearance: auto;
+  -moz-default-appearance: toolbarbutton;
+}
+
+#placesToolbar > toolbarbutton > .toolbarbutton-icon {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
+  margin: 1px 4px;
+}
+
+#placesToolbar > toolbarbutton:not(#clearDownloadsButton) > .toolbarbutton-text {
+  display: none;
+}
+
+#placesToolbar > toolbarbutton[type="menu"] > .toolbarbutton-menu-dropmarker {
+  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  padding: 0;
+  margin-inline-end: 2px;
+}
+
+#placesToolbar > toolbarbutton[disabled] > .toolbarbutton-icon,
+#placesToolbar > toolbarbutton:not(:hover):-moz-window-inactive > .toolbarbutton-icon,
+#placesToolbar > toolbarbutton[type="menu"][disabled] > .toolbarbutton-menu-dropmarker,
+#placesToolbar > toolbarbutton:not(:hover):-moz-window-inactive[type="menu"] > .toolbarbutton-menu-dropmarker {
+  opacity: .5;
+}
+
+#placesToolbar > toolbarbutton:-moz-window-inactive[disabled] > .toolbarbutton-icon,
+#placesToolbar > toolbarbutton:-moz-window-inactive[type="menu"][disabled] > .toolbarbutton-menu-dropmarker {
+  opacity: .25;
+}
+
+#placesToolbar > toolbarbutton > menupopup {
+  margin-top: 1px;
+}
+
+/* back and forward button */
+#back-button,
+#forward-button:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
+}
+
+#forward-button,
+#back-button:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
+}
+
+#back-button {
+  margin-inline-end: 0 !important; /* override margin from #placesToolbar > toolbarbutton */
+}
+
+#forward-button {
+  margin-inline-start: 0 !important; /* override margin from #placesToolbar > toolbarbutton */
+}
+
+#back-button > .toolbarbutton-icon {
+  margin-inline: 3px 2px !important;
+}
+
+#forward-button > .toolbarbutton-icon {
+  margin-inline: 2px 3px !important;
+}
+
+/* organize button */
+#organizeButton {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+/* view button */
+#viewMenu {
+  list-style-image: url("chrome://browser/skin/sort.svg");
+}
+
+/* maintenance button */
+#maintenanceButton {
+  list-style-image: url("chrome://browser/skin/import-export.svg");
+}
+
+/* Root View */
+#placesView {
+  border-top: 1px solid ThreeDDarkShadow;
+  -moz-user-focus: ignore;
+}
+
+/* Info box */
+#infoBox:not([hidden="true"]) {
+  display: block;
+}
+
+#editBookmarkPanelContent {
+  grid-template-columns: auto 1fr;
+}
+
+#editBookmarkPanelContent .caption-label:not([hidden="true"]) {
+  display: block;
+  grid-column: 2;
+}
+
+#editBookmarkPanelContent label {
+  align-self: center;
+}
+
+#editBMPanel_itemsCountText {
+  grid-column: auto / span 2;
+  justify-self: center;
+}
+
+#editBMPanel_tagsSelectorRow {
+  grid-column: auto / span 2;
+}
+
+#detailsPane {
+  border-top: 1px solid color-mix(in srgb, FieldText 50%, transparent);
+  height: 16em;
+  padding: 10px;
+}
+
+#placeContent {
+  appearance: none;
+  border: none;
+}
+
+#placeContent > treechildren::-moz-tree-cell,
+#placeContent > treechildren::-moz-tree-column {
+  border-inline-end: 1px solid color-mix(in srgb, FieldText 30%, transparent);
+}
+
+#placeContent > treechildren::-moz-tree-cell(separator) {
+  border-color: transparent;
+}
+
+/**
+ * info pane
+ */
+
+#itemsCountText,
+#selectItemDescription {
+  color: GrayText;
+}
+
+/**
+ * Downloads pane
+ */
+
+#clearDownloadsButton {
+  list-style-image: none !important;
+}
+
+#clearDownloadsButton > .toolbarbutton-icon {
+  display: none;
+}
+
+/**** expanders ****/
+
+.expander-up,
+.expander-down {
+  margin-block: 0 1px;
+  margin-inline: 8px 4px;
+  padding: 0;
+}
+
+.expander-up {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-disclosure-button-open;
+}
+
+.expander-down {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-disclosure-button-closed;
+}
diff --git a/browser/themes/osx/preferences/alwaysAsk.png b/browser/themes/osx/preferences/alwaysAsk.png
new file mode 100644
index 0000000000..444880422a
--- /dev/null
+++ b/browser/themes/osx/preferences/alwaysAsk.png
diff --git a/browser/themes/osx/preferences/application.png b/browser/themes/osx/preferences/application.png
new file mode 100644
index 0000000000..f8d610f6c2
--- /dev/null
+++ b/browser/themes/osx/preferences/application.png
diff --git a/browser/themes/osx/preferences/applications.css b/browser/themes/osx/preferences/applications.css
new file mode 100644
index 0000000000..7eb762cefd
--- /dev/null
+++ b/browser/themes/osx/preferences/applications.css
@@ -0,0 +1,61 @@
+/* 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/. */
+
+.actionsMenu > menupopup > menuitem > .menu-iconic-left {
+  /* Undo content/browser/preferences/handlers.css - we don't
+   * want icon-less labels to line up with the other labels.
+   */
+  min-width: 0;
+}
+
+richlistitem[appHandlerIcon="handleInternally"],
+menuitem[appHandlerIcon="handleInternally"] {
+  list-style-image: url("chrome://branding/content/icon32.png");
+}
+
+richlistitem[appHandlerIcon="ask"],
+menuitem[appHandlerIcon="ask"] {
+  list-style-image: url("chrome://browser/skin/preferences/alwaysAsk.png");
+}
+
+richlistitem[appHandlerIcon="save"],
+menuitem[appHandlerIcon="save"] {
+  list-style-image: url("chrome://browser/skin/preferences/saveFile.png");
+}
+
+richlistitem[appHandlerIcon="plugin"],
+menuitem[appHandlerIcon="plugin"] {
+  list-style-image: url("chrome://global/skin/icons/plugin.svg");
+}
+
+/* Repeat what menu.css does for .menuitem-iconic */
+menuitem[appHandlerIcon] {
+  padding-top: 1px;
+  padding-bottom: 3px;
+}
+
+menuitem[appHandlerIcon] > .menu-iconic-left > .menu-iconic-icon {
+  margin-inline-start: 0;
+  width: 16px;
+}
+
+#appList {
+  min-height: 212px;
+}
+
+#appList > richlistitem {
+  -moz-box-align: center;
+}
+
+#appList > richlistitem > image {
+  margin: 5px;
+  width: 32px;
+  height: 32px;
+}
+
+#appList > richlistitem > label {
+  margin: 0px;
+  padding: 5px;
+  white-space: nowrap;
+}
diff --git a/browser/themes/osx/preferences/saveFile.png b/browser/themes/osx/preferences/saveFile.png
new file mode 100644
index 0000000000..3cd1d94066
--- /dev/null
+++ b/browser/themes/osx/preferences/saveFile.png
diff --git a/browser/themes/osx/sanitizeDialog.css b/browser/themes/osx/sanitizeDialog.css
new file mode 100644
index 0000000000..6969c9f4be
--- /dev/null
+++ b/browser/themes/osx/sanitizeDialog.css
@@ -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/. */
+
+/* Align the duration label with the warning box and item list */
+#sanitizeDurationLabel {
+  margin-inline-start: 1px;
+}
+
+#sanitizeEverythingWarningIcon {
+  list-style-image: url("chrome://global/skin/icons/warning-large.png");
+}
diff --git a/browser/themes/osx/share.svg b/browser/themes/osx/share.svg
new file mode 100644
index 0000000000..9793379648
--- /dev/null
+++ b/browser/themes/osx/share.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.25 10.375a.625.625 0 0 1-1.25 0l0-8.323-3.308 3.309a.626.626 0 0 1-.885-.885L7.285 0l.681 0 4.477 4.476a.626.626 0 0 1-.885.885L8.25 2.052l0 8.323z"/>
+  <path d="M12.25 15a2 2 0 0 0 2-2l0-1.375a.625.625 0 0 0-1.25 0l0 1.525-.6.6-9.55 0-.6-.6 0-1.525a.625.625 0 0 0-1.25 0L1 13a2 2 0 0 0 2 2l9.25 0z"/>
+</svg>
diff --git a/browser/themes/osx/swipe-gesture-icons/history-swipe-arrow.svg b/browser/themes/osx/swipe-gesture-icons/history-swipe-arrow.svg
new file mode 100644
index 0000000000..9c0c0a5672
--- /dev/null
+++ b/browser/themes/osx/swipe-gesture-icons/history-swipe-arrow.svg
@@ -0,0 +1,7 @@
+<!-- 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="256" height="512" xmlns="http://www.w3.org/2000/svg">
+  <ellipse ry="256" rx="256" cy="256" cx="0" stroke-width="0" stroke="#000" fill="#38383d"/>
+  <path d="m181.335236,247.749695l-96.549957,0l35.774963,-35.774994a8.33333,8.33333 0 0 0 -11.783325,-11.783325l-49.999969,49.999954a8.33333,8.33333 0 0 0 0,11.782944l49.999969,50a8.33333,8.33333 0 0 0 11.783325,-11.783325l-35.774963,-35.774994l96.549957,0a8.33333,8.33333 0 0 0 0,-16.66626z" fill="rgba(249, 249, 250, .8)"/>
+</svg>
\ No newline at end of file
diff --git a/browser/themes/shared/UITour.css b/browser/themes/shared/UITour.css
new file mode 100644
index 0000000000..3380e7d4a0
--- /dev/null
+++ b/browser/themes/shared/UITour.css
@@ -0,0 +1,154 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* UI Tour */
+
+#UITourHighlightContainer {
+  appearance: none;
+
+  /* Resets the native styles in windows and macOS */
+  border: none;
+  background-color: transparent;
+  -moz-window-shadow: none;
+
+  --panel-border-color: transparent;
+  --panel-background: transparent;
+  /* This is a buffer to compensate for the movement in the "wobble" effect,
+     and for the box-shadow of #UITourHighlight. */
+  --panel-padding: 4px;
+  /* Compensate the displacement caused by padding. */
+  margin: -4px;
+}
+
+#UITourHighlight {
+  background-color: rgba(0, 200, 215, 0.3);
+  min-height: 24px;
+  min-width: 24px;
+}
+
+#UITourHighlight.rounded-highlight {
+  border-radius: 4px;
+}
+
+#UITourTooltipBody {
+  -moz-box-align: start;
+}
+
+#UITourTooltipTitleContainer {
+  -moz-box-align: start;
+  margin-bottom: 10px;
+}
+
+#UITourTooltipIcon {
+  width: 48px;
+  height: 48px;
+  margin-inline-end: 10px;
+}
+
+#UITourTooltipTitle,
+#UITourTooltipDescription {
+  max-width: 20rem;
+}
+
+#UITourTooltipTitle {
+  font-size: 1.45rem;
+  font-weight: bold;
+  margin: 0;
+}
+
+#UITourTooltipDescription {
+  margin-inline: 0;
+  font-size: 1.15rem;
+  line-height: 1.8rem;
+  margin-bottom: 0; /* Override global.css */
+}
+
+#UITourTooltipClose {
+  position: relative;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  min-width: 0;
+  margin-inline-start: 4px;
+  margin-top: -2px;
+}
+
+#UITourTooltipClose > .toolbarbutton-text {
+  display: none;
+}
+
+#UITourTooltipButtons {
+  -moz-box-pack: end;
+  background-color: var(--arrowpanel-dimmed);
+  border-top: 1px solid var(--panel-separator-color);
+  margin: 10px -16px -16px;
+  padding: 16px;
+}
+
+#UITourTooltipButtons > label,
+#UITourTooltipButtons > button {
+  margin: 0 15px;
+}
+
+#UITourTooltipButtons > label:first-child,
+#UITourTooltipButtons > button:first-child {
+  margin-inline-start: 0;
+}
+
+#UITourTooltipButtons > label:last-child,
+#UITourTooltipButtons > button:last-child {
+  margin-inline-end: 0;
+}
+
+#UITourTooltipButtons > button[image] > .button-box > .button-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 5px;
+}
+
+#UITourTooltipButtons > label,
+#UITourTooltipButtons > button .button-text {
+  font-size: 1.15rem;
+}
+
+#UITourTooltipButtons > button:not(.button-link) {
+  appearance: none;
+  background-color: rgb(251,251,251);
+  border-radius: 3px;
+  border: 1px solid;
+  border-color: rgb(192,192,192);
+  color: rgb(71,71,71);
+  padding: 4px 30px;
+  transition-property: background-color, border-color;
+  transition-duration: 150ms;
+}
+
+#UITourTooltipButtons > button:not(.button-link, :active):hover {
+  background-color: hsla(210,4%,10%,.15);
+  border-color: hsla(210,4%,10%,.15);
+  box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
+}
+
+#UITourTooltipButtons > label,
+#UITourTooltipButtons > button.button-link:not(:hover) {
+  appearance: none;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  color: var(--panel-disabled-color);
+  padding-inline: 10px;
+}
+
+/* The primary button gets the same color as the customize button. */
+#UITourTooltipButtons > button.button-primary {
+  background-color: rgb(116,191,67);
+  color: white;
+  padding-inline: 30px;
+}
+
+#UITourTooltipButtons > button.button-primary:not(:active):hover {
+  background-color: rgb(105,173,61);
+}
diff --git a/browser/themes/shared/aboutFrameCrashed.css b/browser/themes/shared/aboutFrameCrashed.css
new file mode 100644
index 0000000000..f15a4cf10e
--- /dev/null
+++ b/browser/themes/shared/aboutFrameCrashed.css
@@ -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/. */
+
+body {
+  background-image: url("chrome://browser/skin/tab-crashed.svg");
+  background-position: center, center;
+  background-repeat: no-repeat;
+  height: 100%;
+  width: 100%;
+  background-size: 1.6em;
+}
diff --git a/browser/themes/shared/aboutRestartRequired.css b/browser/themes/shared/aboutRestartRequired.css
new file mode 100644
index 0000000000..1b7c0e595a
--- /dev/null
+++ b/browser/themes/shared/aboutRestartRequired.css
@@ -0,0 +1,19 @@
+/* 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/. */
+
+@import url("chrome://global/skin/error-pages.css");
+
+#header {
+  background: none;
+  padding-inline-start: 0;
+  margin-inline-start: 0;
+}
+
+#text-container {
+  margin: auto;
+}
+
+#restart {
+  margin-top: 1.2em;
+}
diff --git a/browser/themes/shared/aboutSessionRestore.css b/browser/themes/shared/aboutSessionRestore.css
new file mode 100644
index 0000000000..4bc69b0122
--- /dev/null
+++ b/browser/themes/shared/aboutSessionRestore.css
@@ -0,0 +1,55 @@
+/* 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/. */
+
+@import url("chrome://browser/skin/tab-list-tree.css");
+
+#tabsToggle {
+  cursor: pointer;
+  /* Override button background-color and color from common.css */
+  background-color: transparent;
+  color: var(--in-content-link-color);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  border: none;
+  padding: 0;
+  margin: 0;
+  padding-inline-end: 45px;
+  position: relative;
+}
+
+#tabsToggle::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  inset-inline-start: 0;
+  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+  background-repeat: no-repeat;
+  background-size: 20px;
+  background-position: right center;
+}
+
+#tabsToggle:dir(rtl)::after {
+  background-position-x: left;
+}
+
+#tabsToggle:not(.tabs-hidden)::after {
+  background-image: url("chrome://global/skin/icons/arrow-up.svg");
+}
+
+#tabsToggle.tabs-hidden > #hideTabs,
+#tabsToggle:not(.tabs-hidden) > #showTabs {
+  display: none;
+}
+
+#tabList {
+  flex: 1;
+  min-height: 12em;
+  margin-top: 1.2em;
+}
+
+.button-container {
+  text-align: end;
+}
diff --git a/browser/themes/shared/aboutTabCrashed.css b/browser/themes/shared/aboutTabCrashed.css
new file mode 100644
index 0000000000..264e064f6d
--- /dev/null
+++ b/browser/themes/shared/aboutTabCrashed.css
@@ -0,0 +1,40 @@
+/* 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/. */
+
+#reportSent {
+  font-weight: bold;
+}
+
+#reportBox {
+  background-color: var(--in-content-box-info-background);
+  margin: 24px 0;
+  padding: 14px;
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 2px;
+}
+
+#reportBox > h2:first-child {
+  margin-top: 0;
+}
+
+input[type="text"],
+textarea {
+  width: 100%;
+  box-sizing: border-box;
+  resize: none;
+}
+
+input[type="text"] {
+  margin-inline-start: 0;
+}
+
+#options {
+  list-style: none;
+  margin-inline-start: 0;
+}
+
+#options > li,
+#email {
+  margin-top: 11px;
+}
diff --git a/browser/themes/shared/aboutWelcomeBack.css b/browser/themes/shared/aboutWelcomeBack.css
new file mode 100644
index 0000000000..d9ac643c2a
--- /dev/null
+++ b/browser/themes/shared/aboutWelcomeBack.css
@@ -0,0 +1,15 @@
+/* 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/. */
+
+@import url("chrome://browser/skin/tab-list-tree.css");
+
+.radioRestoreContainer:not(:last-child) {
+  margin-bottom: 0.3em;
+}
+
+#tabList {
+  flex: 1;
+  min-height: 12em;
+  margin-top: 1.2em;
+}
diff --git a/browser/themes/shared/addon-notification.css b/browser/themes/shared/addon-notification.css
new file mode 100644
index 0000000000..0436c3985a
--- /dev/null
+++ b/browser/themes/shared/addon-notification.css
@@ -0,0 +1,54 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+.popup-notification-body[popupid="addon-progress"],
+.popup-notification-body[popupid="addon-install-confirmation"] {
+  width: 28em;
+  max-width: 28em;
+}
+
+.addon-install-confirmation-name {
+  font-weight: bold;
+}
+
+html|*.addon-webext-perm-list {
+  margin-block-end: 0;
+  padding-inline-start: 10px;
+}
+
+.addon-webext-perm-single-entry {
+  margin-top: 11px;
+}
+
+.addon-webext-perm-text,
+.addon-webext-perm-single-entry {
+  margin-inline-start: 0;
+}
+
+.popup-notification-description[popupid="addon-webext-permissions"],
+.popup-notification-description[popupid="addon-webext-permissions-notification"] {
+  margin-inline-start: -1px;
+}
+
+.addon-webext-perm-notification-content,
+.addon-installed-notification-content {
+  margin-top: 0;
+}
+
+.addon-installed-notification-content > checkbox {
+  margin: 8px 4px 2px;
+}
+
+.addon-webext-name {
+  display: inline;
+  font-weight: bold;
+  margin: 0;
+}
+
+.addon-warning-icon {
+  -moz-context-properties: fill;
+  fill: #FFBF00;
+}
diff --git a/browser/themes/shared/addons/addon-install-blocked.svg b/browser/themes/shared/addons/addon-install-blocked.svg
new file mode 100644
index 0000000000..b2f739a868
--- /dev/null
+++ b/browser/themes/shared/addons/addon-install-blocked.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .style-puzzle-piece {
+        fill: url('#gradient-linear-puzzle-piece');
+      }
+      .style-badge-shadow {
+        fill: #0d131a;
+        fill-opacity: .15;
+      }
+      .style-badge-background {
+        fill: #fff;
+      }
+      .style-badge-inside {
+        fill: #e62117;
+      }
+      .style-badge-icon {
+        fill: #fff;
+      }
+    </style>
+    <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#999999" stop-opacity="1"/>
+      <stop offset="100%" stop-color="#8c8c8c" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+  <svg width="32" height="32" x="32" y="0">
+    <ellipse class="style-badge-shadow"     rx="14" ry="15" cx="16" cy="17" />
+    <circle  class="style-badge-background" r="15"  cy="15" cx="16" />
+    <circle  class="style-badge-inside"     r="12"  cy="15" cx="16" />
+    <rect    class="style-badge-icon"       x="9" y="13" width="14" height="4" rx="1" ry="1" />
+  </svg>
+</svg>
diff --git a/browser/themes/shared/addons/addon-install-downloading.svg b/browser/themes/shared/addons/addon-install-downloading.svg
new file mode 100644
index 0000000000..2b8ba7cb86
--- /dev/null
+++ b/browser/themes/shared/addons/addon-install-downloading.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .style-puzzle-piece {
+        fill: url('#gradient-linear-puzzle-piece');
+      }
+      .style-badge-shadow {
+        fill: #0d131a;
+        fill-opacity: .15;
+      }
+      .style-badge-background {
+        fill: #fff;
+      }
+      .style-badge-inside {
+        fill: #55cc3d;
+      }
+      .style-badge-icon {
+        fill: #fff;
+      }
+    </style>
+    <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/>
+      <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+  <svg width="32" height="32" x="32" y="0">
+    <ellipse class="style-badge-shadow"     rx="14" ry="15" cx="16" cy="17" />
+    <circle  class="style-badge-background" r="15"  cy="15" cx="16" />
+    <circle  class="style-badge-inside"     r="12"  cy="15" cx="16" />
+    <path    class="style-badge-icon" d="M22.7,16.1l-5.6,5.5C16.8,21.9,16.4,22,16,22c-0.4,0-0.7-0.1-1-0.4 l-5.6-5.5C8.8,15.5,8.9,15,9.8,15l3.2,0V9c0-0.6,0.5-1,1.1-1h4c0.6,0,1,0.4,1,1v6h3.2C23.1,15,23.3,15.5,22.7,16.1z"/>
+  </svg>
+</svg>
diff --git a/browser/themes/shared/addons/addon-install-installed.svg b/browser/themes/shared/addons/addon-install-installed.svg
new file mode 100644
index 0000000000..86ebe4975d
--- /dev/null
+++ b/browser/themes/shared/addons/addon-install-installed.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .style-puzzle-piece {
+        fill: url('#gradient-linear-puzzle-piece');
+      }
+      .style-badge-shadow {
+        fill: #0d131a;
+        fill-opacity: .15;
+      }
+      .style-badge-background {
+        fill: #fff;
+      }
+      .style-badge-inside {
+        fill: #55cc3d;
+      }
+      .style-badge-icon {
+        fill: #fff;
+      }
+    </style>
+    <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/>
+      <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+  <svg width="32" height="32" x="32" y="0">
+    <ellipse class="style-badge-shadow"     rx="14" ry="15" cx="16" cy="17" />
+    <circle  class="style-badge-background" r="15"  cy="15" cx="16" />
+    <circle  class="style-badge-inside"     r="12"  cy="15" cx="16" />
+    <path    class="style-badge-icon" d="M22.8,12.3c0,0-6.7,8.1-6.9,8.3c-0.4,0.5-1.5,0.3-1.7,0 c-0.2-0.3-5-5.8-5-5.8c-0.3-0.3-0.3-0.7,0-1l1-1c0.4-0.4,0.9,0,1.2,0.3c0.3,0.4,3.4,3.8,3.4,3.8s5.2-6.1,5.4-6.4 c0.5-0.8,1.6-0.8,1.9-0.5l0.7,0.6C23.1,11.1,23.1,12,22.8,12.3z" />
+  </svg>
+</svg>
diff --git a/browser/themes/shared/addons/extension-controlled.css b/browser/themes/shared/addons/extension-controlled.css
new file mode 100644
index 0000000000..69d78373fc
--- /dev/null
+++ b/browser/themes/shared/addons/extension-controlled.css
@@ -0,0 +1,32 @@
+/* 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/. */
+
+.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body {
+  width: 30em;
+}
+
+.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > hbox > vbox > .popup-notification-description {
+  font-weight: 600;
+}
+
+.extension-controlled-notification {
+  margin-bottom: 0;
+}
+
+.extension-controlled-notification popupnotificationcontent > description > .extension-controlled-icon {
+  height: 16px;
+  width: 16px;
+  vertical-align: bottom;
+}
+
+.extension-controlled-icon.alltabs-icon {
+  background: url("chrome://global/skin/icons/arrow-down.svg");
+  /* This icon has a lot of extra space to the sides, reduce that a little. */
+  margin: 0 -1px 1px;
+}
+
+.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > .popup-notification-bottom-content > .popup-notification-warning,
+.extension-controlled-notification > .popup-notification-body-container > .popup-notification-icon {
+  display: none;
+}
diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css
new file mode 100644
index 0000000000..3356695e1e
--- /dev/null
+++ b/browser/themes/shared/addons/unified-extensions.css
@@ -0,0 +1,255 @@
+/* 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/. */
+
+:root {
+  /* uei = unified extensions item */
+  --uei-icon-size: 32px;
+  --uei-attention-dot-size: 8px;
+  --uei-button-hover-bgcolor: var(--panel-item-hover-bgcolor);
+  --uei-button-hover-color: inherit;
+  --uei-button-active-bgcolor: var(--panel-item-active-bgcolor);
+  --uei-button-active-color: inherit;
+  --uei-button-attention-dot-color: var(--tab-attention-icon-color);
+}
+
+:root[uidensity="compact"] {
+  --uei-icon-size: 24px;
+}
+
+#unified-extensions-panel {
+  --uei-dot-horizontal-position-in-panel: calc(var(--uei-icon-size) / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2);
+  --uei-dot-vertical-position-in-panel: max(0px, calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2));
+}
+
+/* Align extensions rendered with custom elements. */
+unified-extensions-item {
+  display: flex;
+  align-items: center;
+}
+
+#unified-extensions-panel .unified-extensions-item {
+  /* Have some spacing between items in the panel; mainly useful for when HCM is enabled. */
+  padding-block: 2px;
+}
+
+/* The "attention UI" for the unified extensions is based on:
+ * https://searchfox.org/mozilla-central/rev/560b7b1b17/browser/themes/shared/tabs.css#624 */
+
+/* On the main unified extensions button, we draw the attention on the icon element. */
+#unified-extensions-button[attention] > .toolbarbutton-icon,
+/* For extension widgets placed in a toolbar, we use the stack element (containing the icon)
+ * of the action button to draw the attention dot.
+ * Otherwise (in the extensions panel), we use the action button itself. */
+toolbar .unified-extensions-item[attention] > .unified-extensions-item-action-button > .toolbarbutton-badge-stack,
+#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button,
+.widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button {
+  background-image: radial-gradient(circle, var(--uei-button-attention-dot-color), var(--uei-button-attention-dot-color) 2px, transparent 2px);
+  background-size: var(--uei-attention-dot-size) var(--uei-attention-dot-size);
+  background-repeat: no-repeat;
+}
+
+/* Adjust attention dots position in the toolbar. */
+#unified-extensions-button[attention] > .toolbarbutton-icon,
+toolbar .unified-extensions-item[attention] > .unified-extensions-item-action-button > .toolbarbutton-badge-stack {
+  background-position: center bottom calc(var(--toolbarbutton-inner-padding) / 2 - var(--uei-attention-dot-size) / 2);
+}
+
+/* Adjust attention dots position in the unified extensions panel. */
+#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button {
+  background-position: left var(--uei-dot-horizontal-position-in-panel) bottom var(--uei-dot-vertical-position-in-panel);
+}
+
+/* Adjust attention dots position in the unified extensions panel for RTL. */
+#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button:-moz-locale-dir(rtl) {
+  background-position-x: right var(--uei-dot-horizontal-position-in-panel);
+}
+
+/* Adjust attention dots position in the overflow panel. */
+.widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button {
+  background-position-x: left calc(16px / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2);
+  background-position-y: bottom calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2);
+}
+
+:root[uidensity="compact"] .widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button {
+  background-position-y: bottom -2px;
+}
+
+/* Adjust attention dots position in the overflow panel for RTL. */
+.widget-overflow-list toolbaritem.unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button:-moz-locale-dir(rtl) {
+  background-position-x: right calc(16px / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2);
+}
+
+.unified-extensions-item-action-button {
+  overflow: hidden;
+  background-color: transparent;
+}
+
+/* The padding-block for menuitems is set to 0 in compact mode which, with the
+ * extension icon being 32px in this case, makes the item look crowded even for
+ * compact mode. */
+:root[uidensity="compact"] panel:not([touchmode]) .unified-extensions-item-action-button {
+  padding-block: 4px;
+}
+
+.unified-extensions-item-action-button[disabled].subviewbutton {
+  color: var(--panel-description-color);
+}
+
+.unified-extensions-item-action-button[disabled] .unified-extensions-item-icon {
+  opacity: 0.5;
+}
+
+.unified-extensions-item-icon,
+/* When the unified extensions pref is enabled, we also want to increase the
+ * size of the icons in the extension CUI widgets. */
+panel .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  height: var(--uei-icon-size);
+  width: var(--uei-icon-size);
+}
+
+/* The first selector is for the custom elements icon, which appears only in the UEP. */
+.unified-extensions-item-icon,
+panel .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack {
+  margin-inline-end: 6px;
+}
+
+.unified-extensions-item-icon,
+.unified-extensions-item-contents {
+  pointer-events: none;
+}
+
+.unified-extensions-item-name,
+.unified-extensions-item-message {
+  margin: 0;
+  padding-inline-start: .5em;
+  width: 22em;
+  word-break: break-word;
+}
+
+.unified-extensions-item-message {
+  color: var(--panel-description-color);
+}
+
+.unified-extensions-item-menu-button.subviewbutton {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+  margin: 0;
+  margin-inline-end: var(--arrowpanel-menuitem-margin-inline);
+  /* Have the icon even padding all around by default */
+  padding: var(--arrowpanel-menuitem-padding-inline);
+  border: 1px solid transparent;
+  background-color: transparent;
+}
+
+.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-text {
+  display: none;
+}
+
+/* --- browser action CUI widget styles --- */
+
+/* Hide secondary (menu) button when the widget is in the list of widgets in
+ * customization mode. */
+toolbaritem.unified-extensions-item:not([cui-areatype="panel"], [overflowedItem=true]) .unified-extensions-item-menu-button {
+  display: none;
+}
+
+/* Hide subviewbutton label by default, it should only be shown in the old
+ * overflow panel and the palette. */
+toolbaritem.unified-extensions-item[cui-areatype="toolbar"] .toolbarbutton-text,
+#unified-extensions-area > toolbaritem.unified-extensions-item .toolbarbutton-text {
+  display: none;
+}
+
+/* Hide unified extensions content by default, unless the item is overflowed or in
+ * a panel. Also hide this content if the item is visible in customize mode. */
+toolbaritem.unified-extensions-item:not([overflowedItem="true"], [cui-areatype="panel"]) .unified-extensions-item-contents,
+toolbarpaletteitem > toolbaritem.unified-extensions-item .unified-extensions-item-contents {
+  display: none;
+}
+
+toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton {
+  -moz-box-flex: 0;
+  margin-inline-start: var(--arrowpanel-menuitem-margin-inline);
+  padding: var(--arrowpanel-menuitem-padding);
+  border: 1px solid transparent;
+}
+
+/* When the unified extensions pref is set, we want to always have a "large"
+ * menu button, even on compact mode since each extension has two lines of text
+ * anyway (extension name and message). */
+toolbaritem.unified-extensions-item[unified-extensions="true"] .unified-extensions-item-menu-button.subviewbutton {
+  padding: 8px;
+}
+
+/* --- browser action CUI widget styles in the overflow/unified extensions panel --- */
+
+/* Align CUI widgets with the custom elements in the unified extensions panel. */
+#unified-extensions-panel toolbaritem.unified-extensions-item {
+  max-width: max-content;
+}
+
+/* Show CUI widget label in overflow panel when the unified extensions pref is
+ * not set. */
+.widget-overflow-list toolbaritem.unified-extensions-item[unified-extensions="false"] .unified-extensions-item-action-button .toolbarbutton-text {
+  text-align: start;
+  display: block;
+}
+
+@media (prefers-contrast) {
+  :root {
+    --uei-button-attention-dot-color: ButtonText;
+  }
+
+  #unified-extensions-panel :is(
+    .unified-extensions-item-action-button:not([disabled]).subviewbutton,
+    .unified-extensions-item-menu-button.subviewbutton,
+    toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton,
+    toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton
+  ) {
+    border-color: currentColor;
+    background-color: ButtonFace;
+    color: ButtonText;
+    --uei-button-hover-bgcolor: SelectedItem;
+    --uei-button-hover-color: SelectedItemText;
+    --uei-button-active-bgcolor: ButtonFace;
+    --uei-button-active-color: ButtonText;
+  }
+
+  #unified-extensions-panel .unified-extensions-item-action-button[disabled].subviewbutton {
+    background-color: Canvas;
+    color: GrayText;
+  }
+
+  .unified-extensions-item-action-button[disabled] .unified-extensions-item-message {
+    color: GrayText;
+  }
+
+  .unified-extensions-item-action-button:not([disabled]) .unified-extensions-item-message {
+    color: ButtonText;
+  }
+
+  .unified-extensions-item-action-button:not([disabled]):hover .unified-extensions-item-message {
+    color: inherit;
+  }
+
+  #unified-extensions-panel :is(
+    .unified-extensions-item-action-button:not([disabled]).subviewbutton,
+    .unified-extensions-item-menu-button.subviewbutton,
+    toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton,
+    toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton
+  ):hover:not(:active) {
+    background-color: var(--uei-button-hover-bgcolor);
+    color: var(--uei-button-hover-color);
+    border-color: var(--uei-button-hover-bgcolor);
+  }
+
+  #unified-extensions-panel :is(
+    .unified-extensions-item-action-button:not([disabled]).subviewbutton,
+    .unified-extensions-item-menu-button.subviewbutton,
+    toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton,
+    toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton
+  ):hover:active {
+    background-color: var(--uei-button-active-bgcolor);
+    color: var(--uei-button-active-color);
+  }
+}
diff --git a/browser/themes/shared/app-marketplace-icons/LICENSE b/browser/themes/shared/app-marketplace-icons/LICENSE
new file mode 100644
index 0000000000..6efe8a3cc9
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/LICENSE
@@ -0,0 +1 @@
+Files in this folder include material that may be protected as a trademark in some jurisdictions.
diff --git a/browser/themes/shared/app-marketplace-icons/Makefile.in b/browser/themes/shared/app-marketplace-icons/Makefile.in
new file mode 100644
index 0000000000..0e7114ca06
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/Makefile.in
@@ -0,0 +1,26 @@
+# 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/.
+
+include $(topsrcdir)/config/rules.mk
+
+# Note: `Makefile.in` is not allowed to modify `DEFINES`, so we modify
+# `MAKE_JAR_FLAGS` directly.
+
+# Note: we use 'es-ES' badge for all Spanish locales like in Bedrock.
+# See https://github.com/mozilla/bedrock/blob/67fd925b4d621dde0e48e27738c4b9c397ac5169/bedrock/mozorg/templatetags/misc.py#L58.
+
+# Note: it's probably possible to format these lists so they're easier to
+# modify.
+
+ifneq (,$(filter es%,$(AB_CD)))
+MAKE_JARS_FLAGS += -DANDROID_MARKETPLACE_AB_CD=es-ES
+MAKE_JARS_FLAGS += -DIOS_MARKETPLACE_AB_CD=es-ES
+else
+ifneq (,$(filter $(AB_CD),af ar az be bg bn-BD bn-IN ca cs da de el es-ES et eu fa fi fr gl gu-IN he hi-IN hr hu hy-AM id is it ja ka kk km kn ko lo lt lv mk ml mr ms my nb-NO ne-NP nl nn-NO pa-IN pl pt-BR pt-PT ro ru si sk sl sq sr sv-SE sw ta te th tr uk ur uz vi zh-CN zh-TW zu))
+MAKE_JARS_FLAGS += -DANDROID_MARKETPLACE_AB_CD=$(AB_CD)
+endif # Android, does not start with es.
+ifneq (,$(filter $(AB_CD),ar az bg cs da de el es-ES et fi fr he hu id it ja ko lt lv ms mt nb-NO nl nn-NO pl pt-BR pt-PT ro ru sk sl sv-SE th tr vi zh-CN zh-TW))
+MAKE_JARS_FLAGS += -DIOS_MARKETPLACE_AB_CD=$(AB_CD)
+endif # iOS, does not start with es.
+endif # starts with es.
diff --git a/browser/themes/shared/app-marketplace-icons/af/android.png b/browser/themes/shared/app-marketplace-icons/af/android.png
new file mode 100644
index 0000000000..beb0f90228
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/af/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ar/android.png b/browser/themes/shared/app-marketplace-icons/ar/android.png
new file mode 100644
index 0000000000..32541d672f
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ar/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ar/ios.svg b/browser/themes/shared/app-marketplace-icons/ar/ios.svg
new file mode 100644
index 0000000000..8bcd76a996
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ar/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="m92.193 9.419.695.108c-.107.371-.207.732-.207 1.192 0 .903.632 1.464 1.553 1.464.434 0 1.103-.163 1.482-.696.117-.154.225-.397.225-.515 0-.208-.008-.352-.053-.542-.19-.786-.516-1.391-.66-1.671l.885-.37c.127.234.452.976.578 1.644.154.072.38.1.623.1.316 0 .67.145.67.578 0 .253-.118.578-.67.578-.27 0-.514-.036-.623-.09-.035.298-.18.677-.334.913-.416.659-1.111 1.165-2.249 1.165-1.499 0-2.294-1.003-2.294-2.285 0-.588.172-1.166.379-1.573zm1.284-2.123c0-.361.234-.596.56-.596.343 0 .569.235.569.596s-.227.587-.569.587c-.326.001-.56-.225-.56-.587z"/><path d="M96.631 10.711c0-.271.135-.578.695-.578h.009c.415 0 .578-.199.769-.695.441-1.111.821-1.572 1.57-1.572.994 0 1.545 1.175 1.545 2.096 0 .741-.441 1.328-1.156 1.328-.551 0-1.057-.208-1.635-.614-.244.379-.479.614-1.093.614h-.026c-.317-.001-.678-.154-.678-.579zm3.441-.533c.226 0 .389-.072.389-.307 0-.461-.389-1.048-.84-1.048-.316 0-.561.171-.777.849.306.271.849.506 1.228.506zM109.215 9.311c.117.75.588.822.949.822.316 0 .668.145.668.578 0 .253-.117.578-.668.578-.28 0-.66-.072-.895-.389 0 .669-.145 1.084-.352 1.346-.525.75-1.438 1.102-2.322 1.102-1.291 0-2.258-.795-2.258-2.186 0-.434.1-.93.324-1.455l.695.118a3.598 3.598 0 0 0-.162.985c0 .993.688 1.499 1.562 1.499.65 0 1.283-.253 1.545-.641.082-.135.09-.28.082-.497l-.262-6.414.92-.063.174 4.617z"/><path d="M109.551 10.693c0-.217.137-.56.615-.56h.225c.598 0 .985-.054 1.184-.172v-.126c-.018-.65-.361-1.418-.713-2.006l.885-.325c.344.642.668 1.662.668 2.466 0 .28-.045.614-.145.849-.243.217-.65.47-1.996.47h-.107c-.499 0-.616-.343-.616-.596zm1.635 2.421c0 .343-.225.56-.541.56s-.551-.199-.551-.56c0-.352.234-.569.551-.569s.541.217.541.569zm1.373 0c0 .343-.225.56-.551.56-.316 0-.533-.199-.533-.56 0-.352.217-.569.533-.569.326 0 .551.217.551.569zM114.602 6.754c0-.361.234-.597.569-.597.343 0 .569.235.569.597s-.227.587-.578.587c-.326 0-.56-.226-.56-.587zM117.557 6.355c0-.361.234-.596.568-.596.344 0 .57.234.57.596s-.227.587-.578.587c-.326.001-.56-.225-.56-.587zM114.484 12.292c.704 0 1.445-.569 1.445-1.274 0-.407-.289-1.166-.85-2.06l.857-.316c.309.542.615.687 1.049.687.561 0 .984-.289 1.057-.822l.759-.072a4.01 4.01 0 0 0-.081.714c0 .75.416.966.994.984.315 0 .668.145.668.578 0 .253-.109.578-.668.578-.913 0-1.572-.452-1.662-1.382-.236.307-.715.451-1.121.451-.1 0-.244-.027-.307-.036.072.244.09.578.09.741 0 1.138-.85 2.33-2.168 2.33-.496 0-1.047-.153-1.355-.533l.145-.849c.316.19.705.281 1.148.281z"/><path d="M119.102 10.693c0-.217.135-.56.614-.56h.226c.596 0 .984-.054 1.184-.172v-.126c-.018-.65-.361-1.418-.713-2.006l.885-.325c.344.642.668 1.662.668 2.466 0 .28-.045.614-.145.849-.244.217-.65.47-1.996.47h-.108c-.498 0-.615-.343-.615-.596zm.117-4.697c0-.352.234-.569.551-.569.326 0 .551.217.551.569s-.225.56-.551.56c-.317 0-.551-.199-.551-.56zm1.39 0c0-.352.217-.569.533-.569.326 0 .543.217.543.569s-.217.56-.543.56c-.316 0-.533-.199-.533-.56z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/az/android.png b/browser/themes/shared/app-marketplace-icons/az/android.png
new file mode 100644
index 0000000000..0f3a854c74
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/az/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/az/ios.svg b/browser/themes/shared/app-marketplace-icons/az/ios.svg
new file mode 100644
index 0000000000..46bf593543
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/az/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 39.989H4.729A4.73 4.73 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468c2.605 0 4.73 2.12 4.73 4.726v30.541c.001 2.605-2.124 4.722-4.73 4.722z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M50.729 17.8h-1.553l-.85-2.673h-2.957l-.81 2.673h-1.512l2.93-9.099h1.809l2.943 9.099zm-2.66-3.793-.77-2.376c-.081-.243-.234-.814-.459-1.714h-.027c-.09.387-.234.958-.432 1.714l-.756 2.376h2.444zM58.126 14.439c0 1.116-.302 1.998-.905 2.646-.54.576-1.21.864-2.011.864-.864 0-1.485-.311-1.863-.932h-.027v3.456h-1.458v-7.074c0-.702-.018-1.422-.054-2.16h1.283l.081 1.04h.027c.486-.783 1.224-1.174 2.214-1.174.774 0 1.42.306 1.938.918.517.611.775 1.417.775 2.416zm-1.485.054c0-.639-.144-1.166-.432-1.58a1.492 1.492 0 0 0-1.269-.648c-.36 0-.687.12-.979.358a1.662 1.662 0 0 0-.574.938 1.91 1.91 0 0 0-.067.445V15.1c0 .478.146.88.439 1.208.292.329.672.493 1.141.493.549 0 .977-.211 1.282-.634.306-.423.459-.981.459-1.674zM65.74 14.439c0 1.116-.302 1.998-.905 2.646-.54.576-1.21.864-2.011.864-.864 0-1.485-.311-1.863-.932h-.027v3.456h-1.458v-7.074c0-.702-.018-1.422-.054-2.16h1.283l.081 1.04h.027c.486-.783 1.224-1.174 2.214-1.174.774 0 1.42.306 1.938.918.516.611.775 1.417.775 2.416zm-1.485.054c0-.639-.144-1.166-.432-1.58a1.492 1.492 0 0 0-1.269-.648c-.36 0-.687.12-.979.358a1.662 1.662 0 0 0-.574.938 1.91 1.91 0 0 0-.067.445V15.1c0 .478.146.88.439 1.208.292.329.672.493 1.141.493.549 0 .977-.211 1.282-.634.306-.423.459-.981.459-1.674zM75.595 15.249c0 .774-.269 1.404-.808 1.89-.593.531-1.419.796-2.479.796-.979 0-1.766-.189-2.358-.567l.338-1.215c.64.387 1.341.581 2.106.581.55 0 .978-.124 1.283-.372.307-.248.459-.579.459-.994 0-.37-.126-.681-.378-.933s-.67-.487-1.255-.703c-1.594-.595-2.39-1.465-2.39-2.61 0-.748.278-1.361.837-1.839.559-.478 1.301-.717 2.228-.717.828 0 1.517.144 2.065.432l-.364 1.188c-.514-.279-1.094-.419-1.742-.419-.513 0-.913.126-1.201.378a1.08 1.08 0 0 0-.364.823c0 .36.139.657.418.891.243.216.685.45 1.323.702.783.315 1.359.684 1.729 1.107.368.424.553.951.553 1.581zM80.32 12.333h-1.606v3.186c0 .81.283 1.215.851 1.215.261 0 .477-.022.647-.067l.041 1.107c-.288.108-.666.162-1.134.162-.576 0-1.026-.175-1.351-.526s-.485-.94-.485-1.769v-3.307h-.959V11.24h.959v-1.202l1.431-.432v1.633h1.606v1.094zM87.502 14.466c0 1.008-.288 1.836-.864 2.484-.603.666-1.404.999-2.403.999-.963 0-1.729-.319-2.302-.958-.571-.639-.856-1.444-.856-2.417 0-1.017.294-1.85.884-2.498s1.384-.972 2.383-.972c.963 0 1.737.319 2.322.958.557.622.836 1.423.836 2.404zm-1.512.047c0-.605-.131-1.124-.392-1.557-.307-.523-.743-.785-1.31-.785-.585 0-1.031.262-1.337.785-.261.433-.392.961-.392 1.584 0 .605.131 1.124.392 1.557.315.523.756.785 1.323.785.558 0 .994-.266 1.31-.799.27-.442.406-.965.406-1.57zM92.362 12.522a2.496 2.496 0 0 0-.459-.041c-.514 0-.909.193-1.188.581-.243.342-.364.774-.364 1.296V17.8h-1.458l.014-4.496c0-.756-.019-1.444-.054-2.065h1.269l.054 1.255h.041c.152-.432.396-.778.729-1.04A1.763 1.763 0 0 1 92 11.103c.135 0 .256.009.364.027v1.392zM98.788 14.209c0 .261-.019.481-.055.661h-4.374c.019.648.229 1.143.635 1.485.369.306.846.459 1.431.459.648 0 1.237-.104 1.769-.311l.229 1.012c-.621.27-1.354.405-2.2.405-1.017 0-1.815-.299-2.396-.898-.58-.598-.87-1.401-.87-2.41 0-.99.27-1.813.81-2.471.567-.702 1.332-1.053 2.295-1.053.945 0 1.661.351 2.146 1.053.386.561.58 1.25.58 2.068zm-1.391-.378c.009-.432-.086-.805-.284-1.12-.252-.405-.639-.607-1.16-.607-.478 0-.864.198-1.161.594a2.178 2.178 0 0 0-.433 1.134h3.038zM103 14.695h-3.361v-1.026H103v1.026zM110.397 17.8h-1.296l-.067-1.053h-.041c-.414.801-1.116 1.202-2.105 1.202-.792 0-1.449-.311-1.972-.932-.521-.621-.782-1.426-.782-2.417 0-1.062.283-1.921.851-2.578.549-.612 1.224-.918 2.024-.918.882 0 1.499.297 1.85.891h.027V8.229h1.458v7.803c0 .639.017 1.228.053 1.768zm-1.511-2.767V13.94c0-.189-.014-.342-.041-.459a1.646 1.646 0 0 0-.528-.884 1.432 1.432 0 0 0-.977-.358c-.542 0-.969.216-1.28.648-.312.432-.468.985-.468 1.661 0 .648.148 1.174.447 1.58.316.432.74.648 1.273.648.479 0 .863-.18 1.152-.54a1.81 1.81 0 0 0 .422-1.203zM117.337 17.8h-1.31l-.108-.756h-.04c-.45.603-1.089.904-1.917.904-.621 0-1.12-.198-1.498-.594-.343-.36-.514-.806-.514-1.337 0-.801.335-1.413 1.006-1.836.671-.423 1.613-.63 2.828-.621v-.12c0-.864-.453-1.296-1.36-1.296-.646 0-1.217.162-1.711.486l-.297-.958c.611-.378 1.362-.567 2.252-.567 1.716 0 2.574.904 2.574 2.713v2.417c0 .657.031 1.179.095 1.565zm-1.512-2.254v-1.013c-1.611-.027-2.417.414-2.417 1.323 0 .342.094.599.282.77.188.171.425.256.711.256.322 0 .62-.101.893-.304.273-.203.441-.461.504-.776.017-.072.027-.157.027-.256zM124.978 17.8h-1.458v-3.757c0-1.158-.441-1.737-1.323-1.737-.432 0-.783.16-1.053.479a1.677 1.677 0 0 0-.405 1.124V17.8h-1.458v-4.685c0-.576-.019-1.202-.054-1.876h1.282l.067 1.025h.041c.171-.318.423-.583.756-.792a2.457 2.457 0 0 1 1.323-.369c.611 0 1.12.198 1.525.594.504.486.756 1.21.756 2.173v3.93z"/></g><g fill="#FFF"><path d="m48.598 24.924-1.476 4.043c-.704 1.912-1.364 3.145-1.98 3.697-.456.408-.932.65-1.428.73l-.312-1.092a2.78 2.78 0 0 0 1.692-1.475c.064-.121.096-.209.096-.266a.93.93 0 0 0-.072-.275l-2.112-5.363h1.428l1.104 3.252c.104.295.22.68.348 1.152h.024l.324-1.164.984-3.24h1.38zM54.69 29.004c0 .695.024 1.271.048 1.752h-1.295l-.072-.889h-.024c-.251.42-.827 1.02-1.871 1.02-1.067 0-2.039-.635-2.039-2.543v-3.43h1.475v3.18c0 .971.312 1.594 1.091 1.594.588 0 .972-.42 1.127-.791a1.34 1.34 0 0 0 .084-.455v-3.527h1.475v4.089zm-4.509-5.733c0-.42.324-.744.755-.744.396 0 .708.312.708.744 0 .396-.3.732-.72.732a.729.729 0 0 1-.743-.732zm2.399 0c0-.42.312-.744.732-.744.419 0 .719.312.719.744 0 .396-.3.732-.719.732a.718.718 0 0 1-.732-.732zM61.45 30.756h-1.584l-1.764-2.664-.492.6v2.064h-1.296v-8.508h1.296v5.279h.024c.16-.256.316-.48.468-.672l1.5-1.932h1.548l-2.148 2.4 2.448 3.433zM63.43 30.756h-1.296v-8.508h1.296v8.508zM64.953 25.189c.516-.227 1.211-.406 2.063-.406 1.871 0 2.986 1.174 2.986 2.975 0 1.594-.971 3.117-2.842 3.117-1.907 0-2.531-1.547-2.531-2.83 0-.264.024-.492.048-.611h3.911c-.037-1.068-.768-1.535-1.776-1.535a4.56 4.56 0 0 0-1.643.299l-.216-1.009zm1.068 3.276c-.012.527.252 1.402 1.235 1.402.924 0 1.271-.814 1.332-1.402h-2.567zM76.126 24.924l-1.477 4.043c-.704 1.912-1.364 3.145-1.979 3.697-.457.408-.933.65-1.428.73l-.312-1.092a2.768 2.768 0 0 0 1.691-1.475c.064-.121.097-.209.097-.266a.93.93 0 0 0-.072-.275l-2.112-5.363h1.428l1.104 3.252c.104.295.22.68.348 1.152h.024l.324-1.164.983-3.24h1.381zM78.453 23.184c0 .232-.076.42-.228.564a.825.825 0 0 1-.588.215.747.747 0 0 1-.547-.221c-.147-.148-.222-.334-.222-.559s.076-.408.229-.553c.151-.143.34-.215.563-.215s.412.072.564.215a.729.729 0 0 1 .229.554zm-.143 7.572h-1.296v-5.832h1.296v5.832zM85.005 30.756h-1.296v-3.34c0-1.029-.392-1.545-1.176-1.545-.384 0-.696.143-.937.426a1.498 1.498 0 0 0-.359.998v3.461h-1.296v-4.164c0-.512-.017-1.068-.049-1.668h1.141l.06.912h.036c.152-.283.376-.52.672-.705a2.183 2.183 0 0 1 1.176-.328c.544 0 .996.176 1.356.529.448.432.672 1.076.672 1.932v3.492z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/be/android.png b/browser/themes/shared/app-marketplace-icons/be/android.png
new file mode 100644
index 0000000000..fc0ff894db
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/be/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/bg/android.png b/browser/themes/shared/app-marketplace-icons/bg/android.png
new file mode 100644
index 0000000000..204b3e4303
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/bg/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/bg/ios.svg b/browser/themes/shared/app-marketplace-icons/bg/ios.svg
new file mode 100644
index 0000000000..df80f3c5e1
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/bg/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.172 40H4.704C2.096 40 0 37.872 0 35.267V4.726C0 2.12 2.096 0 4.704 0h125.468C132.777 0 135 2.12 135 4.726v30.541c0 2.605-2.223 4.733-4.828 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.103 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.902 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.62 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909h-2.211l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549-1.125-3.475c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.637 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.757.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.674 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.039v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.754.896 1.133 2.074 1.133 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.447-.619.672-1.435.672-2.449zM88.014 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.538.616.808 1.387.808 2.307zM95.062 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.666 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.213.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.394-.645.591-1.412.591-2.296zM112.596 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.131 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M47.98 7.921a2.955 2.955 0 0 0-1.242-.252c-1.437 0-2.339.961-2.339 2.514 0 1.543.863 2.465 2.31 2.465.514 0 .941-.078 1.291-.243l.184.834c-.388.185-.941.282-1.659.282-1.999 0-3.231-1.291-3.231-3.29 0-2.057 1.378-3.435 3.406-3.435.66 0 1.164.097 1.514.281l-.234.844zM49.675 8.755a11.86 11.86 0 0 1 1.611-.106c.767 0 2.125.097 2.125 1.213 0 .573-.456.902-.941 1.009l.01.029c.679.116 1.154.495 1.154 1.145 0 1.33-1.649 1.446-2.571 1.446-.515 0-1.058-.029-1.388-.058V8.755zm1.009 1.883h.534c.66 0 1.193-.155 1.193-.631 0-.427-.35-.621-1.106-.621-.223 0-.339.01-.621.039v1.213zm0 2.096c.263.029.398.039.631.039.583 0 1.252-.126 1.252-.737 0-.543-.523-.718-1.329-.718h-.554v1.416zM57.766 13.433l-.077-.543h-.029c-.32.437-.786.65-1.378.65-.845 0-1.446-.592-1.446-1.388 0-1.164 1.009-1.766 2.756-1.766v-.087c0-.621-.33-.932-.98-.932-.465 0-.873.117-1.232.35l-.213-.689c.437-.272.98-.408 1.62-.408 1.232 0 1.854.65 1.854 1.951v1.737c0 .476.02.845.068 1.126h-.943zm-.145-2.349c-1.164 0-1.747.282-1.747.951 0 .495.301.737.719.737.533 0 1.028-.407 1.028-.96v-.728zM64.199 8.717v4.716H63.15V9.571h-1.465v1.067c0 1.242-.155 2.067-.68 2.514-.271.233-.553.359-1.058.369l-.116-.844c.185-.049.359-.136.476-.243.34-.32.417-.912.417-1.834V8.717h3.475zM67.019 8.717v1.669c0 .767-.028 1.32-.067 1.99l.02.019c.242-.495.485-.951.728-1.446l1.165-2.232h1.359v4.716h-.99v-1.669c0-.699.039-1.397.078-2.106h-.049c-.215.572-.437.97-.661 1.417-.397.767-.786 1.543-1.223 2.358H66.02V8.717h.999zM76.846 13.54c-1.379 0-2.271-1.029-2.271-2.426 0-1.456.912-2.494 2.35-2.494 1.357 0 2.27.98 2.27 2.417-.002 1.474-.943 2.503-2.349 2.503zm.039-4.154c-.758 0-1.242.708-1.242 1.698 0 .971.494 1.679 1.232 1.679.736 0 1.232-.757 1.232-1.699 0-.96-.486-1.678-1.222-1.678zM84.092 8.717v.854h-1.436v3.862h-1.029V9.571h-1.426v-.854h3.891z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/bn-BD/android.png b/browser/themes/shared/app-marketplace-icons/bn-BD/android.png
new file mode 100644
index 0000000000..4e2b6da628
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/bn-BD/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/bn-IN/android.png b/browser/themes/shared/app-marketplace-icons/bn-IN/android.png
new file mode 100644
index 0000000000..4e2b6da628
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/bn-IN/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ca/android.png b/browser/themes/shared/app-marketplace-icons/ca/android.png
new file mode 100644
index 0000000000..a184cebc00
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ca/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/cs/android.png b/browser/themes/shared/app-marketplace-icons/cs/android.png
new file mode 100644
index 0000000000..2fbe5e7e9d
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/cs/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/cs/ios.svg b/browser/themes/shared/app-marketplace-icons/cs/ios.svg
new file mode 100644
index 0000000000..a3baabc173
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/cs/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 39.989H4.729A4.73 4.73 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468c2.605 0 4.73 2.12 4.73 4.726v30.541c.001 2.605-2.124 4.722-4.73 4.722z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M47.42 11.6c0 .557-.193 1.009-.58 1.358-.426.381-1.02.572-1.781.572-.703 0-1.269-.136-1.694-.408l.242-.873c.46.278.964.417 1.515.417.395 0 .701-.089.922-.268a.87.87 0 0 0 .329-.714.91.91 0 0 0-.271-.67c-.181-.181-.481-.35-.901-.505-1.145-.427-1.717-1.052-1.717-1.875 0-.538.2-.978.601-1.321.401-.343.935-.515 1.601-.515.595 0 1.09.104 1.484.311l-.262.854a2.573 2.573 0 0 0-1.252-.301c-.368 0-.656.091-.863.271a.779.779 0 0 0-.262.592.8.8 0 0 0 .301.64c.175.155.491.324.951.504.562.227.976.492 1.241.795.264.305.396.683.396 1.136zM51.397 9.504h-1.154v2.29c0 .582.204.873.611.873.188 0 .343-.016.466-.049l.028.795c-.207.078-.479.117-.814.117-.414 0-.737-.126-.97-.378-.233-.252-.35-.676-.35-1.271V9.504h-.688v-.785h.688v-.864l1.028-.31v1.173h1.154v.786zM56.382 13.433h-.941l-.077-.543h-.029c-.323.433-.782.65-1.377.65-.446 0-.806-.143-1.077-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-1.087-1.62v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.73.73 0 0 0 .511.184c.231 0 .445-.073.642-.218a.889.889 0 0 0 .38-.742zm.622-5.073-1.174 1.406h-.728l.835-1.406h1.067zM62.242 13.433h-1.048v-2.68c0-.845-.316-1.268-.95-1.268-.485 0-.818.245-.999.735a1.283 1.283 0 0 0-.049.377v2.835h-1.048V6.556h1.048v2.841h.02c.33-.517.802-.775 1.416-.775.434 0 .792.142 1.077.427.355.355.533.883.533 1.581v2.803zM68.178 13.433H67.13v-2.7c0-.832-.316-1.248-.95-1.248a.946.946 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.737h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.44 0 .806.142 1.097.427.362.349.543.87.543 1.562v2.824zM74.328 11.037c0 .725-.207 1.319-.621 1.785-.434.479-1.008.718-1.727.718-.691 0-1.242-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.713-.698c.691 0 1.248.229 1.668.688.4.446.601 1.022.601 1.726zm-1.086.034c0-.435-.094-.808-.281-1.119-.221-.376-.533-.564-.941-.564-.42 0-.74.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .715-.191.941-.574.194-.317.291-.693.291-1.128zM79.943 13.433h-.92l-.059-.718h-.02c-.33.55-.828.825-1.494.825-.465 0-.838-.146-1.115-.437-.33-.356-.494-.893-.494-1.61V8.719h1.047v2.6c0 .906.311 1.358.932 1.358.465 0 .789-.226.969-.679.045-.116.068-.249.068-.398V8.719h1.047v3.356c0 .446.014.899.039 1.358zM84.145 9.504H82.99v2.29c0 .582.205.873.611.873.188 0 .344-.016.467-.049l.027.795c-.207.078-.479.117-.814.117-.414 0-.736-.126-.969-.378-.234-.252-.35-.676-.35-1.271V9.504h-.689v-.785h.689v-.864l1.027-.31v1.173h1.154v.786zM92.418 8.719l-1.785 4.714h-1.018l-1.727-4.714h1.125l.805 2.493c.137.414.25.812.34 1.193h.029c.078-.343.191-.74.34-1.193l.795-2.493h1.096z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/da/android.png b/browser/themes/shared/app-marketplace-icons/da/android.png
new file mode 100644
index 0000000000..b6bab10959
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/da/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/da/ios.svg b/browser/themes/shared/app-marketplace-icons/da/ios.svg
new file mode 100644
index 0000000000..1a47f8bca8
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/da/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M48.604 13.433h-1.048v-2.949h-2.832v2.949h-1.048V6.896h1.048v2.667h2.832V6.896h1.048v6.537zM54.385 10.853c0 .188-.014.346-.039.475h-3.143c.013.466.164.821.455 1.067.266.22.608.33 1.028.33.466 0 .89-.074 1.271-.223l.164.728c-.446.194-.973.291-1.581.291-.73 0-1.305-.215-1.722-.645s-.625-1.007-.625-1.731c0-.711.193-1.303.582-1.775.407-.504.956-.756 1.648-.756.679 0 1.193.252 1.542.756.281.4.42.895.42 1.483zm-1-.271a1.427 1.427 0 0 0-.203-.805c-.182-.292-.459-.437-.834-.437a.997.997 0 0 0-.835.427 1.577 1.577 0 0 0-.31.815h2.182zM60 13.433h-1.048v-2.7c0-.832-.316-1.248-.95-1.248a.946.946 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.737h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.44 0 .806.142 1.097.427.363.351.543.871.543 1.563v2.823zM64.221 9.504h-1.154v2.29c0 .582.204.873.611.873.188 0 .343-.016.466-.049l.028.795c-.207.078-.479.117-.814.117-.414 0-.737-.126-.97-.378-.233-.252-.35-.676-.35-1.271V9.504h-.688v-.785h.688v-.864l1.028-.31v1.173h1.154v.786zM69.672 7.312a.603.603 0 0 1-.184.456.662.662 0 0 1-.477.175.611.611 0 0 1-.621-.63c0-.181.062-.33.185-.446s.274-.175.456-.175a.64.64 0 0 1 .457.175.59.59 0 0 1 .184.445zm-.117 6.121h-1.047V8.719h1.047v4.714z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/de/android.png b/browser/themes/shared/app-marketplace-icons/de/android.png
new file mode 100644
index 0000000000..eef59de69a
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/de/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/de/ios.svg b/browser/themes/shared/app-marketplace-icons/de/ios.svg
new file mode 100644
index 0000000000..523e8114b1
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/de/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.129 19.783c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.225 1.625-.066 2.232-1.035 4.193-1.035 1.943 0 2.513 1.035 4.207.996 1.744-.027 2.842-1.559 3.89-3.127 1.255-1.779 1.759-3.533 1.779-3.623-.041-.013-3.387-1.289-3.42-5.153zM26.929 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.105 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.681 31.502H51.41l-1.244-3.908h-4.324l-1.185 3.908h-2.211l4.284-13.307h2.646l4.305 13.307zm-3.889-5.548-1.125-3.475c-.119-.355-.342-1.191-.671-2.508h-.04a98.725 98.725 0 0 1-.632 2.508l-1.105 3.475h3.573zM64.698 26.586c0 1.633-.441 2.922-1.323 3.869-.79.844-1.771 1.264-2.942 1.264-1.264 0-2.172-.453-2.725-1.361h-.04v5.055h-2.132V25.066c0-1.027-.027-2.08-.079-3.16h1.875l.119 1.521h.04c.711-1.146 1.79-1.719 3.238-1.719 1.132 0 2.077.447 2.833 1.343s1.136 2.074 1.136 3.535zm-2.172.079c0-.935-.21-1.704-.632-2.31-.461-.633-1.08-.948-1.856-.948-.526 0-1.004.175-1.431.523a2.42 2.42 0 0 0-.839 1.372c-.066.264-.099.48-.099.651v1.6c0 .698.214 1.286.642 1.767s.984.721 1.668.721c.803 0 1.428-.309 1.875-.928s.672-1.434.672-2.448zM75.736 26.586c0 1.633-.441 2.922-1.324 3.869-.789.844-1.77 1.264-2.941 1.264-1.264 0-2.172-.453-2.725-1.361h-.039v5.055h-2.132V25.066c0-1.027-.027-2.08-.079-3.16h1.875l.119 1.521h.04c.711-1.146 1.79-1.719 3.239-1.719 1.131 0 2.076.447 2.834 1.343.754.896 1.133 2.074 1.133 3.535zm-2.172.079c0-.935-.211-1.704-.633-2.31-.461-.633-1.078-.948-1.855-.948-.527 0-1.004.175-1.432.523s-.708.806-.839 1.372c-.065.264-.099.48-.099.651v1.6c0 .698.214 1.286.641 1.767.428.48.984.721 1.67.721.803 0 1.428-.309 1.875-.928s.672-1.434.672-2.448zM88.076 27.771c0 1.131-.395 2.053-1.182 2.764-.867.777-2.076 1.164-3.625 1.164-1.432 0-2.582-.275-3.449-.828l.494-1.777c.934.566 1.961.85 3.08.85.805 0 1.43-.182 1.877-.545.447-.361.672-.848.672-1.453 0-.541-.186-.996-.553-1.365-.369-.369-.98-.711-1.836-1.028-2.33-.87-3.496-2.142-3.496-3.816 0-1.094.408-1.991 1.225-2.69s1.902-1.048 3.258-1.048c1.211 0 2.219.211 3.021.632l-.533 1.738c-.75-.408-1.6-.612-2.547-.612-.75 0-1.336.185-1.758.553a1.58 1.58 0 0 0-.533 1.204c0 .527.205.961.613 1.303.355.316 1 .658 1.934 1.027 1.146.461 1.988 1 2.527 1.619.542.617.811 1.387.811 2.308zM95.123 23.506h-2.35v4.66c0 1.184.416 1.777 1.244 1.777.383 0 .697-.033.949-.1l.059 1.619c-.422.158-.975.236-1.658.236-.844 0-1.502-.256-1.975-.77-.475-.514-.711-1.375-.711-2.586v-4.838h-1.402v-1.6h1.402v-1.757l2.092-.632v2.389h2.35v1.602zM105.727 26.625c0 1.475-.422 2.686-1.264 3.633-.881.975-2.053 1.461-3.514 1.461-1.41 0-2.531-.467-3.367-1.4-.836-.936-1.254-2.113-1.254-3.535 0-1.486.432-2.705 1.293-3.652.863-.947 2.025-1.422 3.486-1.422 1.408 0 2.539.468 3.395 1.402.816.908 1.225 2.079 1.225 3.513zm-2.211.07c0-.885-.191-1.645-.572-2.277-.447-.766-1.086-1.148-1.916-1.148-.855 0-1.508.383-1.955 1.148-.381.633-.572 1.405-.572 2.316 0 .885.191 1.645.572 2.277.461.766 1.105 1.148 1.936 1.148.816 0 1.455-.391 1.916-1.168.393-.645.591-1.412.591-2.296zM112.656 23.782a3.591 3.591 0 0 0-.67-.06c-.752 0-1.33.283-1.738.85-.355.5-.533 1.133-.533 1.896v5.034h-2.133l.02-6.574c0-1.105-.025-2.113-.078-3.021h1.855l.08 1.836h.059c.223-.631.578-1.138 1.066-1.52a2.574 2.574 0 0 1 1.539-.514c.197 0 .375.014.533.039v2.034zM122.193 26.25c0 .383-.027.705-.08.968h-6.396c.025.948.336 1.673.928 2.173.539.447 1.238.67 2.094.67.947 0 1.809-.15 2.586-.453l.336 1.48c-.908.395-1.982.592-3.219.592-1.488 0-2.656-.438-3.504-1.312-.85-.875-1.273-2.051-1.273-3.524 0-1.448.395-2.652 1.184-3.613.83-1.026 1.949-1.54 3.357-1.54 1.381 0 2.428.514 3.139 1.54.565.815.848 1.822.848 3.019zm-2.033-.553c.012-.631-.127-1.178-.416-1.639-.367-.592-.934-.889-1.697-.889-.697 0-1.264.29-1.697.869-.355.461-.566 1.014-.633 1.658h4.443z"/></g><g fill="#FFF"><path d="M47.427 13.432h-3.715V6.894h1.048v5.655h2.667v.883zM52.365 13.432h-.941l-.077-.543h-.029c-.323.433-.782.65-1.377.65-.446 0-.806-.143-1.077-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.214-.69c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736a7.25 7.25 0 0 0 .068 1.125zm-1.087-1.62v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.73.73 0 0 0 .511.184c.231 0 .445-.073.642-.218a.889.889 0 0 0 .38-.742zM58.32 13.432h-.931l-.049-.757h-.029c-.297.576-.802.864-1.513.864-.569 0-1.041-.223-1.416-.669s-.562-1.025-.562-1.736c0-.763.203-1.381.61-1.853.395-.44.88-.66 1.455-.66.634 0 1.077.213 1.329.64h.02V6.554h1.048v5.607c0 .459.012.882.038 1.271zm-1.086-1.989v-.786a1.189 1.189 0 0 0-.409-.965 1.028 1.028 0 0 0-.701-.257c-.39 0-.696.155-.921.466-.224.311-.336.708-.336 1.193 0 .466.107.844.322 1.135.227.31.532.465.915.465.344 0 .62-.129.828-.388.201-.239.302-.527.302-.863zM64.025 10.852c0 .188-.014.346-.039.475h-3.143c.013.466.164.821.455 1.067.266.22.608.33 1.028.33.466 0 .89-.074 1.271-.223l.164.728c-.446.194-.973.291-1.581.291-.73 0-1.305-.215-1.722-.645s-.625-1.007-.625-1.731c0-.711.193-1.303.582-1.775.407-.504.956-.756 1.648-.756.679 0 1.193.252 1.542.756.28.4.42.894.42 1.483zm-1-.272a1.427 1.427 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.997.997 0 0 0-.835.427 1.577 1.577 0 0 0-.31.815h2.182zM69.641 13.432h-1.048v-2.7c0-.832-.316-1.248-.95-1.248a.946.946 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.737h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.44 0 .806.142 1.097.427.361.349.543.87.543 1.562v2.824zM75.479 7.311a.599.599 0 0 1-.184.456.66.66 0 0 1-.475.175.598.598 0 0 1-.441-.179c-.121-.12-.18-.27-.18-.451s.061-.33.184-.446.275-.176.457-.176c.18 0 .332.059.455.175s.184.265.184.446zm-.116 6.121h-1.049V8.717h1.049v4.715zM83.977 13.432H82.95V10.79c0-.871-.299-1.306-.893-1.306a.827.827 0 0 0-.684.324 1.182 1.182 0 0 0-.258.759v2.864h-1.027v-2.777c0-.355-.074-.639-.219-.852-.146-.213-.361-.319-.645-.319a.848.848 0 0 0-.699.348 1.25 1.25 0 0 0-.271.793v2.806h-1.029v-3.366c0-.414-.012-.863-.037-1.349h.9l.049.717h.029c.324-.542.803-.814 1.436-.814.641 0 1.074.294 1.301.882h.02c.148-.246.332-.443.553-.591.277-.194.598-.291.959-.291.422 0 .768.142 1.039.427.336.355.504.886.504 1.591v2.796z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/el/android.png b/browser/themes/shared/app-marketplace-icons/el/android.png
new file mode 100644
index 0000000000..9161f086b6
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/el/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/el/ios.svg b/browser/themes/shared/app-marketplace-icons/el/ios.svg
new file mode 100644
index 0000000000..82505aa3f4
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/el/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.266V4.724A4.732 4.732 0 0 1 4.729 0h125.468C132.803 0 135 2.119 135 4.724v30.542c0 2.605-2.197 4.734-4.803 4.734z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.782c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.225 1.625-.066 2.232-1.035 4.193-1.035 1.943 0 2.513 1.035 4.207.996 1.744-.027 2.842-1.559 3.89-3.127 1.255-1.779 1.759-3.533 1.779-3.623-.04-.013-3.386-1.289-3.42-5.153zM26.928 10.305c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.105 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.646 31.502h-2.271l-1.244-3.908h-4.324l-1.185 3.908h-2.211l4.284-13.307h2.646l4.305 13.307zm-3.89-5.548-1.125-3.475c-.119-.355-.342-1.191-.671-2.508h-.04a98.725 98.725 0 0 1-.632 2.508l-1.105 3.475h3.573zM64.663 26.586c0 1.633-.441 2.922-1.323 3.869-.79.844-1.771 1.264-2.942 1.264-1.264 0-2.172-.453-2.725-1.361h-.04v5.055h-2.132V25.066c0-1.027-.027-2.08-.079-3.16h1.875l.119 1.521h.04c.711-1.146 1.79-1.719 3.238-1.719 1.132 0 2.077.447 2.833 1.343s1.136 2.074 1.136 3.535zm-2.172.079c0-.935-.21-1.704-.632-2.31-.461-.633-1.08-.948-1.856-.948-.526 0-1.004.175-1.431.523a2.42 2.42 0 0 0-.839 1.372c-.066.264-.099.48-.099.651v1.6c0 .698.214 1.286.642 1.767s.984.721 1.668.721c.803 0 1.428-.309 1.875-.928s.672-1.434.672-2.448zM75.7 26.586c0 1.633-.441 2.922-1.324 3.869-.789.844-1.77 1.264-2.941 1.264-1.264 0-2.172-.453-2.725-1.361h-.039v5.055h-2.132V25.066c0-1.027-.027-2.08-.079-3.16h1.875l.119 1.521h.04c.711-1.146 1.789-1.719 3.238-1.719 1.131 0 2.076.447 2.834 1.343.755.896 1.134 2.074 1.134 3.535zm-2.172.079c0-.935-.211-1.704-.633-2.31-.461-.633-1.078-.948-1.855-.948-.527 0-1.004.175-1.432.523s-.707.806-.839 1.372c-.065.264-.099.48-.099.651v1.6c0 .698.214 1.286.641 1.767.428.48.984.721 1.67.721.803 0 1.428-.309 1.875-.928s.672-1.434.672-2.448zM88.04 27.771c0 1.131-.394 2.053-1.182 2.764-.867.777-2.075 1.164-3.625 1.164-1.432 0-2.581-.275-3.449-.828l.494-1.777c.935.566 1.962.85 3.081.85.804 0 1.429-.182 1.877-.545.447-.361.671-.848.671-1.453 0-.541-.185-.996-.553-1.365s-.98-.711-1.836-1.028c-2.33-.87-3.495-2.142-3.495-3.816 0-1.094.408-1.991 1.225-2.69.815-.699 1.901-1.048 3.258-1.048 1.211 0 2.218.211 3.021.632l-.533 1.738c-.75-.408-1.599-.612-2.547-.612-.75 0-1.336.185-1.757.553a1.58 1.58 0 0 0-.533 1.204c0 .527.204.961.612 1.303.355.316 1 .658 1.935 1.027 1.146.461 1.987 1 2.527 1.619s.809 1.387.809 2.308zM95.088 23.506h-2.35v4.66c0 1.184.415 1.777 1.244 1.777.382 0 .697-.033.948-.1l.059 1.619c-.421.158-.974.236-1.658.236-.843 0-1.501-.256-1.975-.77s-.711-1.375-.711-2.586v-4.838h-1.401v-1.6h1.401v-1.757l2.093-.632v2.389h2.35v1.602zM105.691 26.625c0 1.475-.422 2.686-1.264 3.633-.882.975-2.054 1.461-3.515 1.461-1.409 0-2.53-.467-3.366-1.4-.836-.936-1.254-2.113-1.254-3.535 0-1.486.431-2.705 1.293-3.652s2.024-1.422 3.485-1.422c1.408 0 2.54.468 3.396 1.402.817.908 1.225 2.079 1.225 3.513zm-2.212.07c0-.885-.19-1.645-.572-2.277-.447-.766-1.086-1.148-1.915-1.148-.856 0-1.508.383-1.955 1.148-.382.633-.572 1.405-.572 2.316 0 .885.19 1.645.572 2.277.461.766 1.105 1.148 1.936 1.148.815 0 1.454-.391 1.915-1.168.394-.645.591-1.412.591-2.296zM112.621 23.782a3.602 3.602 0 0 0-.671-.06c-.751 0-1.33.283-1.738.85-.355.5-.533 1.133-.533 1.896v5.034h-2.132l.02-6.574c0-1.105-.026-2.113-.079-3.021h1.856l.079 1.836h.059c.224-.631.579-1.138 1.066-1.52a2.58 2.58 0 0 1 1.54-.514c.197 0 .375.014.533.039v2.034zM122.157 26.25c0 .383-.026.705-.079.968h-6.396c.025.948.335 1.673.928 2.173.539.447 1.237.67 2.093.67.947 0 1.81-.15 2.587-.453l.335 1.48c-.908.395-1.981.592-3.218.592-1.488 0-2.656-.438-3.505-1.312s-1.273-2.051-1.273-3.524c0-1.448.395-2.652 1.185-3.613.829-1.026 1.948-1.54 3.356-1.54 1.382 0 2.429.514 3.14 1.54.564.815.847 1.822.847 3.019zm-2.033-.553c.013-.631-.126-1.178-.415-1.639-.368-.592-.935-.889-1.698-.889-.697 0-1.264.29-1.697.869-.355.461-.566 1.014-.632 1.658h4.442z"/></g><g fill="#FFF"><path d="m47.576 13.432-1.349-4.316c-.058-.227-.112-.446-.164-.66l-.155-.63h-.029c-.052.207-.101.418-.146.635s-.094.435-.146.655l-1.31 4.316h-1.096l2.104-6.538h1.28l2.144 6.538h-1.133zM51.029 9.455c.058-.097.132-.195.223-.296a1.619 1.619 0 0 1 .757-.465 1.797 1.797 0 0 1 1.086.024c.193.065.371.175.533.33.161.155.292.362.393.621.101.259.15.582.15.97v3.443a10.561 10.561 0 0 0 .039.916c.013.139.032.257.058.354h-.989a1.008 1.008 0 0 1-.077-.291 4.838 4.838 0 0 1-.044-.426 16.57 16.57 0 0 1-.034-.988v-2.886c0-.181-.016-.349-.048-.504a1.287 1.287 0 0 0-.155-.407.738.738 0 0 0-.291-.271.954.954 0 0 0-.446-.097c-.246 0-.458.077-.636.232s-.299.335-.363.542a1.056 1.056 0 0 0-.059.387v2.787h-1.048v-3.366c0-.259-.01-.506-.028-.742a2.972 2.972 0 0 0-.107-.606h.922c.045.091.081.201.106.33.026.129.039.265.039.407h.019zm2.231-2.716-.805 1.406h-.688l.494-1.406h.999zM58.188 13.539c-.297-.02-.58-.073-.849-.16s-.504-.227-.708-.417a1.999 1.999 0 0 1-.484-.747c-.12-.307-.18-.694-.18-1.159V9.853c0-.227-.005-.438-.015-.636a2.859 2.859 0 0 0-.063-.5h.971c.07.11.106.411.106.902v1.348c0 .336.034.618.102.844.068.227.157.411.267.553.11.142.239.246.389.31.148.065.304.104.465.117V7.485h.941v5.306a.927.927 0 0 0 .523-.175c.155-.11.29-.26.402-.451.113-.191.199-.414.258-.669a3.84 3.84 0 0 0 .087-.849 6.62 6.62 0 0 0-.116-1.251 3.495 3.495 0 0 0-.106-.427 1.852 1.852 0 0 0-.098-.252h.941c.097.168.184.409.262.723.077.314.116.69.116 1.13 0 .355-.04.705-.121 1.047s-.21.653-.388.931c-.179.278-.412.506-.703.684s-.647.279-1.067.306v1.813h-.932v-1.812zM63.96 9.455c.058-.097.132-.195.223-.296a1.619 1.619 0 0 1 .757-.465 1.797 1.797 0 0 1 1.086.024c.193.065.371.175.533.33.161.155.292.362.393.621.101.259.15.582.15.97v3.443a10.561 10.561 0 0 0 .039.916c.013.139.032.257.058.354h-.989a1.008 1.008 0 0 1-.077-.291 4.838 4.838 0 0 1-.044-.426 16.57 16.57 0 0 1-.034-.988v-2.886c0-.181-.016-.349-.048-.504a1.287 1.287 0 0 0-.155-.407.738.738 0 0 0-.291-.271.954.954 0 0 0-.446-.097c-.246 0-.458.077-.636.232s-.299.335-.363.542a1.056 1.056 0 0 0-.059.387v2.787h-1.048v-3.366c0-.259-.01-.506-.028-.742a2.972 2.972 0 0 0-.107-.606h.922c.045.091.081.201.106.33.026.129.039.265.039.407h.019zM75.222 9.387c.245.188.437.433.572.737.136.304.203.618.203.941 0 .427-.066.797-.198 1.11a2.223 2.223 0 0 1-.52.771c-.213.2-.454.349-.723.446a2.399 2.399 0 0 1-.819.146c-.323 0-.623-.055-.897-.165s-.514-.27-.718-.48a2.27 2.27 0 0 1-.48-.761 2.759 2.759 0 0 1-.174-1.009c0-.388.058-.737.174-1.047a2.22 2.22 0 0 1 .495-.791c.213-.216.471-.383.771-.5.301-.116.632-.174.994-.174H76.413l-.048.786c-.11 0-.251-.003-.422-.01a30.85 30.85 0 0 1-.723-.039v.039zm-1.465 3.385a.963.963 0 0 0 .484-.126c.149-.084.278-.203.389-.355.109-.152.195-.332.257-.54a2.633 2.633 0 0 0 .025-1.278 1.774 1.774 0 0 0-.214-.535 1.277 1.277 0 0 0-.373-.394.948.948 0 0 0-.548-.156c-.221 0-.408.05-.563.151-.154.101-.282.23-.383.389s-.175.34-.223.545c-.049.204-.073.41-.073.617 0 .24.031.462.093.667.061.205.146.383.252.535s.234.271.383.355a.988.988 0 0 0 .494.125zM80.188 13.451a.857.857 0 0 1-.228.063 1.943 1.943 0 0 1-.306.024c-.427 0-.728-.125-.902-.374s-.262-.632-.262-1.149V9.532h-.466a4.097 4.097 0 0 0-.911.078l-.136-.621c.084-.065.228-.126.432-.185.203-.058.519-.087.945-.087h2.668l-.117.815h-1.367v2.435c0 .298.048.497.144.597.095.101.213.15.354.15h.104a.463.463 0 0 0 .097-.01l-.049.747zM86.601 11.036c0 .725-.207 1.319-.621 1.785-.434.479-1.009.718-1.727.718-.692 0-1.243-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.712-.698c.692 0 1.248.229 1.669.688.399.445.601 1.021.601 1.726zm-1.087.034c0-.435-.094-.808-.281-1.119-.22-.376-.533-.564-.94-.564-.421 0-.741.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .714-.191.94-.574.194-.318.291-.694.291-1.128z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/en-US/android.png b/browser/themes/shared/app-marketplace-icons/en-US/android.png
new file mode 100644
index 0000000000..ce3f0f4933
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/en-US/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/en-US/ios.svg b/browser/themes/shared/app-marketplace-icons/en-US/ios.svg
new file mode 100644
index 0000000000..e525da53e4
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/en-US/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M49.05 10.009c0 1.177-.353 2.063-1.058 2.658-.653.549-1.581.824-2.783.824-.596 0-1.106-.026-1.533-.078V6.982c.557-.09 1.157-.136 1.805-.136 1.145 0 2.008.249 2.59.747.652.563.979 1.368.979 2.416zm-1.105.029c0-.763-.202-1.348-.606-1.756-.404-.407-.994-.611-1.771-.611-.33 0-.611.022-.844.068v4.889c.129.02.365.029.708.029.802 0 1.421-.223 1.857-.669s.656-1.096.656-1.95zM54.909 11.037c0 .725-.207 1.319-.621 1.785-.434.479-1.009.718-1.727.718-.692 0-1.243-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.712-.698c.692 0 1.248.229 1.669.688.4.446.601 1.022.601 1.726zm-1.087.034c0-.435-.094-.808-.281-1.119-.22-.376-.533-.564-.94-.564-.421 0-.741.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .714-.191.94-.574.194-.317.291-.693.291-1.128zM62.765 8.719l-1.475 4.714h-.96l-.611-2.047a15.32 15.32 0 0 1-.379-1.523h-.019a11.15 11.15 0 0 1-.379 1.523l-.649 2.047h-.971l-1.387-4.714h1.077l.533 2.241c.129.53.235 1.035.32 1.513h.019c.078-.394.207-.896.389-1.503l.669-2.25h.854l.641 2.202c.155.537.281 1.054.378 1.552h.029c.071-.485.178-1.002.32-1.552l.572-2.202h1.029zM68.198 13.433H67.15v-2.7c0-.832-.316-1.248-.95-1.248a.946.946 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.737h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.44 0 .806.142 1.097.427.362.349.543.87.543 1.562v2.824zM71.088 13.433h-1.047V6.556h1.047v6.877zM77.258 11.037c0 .725-.207 1.319-.621 1.785-.434.479-1.01.718-1.727.718-.693 0-1.244-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.711-.698c.693 0 1.248.229 1.67.688.4.446.601 1.022.601 1.726zm-1.088.034c0-.435-.094-.808-.281-1.119-.219-.376-.533-.564-.939-.564-.422 0-.742.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .713-.191.939-.574.195-.317.291-.693.291-1.128zM82.33 13.433h-.941l-.078-.543h-.029c-.322.433-.781.65-1.377.65-.445 0-.805-.143-1.076-.427a1.339 1.339 0 0 1-.369-.96c0-.576.24-1.015.723-1.319.482-.304 1.16-.453 2.033-.446V10.3c0-.621-.326-.931-.979-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.232 0 1.85.65 1.85 1.95v1.736c0 .471.023.846.068 1.124zm-1.088-1.62v-.727c-1.156-.02-1.734.297-1.734.95 0 .246.066.43.201.553a.733.733 0 0 0 .512.184c.23 0 .445-.073.641-.218a.893.893 0 0 0 .38-.742zM88.285 13.433h-.93l-.049-.757h-.029c-.297.576-.803.864-1.514.864-.568 0-1.041-.223-1.416-.669s-.562-1.025-.562-1.736c0-.763.203-1.381.611-1.853.395-.44.879-.66 1.455-.66.633 0 1.076.213 1.328.64h.02V6.556h1.049v5.607c0 .459.012.882.037 1.27zm-1.086-1.988v-.786a1.194 1.194 0 0 0-.408-.965 1.03 1.03 0 0 0-.701-.257c-.391 0-.697.155-.922.466-.223.311-.336.708-.336 1.193 0 .466.107.844.322 1.135.227.31.533.465.916.465.344 0 .619-.129.828-.388.202-.239.301-.527.301-.863zM97.248 11.037c0 .725-.207 1.319-.621 1.785-.434.479-1.008.718-1.727.718-.691 0-1.242-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.713-.698c.691 0 1.248.229 1.668.688.4.446.601 1.022.601 1.726zm-1.086.034c0-.435-.094-.808-.281-1.119-.221-.376-.533-.564-.941-.564-.42 0-.74.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .715-.191.941-.574.193-.317.291-.693.291-1.128zM102.883 13.433h-1.047v-2.7c0-.832-.316-1.248-.951-1.248-.311 0-.562.114-.756.343s-.291.499-.291.808v2.796h-1.049v-3.366c0-.414-.012-.863-.037-1.349h.92l.049.737h.029a1.53 1.53 0 0 1 .543-.569c.285-.176.602-.265.951-.265.439 0 .805.142 1.096.427.363.349.543.87.543 1.562v2.824zM109.936 9.504h-1.154v2.29c0 .582.205.873.611.873.188 0 .344-.016.467-.049l.027.795c-.207.078-.479.117-.814.117-.414 0-.736-.126-.969-.378-.234-.252-.35-.676-.35-1.271V9.504h-.689v-.785h.689v-.864l1.027-.31v1.173h1.154v.786zM115.484 13.433h-1.049v-2.68c0-.845-.316-1.268-.949-1.268-.486 0-.818.245-1 .735a1.317 1.317 0 0 0-.049.377v2.835h-1.047V6.556h1.047v2.841h.02c.33-.517.803-.775 1.416-.775.434 0 .793.142 1.078.427.355.355.533.883.533 1.581v2.803zM121.207 10.853c0 .188-.014.346-.039.475h-3.143c.014.466.164.821.455 1.067.266.22.609.33 1.029.33.465 0 .889-.074 1.271-.223l.164.728c-.447.194-.973.291-1.582.291-.73 0-1.305-.215-1.721-.645-.418-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.406-.504.955-.756 1.648-.756.678 0 1.193.252 1.541.756.281.4.42.895.42 1.483zm-1-.271a1.411 1.411 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.995.995 0 0 0-.834.427 1.586 1.586 0 0 0-.311.815h2.182z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/es-ES/android.png b/browser/themes/shared/app-marketplace-icons/es-ES/android.png
new file mode 100644
index 0000000000..7589829d5d
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/es-ES/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/es-ES/ios.svg b/browser/themes/shared/app-marketplace-icons/es-ES/ios.svg
new file mode 100644
index 0000000000..8311e5e714
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/es-ES/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="m48.236 7.077-.233.837a2.914 2.914 0 0 0-1.241-.252c-.705 0-1.265.214-1.679.643-.439.448-.659 1.075-.659 1.879 0 .772.204 1.378.611 1.816.407.438.973.657 1.697.657.511 0 .94-.081 1.29-.243l.185.828c-.389.186-.941.278-1.659.278-.982 0-1.762-.288-2.338-.863-.595-.595-.892-1.403-.892-2.425 0-1.047.323-1.888.97-2.522.627-.607 1.438-.912 2.435-.912.658 0 1.163.093 1.513.279zM54.027 11.037c0 .725-.207 1.319-.621 1.785-.434.479-1.009.718-1.727.718-.692 0-1.243-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.712-.698c.692 0 1.248.229 1.669.688.4.446.601 1.022.601 1.726zm-1.087.034c0-.435-.094-.808-.281-1.119-.22-.376-.533-.564-.94-.564-.421 0-.741.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .714-.191.94-.574.194-.317.291-.693.291-1.128zM59.662 13.433h-1.048v-2.7c0-.832-.316-1.248-.95-1.248a.946.946 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.739h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.44 0 .806.142 1.097.427.362.349.543.87.543 1.562v2.822zM64.386 12.079c0 .438-.161.79-.484 1.055s-.77.397-1.339.397c-.537 0-.992-.107-1.367-.32l.223-.776c.362.22.747.33 1.154.33.537 0 .805-.197.805-.592a.58.58 0 0 0-.174-.432c-.117-.113-.324-.225-.621-.334-.841-.311-1.261-.763-1.261-1.358a1.3 1.3 0 0 1 .465-1.019c.311-.271.722-.407 1.232-.407.466 0 .863.095 1.193.285l-.223.752a1.848 1.848 0 0 0-.96-.271c-.22 0-.392.052-.515.155a.498.498 0 0 0-.184.397c0 .161.064.293.193.396.11.097.323.203.641.319.815.31 1.222.784 1.222 1.423zM66.996 13.433h-1.048V8.719h1.048v4.714zm.902-6.693-1.174 1.406h-.728l.834-1.406h1.068zM72.99 8.719c-.027.382-.039.828-.039 1.339v2.696c0 1.015-.227 1.727-.68 2.134-.414.375-.996.562-1.746.562-.652 0-1.18-.123-1.581-.369l.243-.805c.395.239.84.359 1.338.359.926 0 1.387-.498 1.387-1.494v-.456h-.02c-.291.479-.752.718-1.387.718a1.765 1.765 0 0 1-1.406-.65c-.369-.433-.552-.983-.552-1.649 0-.756.213-1.368.64-1.833.395-.433.875-.65 1.445-.65.641 0 1.1.249 1.377.747h.02l.039-.65h.922zm-1.088 2.697v-.834c0-.317-.098-.588-.297-.815-.197-.227-.459-.339-.783-.339-.357 0-.652.148-.883.446-.23.298-.346.695-.346 1.193 0 .453.107.818.322 1.096.221.304.523.456.906.456.232 0 .443-.069.627-.208.186-.139.318-.328.395-.567.04-.118.059-.261.059-.428zM78.887 13.433h-.922l-.059-.718h-.02c-.33.55-.828.825-1.494.825-.465 0-.836-.146-1.115-.437-.33-.356-.494-.893-.494-1.61V8.719h1.047v2.6c0 .906.311 1.358.932 1.358.467 0 .789-.226.971-.679.045-.116.068-.249.068-.398V8.719h1.047v3.356c0 .446.013.899.039 1.358zM84.592 10.853c0 .188-.014.346-.039.475H81.41c.012.466.164.821.455 1.067.266.22.607.33 1.027.33.467 0 .891-.074 1.271-.223l.164.728c-.445.194-.973.291-1.58.291-.73 0-1.305-.215-1.723-.645-.416-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.408-.504.957-.756 1.648-.756.68 0 1.193.252 1.543.756.279.4.42.895.42 1.483zm-1-.271a1.435 1.435 0 0 0-.203-.805c-.182-.292-.459-.437-.834-.437a.998.998 0 0 0-.836.427 1.567 1.567 0 0 0-.309.815h2.182zM87.16 13.433h-1.047V6.556h1.047v6.877zM93.33 11.037c0 .725-.207 1.319-.621 1.785-.434.479-1.01.718-1.727.718-.693 0-1.244-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.711-.698c.693 0 1.248.229 1.67.688.4.446.601 1.022.601 1.726zm-1.088.034c0-.435-.094-.808-.281-1.119-.219-.376-.533-.564-.939-.564-.422 0-.742.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .713-.191.939-.574.195-.317.291-.693.291-1.128zM101.584 10.853c0 .188-.014.346-.039.475h-3.143c.014.466.164.821.455 1.067.266.22.609.33 1.029.33.465 0 .889-.074 1.271-.223l.164.728c-.447.194-.973.291-1.582.291-.73 0-1.305-.215-1.721-.645-.418-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.406-.504.955-.756 1.648-.756.678 0 1.193.252 1.541.756.281.4.42.895.42 1.483zm-1-.271a1.411 1.411 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.995.995 0 0 0-.834.427 1.586 1.586 0 0 0-.311.815h2.182zM107.199 13.433h-1.047v-2.7c0-.832-.316-1.248-.951-1.248-.311 0-.562.114-.756.343s-.291.499-.291.808v2.796h-1.049v-3.366c0-.414-.012-.863-.037-1.349h.92l.049.737h.029a1.53 1.53 0 0 1 .543-.569c.285-.176.602-.265.951-.265.439 0 .805.142 1.096.427.363.349.543.87.543 1.562v2.824zM115.756 10.853c0 .188-.014.346-.039.475h-3.143c.012.466.164.821.455 1.067.266.22.607.33 1.027.33.467 0 .891-.074 1.271-.223l.164.728c-.445.194-.973.291-1.58.291-.73 0-1.305-.215-1.723-.645-.416-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.408-.504.957-.756 1.648-.756.68 0 1.193.252 1.543.756.279.4.42.895.42 1.483zm-1-.271a1.435 1.435 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.998.998 0 0 0-.836.427 1.567 1.567 0 0 0-.309.815h2.182zM118.326 13.433h-1.049V6.556h1.049v6.877z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/et/android.png b/browser/themes/shared/app-marketplace-icons/et/android.png
new file mode 100644
index 0000000000..1a65656d60
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/et/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/et/ios.svg b/browser/themes/shared/app-marketplace-icons/et/ios.svg
new file mode 100644
index 0000000000..da2884ae78
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/et/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M51.191 30.648h-1.744l-.956-3.003H45.17l-.91 3.003h-1.699l3.291-10.222h2.033l3.306 10.222zm-2.988-4.261-.865-2.669c-.091-.273-.263-.915-.516-1.927h-.03a78.645 78.645 0 0 1-.485 1.927l-.849 2.669h2.745zM59.653 26.872c0 1.254-.339 2.244-1.016 2.973-.606.647-1.36.971-2.26.971-.971 0-1.668-.349-2.093-1.047h-.03v3.883h-1.638v-7.947c0-.788-.021-1.598-.061-2.427h1.441l.091 1.168h.03c.546-.88 1.375-1.319 2.487-1.319.87 0 1.595.344 2.176 1.031s.873 1.592.873 2.714zm-1.668.061c0-.718-.162-1.31-.485-1.774-.354-.485-.83-.728-1.426-.728-.405 0-.771.134-1.1.401a1.868 1.868 0 0 0-.645 1.055 2.124 2.124 0 0 0-.076.5v1.229c0 .536.164.988.493 1.357s.756.554 1.282.554c.617 0 1.097-.237 1.44-.713s.517-1.103.517-1.881zM68.131 26.872c0 1.254-.339 2.244-1.016 2.973-.606.647-1.36.971-2.26.971-.971 0-1.668-.349-2.093-1.047h-.03v3.883h-1.638v-7.947c0-.788-.021-1.598-.061-2.427h1.441l.091 1.168h.03c.546-.88 1.375-1.319 2.487-1.319.87 0 1.595.344 2.176 1.031s.873 1.592.873 2.714zm-1.668.061c0-.718-.162-1.31-.485-1.774-.354-.485-.83-.728-1.426-.728-.405 0-.771.134-1.1.401a1.868 1.868 0 0 0-.645 1.055 2.124 2.124 0 0 0-.076.5v1.229c0 .536.164.988.493 1.357s.756.554 1.282.554c.617 0 1.097-.237 1.44-.713s.517-1.103.517-1.881zM77.611 27.782c0 .869-.303 1.577-.908 2.123-.666.597-1.594.895-2.785.895-1.1 0-1.982-.212-2.648-.637l.379-1.365a4.477 4.477 0 0 0 2.367.652c.617 0 1.098-.139 1.441-.418.344-.278.516-.65.516-1.116 0-.415-.143-.765-.424-1.048-.283-.284-.754-.547-1.412-.79-1.789-.669-2.684-1.646-2.684-2.933 0-.84.312-1.528.939-2.065s1.461-.805 2.504-.805c.93 0 1.703.162 2.32.485l-.41 1.335c-.576-.313-1.229-.47-1.957-.47-.576 0-1.025.142-1.35.424a1.22 1.22 0 0 0-.408.926c0 .404.156.738.469 1.001.273.242.77.506 1.486.788.881.354 1.527.769 1.941 1.244.417.475.624 1.066.624 1.774zM83.023 24.506h-1.805v3.579c0 .91.318 1.365.955 1.365.293 0 .537-.025.729-.076l.045 1.244c-.322.121-.748.182-1.273.182-.646 0-1.152-.197-1.516-.591-.365-.395-.547-1.057-.547-1.987v-3.716h-1.076v-1.229h1.076v-1.35l1.607-.485v1.835h1.805v1.229zM91.168 26.902c0 1.133-.322 2.062-.969 2.791-.678.748-1.578 1.122-2.701 1.122-1.082 0-1.943-.359-2.586-1.077-.641-.718-.963-1.623-.963-2.715 0-1.143.332-2.077.994-2.806.662-.728 1.555-1.092 2.676-1.092 1.082 0 1.951.359 2.609 1.077.627.698.94 1.599.94 2.7zm-1.697.053c0-.679-.146-1.262-.439-1.749-.344-.588-.834-.882-1.473-.882-.656 0-1.156.294-1.5.882-.295.487-.441 1.08-.441 1.779 0 .68.146 1.263.441 1.75.354.588.848.882 1.486.882.627 0 1.117-.299 1.471-.897.302-.497.455-1.085.455-1.765zM96.492 24.719a2.83 2.83 0 0 0-.516-.046c-.576 0-1.021.218-1.334.652-.273.384-.41.869-.41 1.456v3.867h-1.639l.016-5.051c0-.849-.02-1.622-.061-2.32h1.426l.061 1.411h.045c.172-.485.445-.875.82-1.168a1.976 1.976 0 0 1 1.182-.395c.152 0 .289.01.41.03v1.564zM103.816 26.614c0 .293-.02.541-.061.743h-4.914c.021.728.258 1.284.713 1.668.416.344.951.516 1.607.516.729 0 1.391-.116 1.988-.349l.258 1.138c-.699.303-1.523.455-2.473.455-1.143 0-2.039-.336-2.691-1.009-.652-.672-.979-1.574-.979-2.707 0-1.112.303-2.037.91-2.775.637-.789 1.496-1.184 2.578-1.184 1.061 0 1.865.395 2.41 1.184.438.627.654 1.4.654 2.32zm-1.56-.425c.01-.485-.098-.904-.32-1.259-.283-.455-.717-.683-1.303-.683-.537 0-.971.223-1.305.668a2.44 2.44 0 0 0-.486 1.273h3.414zM107.23 20.153c-.436 1.527-.951 2.78-1.547 3.762l-1.016.105c.443-1.213.764-2.452.955-3.715l1.608-.152zM110.658 21.078a.94.94 0 0 1-.289.713c-.191.183-.439.273-.742.273a.955.955 0 0 1-.97-.986c0-.283.096-.515.287-.697s.43-.273.713-.273.521.091.713.273.288.414.288.697zm-.183 9.57h-1.637v-7.371h1.637v7.371zM117.27 28.53c0 .687-.252 1.236-.758 1.649-.506.414-1.203.62-2.094.62-.84 0-1.553-.167-2.139-.5l.35-1.214a3.42 3.42 0 0 0 1.805.516c.84 0 1.258-.308 1.258-.925a.905.905 0 0 0-.271-.675c-.184-.177-.506-.352-.971-.523-1.314-.485-1.973-1.192-1.973-2.123 0-.637.242-1.168.729-1.593.484-.425 1.127-.637 1.926-.637.729 0 1.35.148 1.865.445l-.348 1.178a2.899 2.899 0 0 0-1.502-.425c-.344 0-.611.081-.805.242-.191.161-.287.368-.287.62s.102.459.303.62c.172.151.506.318 1.002.499 1.273.486 1.91 1.228 1.91 2.226zM122.805 24.506H121v3.579c0 .91.318 1.365.955 1.365.293 0 .537-.025.729-.076l.045 1.244c-.322.121-.748.182-1.273.182-.646 0-1.152-.197-1.516-.591-.365-.395-.547-1.057-.547-1.987v-3.716h-1.076v-1.229h1.076v-1.35l1.607-.485v1.835h1.805v1.229z"/></g><g fill="#FFF"><path d="M47.391 15.6h-3.715V9.062h1.048v5.655h2.667v.883zM52.329 15.6h-.941l-.077-.543h-.029c-.323.433-.782.65-1.377.65-.446 0-.806-.143-1.077-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446v-.087c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c-.002.47.022.845.067 1.123zm-1.087-1.62v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.73.73 0 0 0 .511.184c.231 0 .445-.073.642-.218a.889.889 0 0 0 .38-.742zM57.625 15.6h-.941l-.077-.543h-.029c-.323.433-.782.65-1.377.65-.446 0-.806-.143-1.077-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446v-.087c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c-.002.47.022.845.067 1.123zm-1.087-1.62v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.73.73 0 0 0 .511.184c.231 0 .445-.073.642-.218a.889.889 0 0 0 .38-.742zM63.581 15.6h-.931l-.049-.757h-.029c-.297.576-.802.864-1.513.864-.569 0-1.041-.223-1.416-.669s-.562-1.025-.562-1.736c0-.763.203-1.381.61-1.853.395-.44.88-.66 1.455-.66.634 0 1.077.213 1.329.64h.02V8.723h1.048v5.607c-.001.459.012.882.038 1.27zm-1.086-1.988v-.786a1.189 1.189 0 0 0-.409-.965 1.028 1.028 0 0 0-.701-.257c-.39 0-.696.155-.921.466-.224.311-.336.708-.336 1.193 0 .466.107.844.322 1.135.227.31.532.465.915.465.344 0 .62-.129.828-.388.201-.239.302-.527.302-.863zM66.568 9.479a.603.603 0 0 1-.184.456.661.661 0 0 1-.476.175.611.611 0 0 1-.621-.63c0-.181.062-.33.185-.446s.274-.175.456-.175a.64.64 0 0 1 .456.175.586.586 0 0 1 .184.445zm-.116 6.121h-1.048v-4.714h1.048V15.6zM74.676 15.6h-.941l-.076-.543h-.029c-.324.433-.783.65-1.377.65-.447 0-.807-.143-1.078-.427a1.337 1.337 0 0 1-.367-.96c0-.576.24-1.015.723-1.319.48-.304 1.158-.453 2.031-.446v-.087c0-.621-.326-.931-.977-.931-.465 0-.875.117-1.23.349l-.213-.688c.439-.271.979-.407 1.617-.407 1.234 0 1.85.65 1.85 1.95v1.736c-.002.47.022.845.067 1.123zm-1.086-1.62v-.727c-1.158-.02-1.736.297-1.736.95 0 .246.068.43.203.553a.728.728 0 0 0 .51.184c.232 0 .445-.073.643-.218a.898.898 0 0 0 .38-.742zM77.49 15.6h-1.049V8.723h1.049V15.6zM80.398 15.6h-1.047V8.723h1.047V15.6zM85.791 15.6h-.941l-.076-.543h-.029c-.324.433-.783.65-1.377.65-.447 0-.807-.143-1.078-.427a1.337 1.337 0 0 1-.367-.96c0-.576.24-1.015.723-1.319.48-.304 1.158-.453 2.031-.446v-.087c0-.621-.326-.931-.977-.931-.465 0-.875.117-1.23.349l-.213-.688c.439-.271.979-.407 1.617-.407 1.234 0 1.85.65 1.85 1.95v1.736c-.001.47.022.845.067 1.123zm-1.086-1.62v-.727c-1.158-.02-1.736.297-1.736.95 0 .246.068.43.203.553a.728.728 0 0 0 .51.184c.232 0 .445-.073.643-.218a.898.898 0 0 0 .38-.742z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/eu/android.png b/browser/themes/shared/app-marketplace-icons/eu/android.png
new file mode 100644
index 0000000000..db991b0ca8
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/eu/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/fa/android.png b/browser/themes/shared/app-marketplace-icons/fa/android.png
new file mode 100644
index 0000000000..086832e42a
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/fa/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/fi/android.png b/browser/themes/shared/app-marketplace-icons/fi/android.png
new file mode 100644
index 0000000000..ce3f0f4933
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/fi/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/fi/ios.svg b/browser/themes/shared/app-marketplace-icons/fi/ios.svg
new file mode 100644
index 0000000000..b843470b72
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/fi/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M51.143 31.516h-1.748l-.958-3.01h-3.329l-.912 3.01h-1.702l3.298-10.246h2.037l3.314 10.246zm-2.995-4.272-.866-2.676c-.091-.273-.264-.916-.517-1.93h-.03a86.938 86.938 0 0 1-.486 1.93l-.851 2.676h2.75zM59.608 27.73c0 1.256-.341 2.25-1.024 2.979-.612.648-1.371.973-2.278.973-.979 0-1.682-.35-2.109-1.049v3.877h-1.642v-7.953c0-.789-.021-1.6-.061-2.428h1.444l.091 1.17h.031c.547-.883 1.378-1.322 2.493-1.322.871 0 1.598.344 2.181 1.033s.874 1.595.874 2.72zm-1.671.061c0-.719-.163-1.312-.486-1.777-.355-.488-.831-.73-1.429-.73a1.71 1.71 0 0 0-1.102.402c-.329.27-.544.621-.646 1.057a2.146 2.146 0 0 0-.076.502v1.23c0 .537.165.99.494 1.361.329.369.757.555 1.284.555.618 0 1.1-.238 1.444-.715.344-.477.517-1.104.517-1.885zM68.105 27.73c0 1.256-.341 2.25-1.024 2.979-.612.648-1.371.973-2.278.973-.979 0-1.682-.35-2.109-1.049v3.877h-1.642v-7.953c0-.789-.021-1.6-.061-2.428h1.444l.091 1.17h.031c.547-.883 1.378-1.322 2.493-1.322.871 0 1.598.344 2.181 1.033.582.689.874 1.595.874 2.72zm-1.672.061c0-.719-.163-1.312-.486-1.777-.355-.488-.831-.73-1.429-.73a1.71 1.71 0 0 0-1.102.402c-.329.27-.544.621-.646 1.057a2.146 2.146 0 0 0-.076.502v1.23c0 .537.165.99.494 1.361.329.369.757.555 1.284.555.618 0 1.1-.238 1.444-.715.345-.477.517-1.104.517-1.885zM77.605 28.643c0 .871-.304 1.58-.91 2.127-.667.6-1.598.898-2.79.898-1.103 0-1.986-.213-2.653-.639l.38-1.369c.719.426 1.51.639 2.371.639.618 0 1.1-.139 1.443-.418.345-.277.518-.65.518-1.117 0-.416-.143-.766-.426-1.049-.284-.283-.755-.547-1.414-.791-1.793-.668-2.69-1.646-2.69-2.934 0-.84.317-1.529.95-2.066.634-.537 1.472-.805 2.516-.805.933 0 1.708.162 2.326.486l-.412 1.336c-.58-.312-1.236-.471-1.969-.471-.579 0-1.032.143-1.357.426a1.217 1.217 0 0 0-.412.928c0 .404.157.74.472 1.002.273.244.77.508 1.489.791.882.355 1.53.771 1.946 1.246.414.477.622 1.071.622 1.78zM83.046 25.359h-1.809v3.588c0 .91.319 1.367.958 1.367.294 0 .537-.025.729-.076l.046 1.246c-.325.121-.751.184-1.277.184-.648 0-1.155-.199-1.52-.594-.365-.395-.548-1.059-.548-1.99v-3.725h-1.079v-1.23h1.079v-1.354l1.611-.486v1.84h1.809v1.23zM91.193 27.76c0 1.137-.324 2.068-.973 2.797-.679.75-1.581 1.125-2.706 1.125-1.084 0-1.947-.359-2.591-1.078-.644-.721-.966-1.627-.966-2.721 0-1.145.332-2.082.996-2.812.663-.73 1.558-1.094 2.683-1.094 1.084 0 1.956.359 2.614 1.078.629.699.943 1.601.943 2.705zm-1.702.039c0-.678-.147-1.258-.44-1.742-.345-.586-.837-.881-1.475-.881-.659 0-1.161.295-1.505.881-.294.484-.441 1.076-.441 1.773 0 .676.147 1.258.441 1.742.354.586.851.879 1.489.879.628 0 1.12-.299 1.475-.895.304-.494.456-1.079.456-1.757zM96.529 25.572a2.764 2.764 0 0 0-.518-.047c-.577 0-1.023.219-1.337.654-.274.385-.411.871-.411 1.459v3.877h-1.642v-5.062c0-.852-.015-1.627-.045-2.324h1.429l.061 1.412h.046c.172-.486.445-.875.82-1.17.365-.264.76-.395 1.186-.395.152 0 .289.01.411.029v1.567zM103.869 27.473c0 .293-.021.541-.061.744h-4.925c.021.73.259 1.287.715 1.672.415.344.952.518 1.61.518.73 0 1.394-.117 1.991-.35l.259 1.139c-.699.305-1.525.457-2.478.457-1.146 0-2.044-.338-2.698-1.012-.653-.674-.98-1.578-.98-2.713 0-1.115.305-2.041.912-2.781.639-.791 1.5-1.186 2.584-1.186 1.064 0 1.87.395 2.417 1.186.436.628.654 1.404.654 2.326zm-1.565-.426c.01-.486-.097-.908-.319-1.262-.283-.457-.72-.684-1.307-.684-.537 0-.973.223-1.308.668a2.453 2.453 0 0 0-.486 1.277h3.42zM110.057 29.387c0 .689-.253 1.242-.76 1.656-.507.416-1.206.625-2.098.625-.841 0-1.556-.168-2.144-.502l.35-1.217a3.418 3.418 0 0 0 1.81.518c.841 0 1.261-.309 1.261-.928 0-.273-.091-.498-.273-.676s-.507-.352-.973-.525c-1.317-.486-1.976-1.195-1.976-2.127 0-.639.243-1.172.729-1.596.486-.426 1.13-.639 1.931-.639.729 0 1.353.146 1.869.439l-.35 1.172a2.89 2.89 0 0 0-1.505-.426c-.345 0-.613.08-.806.242s-.289.371-.289.623c0 .254.102.461.305.623.172.152.506.32 1.003.502 1.277.488 1.916 1.234 1.916 2.236zM115.619 25.359h-1.809v3.588c0 .91.319 1.367.958 1.367.294 0 .537-.025.729-.076l.046 1.246c-.325.121-.751.184-1.277.184-.648 0-1.155-.199-1.52-.594-.365-.395-.548-1.059-.548-1.99v-3.725h-1.079v-1.23h1.079v-1.354l1.611-.486v1.84h1.809v1.23zM122.81 31.516h-1.475l-.122-.852h-.045c-.507.68-1.227 1.018-2.159 1.018-.699 0-1.262-.223-1.687-.668-.386-.406-.578-.906-.578-1.506 0-.9.378-1.59 1.133-2.066s1.816-.709 3.185-.699v-.137c0-.973-.512-1.459-1.535-1.459-.73 0-1.374.182-1.931.547l-.335-1.078c.689-.426 1.535-.639 2.539-.639 1.936 0 2.903 1.018 2.903 3.055v2.721c0 .739.035 1.327.107 1.763zm-1.704-2.539v-1.141c-1.813-.029-2.721.467-2.721 1.49 0 .385.105.674.317.867.212.191.479.289.802.289a1.65 1.65 0 0 0 1.005-.344 1.39 1.39 0 0 0 .566-.873c.022-.081.031-.177.031-.288z"/></g><g fill="#FFF"><path d="M47.394 16.216h-3.717V9.675h1.048v5.658h2.669v.883zM51.389 16.216l-.077-.543h-.029c-.32.437-.786.65-1.378.65-.845 0-1.446-.592-1.446-1.388 0-1.164 1.009-1.766 2.756-1.766v-.087c0-.621-.33-.932-.98-.932-.465 0-.873.117-1.232.35l-.213-.689c.437-.272.98-.408 1.62-.408 1.232 0 1.854.65 1.854 1.951v1.737c0 .476.02.845.068 1.126h-.943zm-.145-2.348c-1.164 0-1.747.282-1.747.951 0 .495.301.737.719.737.533 0 1.028-.407 1.028-.96v-.728zM56.471 12.286h-1.154v2.29c0 .583.204.874.611.874.185 0 .34-.02.466-.049l.029.796c-.204.078-.476.117-.815.117-.825 0-1.319-.456-1.319-1.65v-2.377H53.6V11.5h.689v-.864l1.028-.311V11.5h1.154v.786zM60.517 16.216l-.077-.543h-.029c-.32.437-.786.65-1.378.65-.845 0-1.446-.592-1.446-1.388 0-1.164 1.009-1.766 2.756-1.766v-.087c0-.621-.33-.932-.979-.932-.467 0-.874.117-1.233.35l-.213-.689c.437-.272.979-.408 1.62-.408 1.232 0 1.854.65 1.854 1.951v1.737c0 .476.02.845.068 1.126h-.943zm-.145-2.348c-1.165 0-1.747.282-1.747.951 0 .495.301.737.719.737.533 0 1.028-.407 1.028-.96v-.728zM65.813 16.216l-.077-.543h-.029c-.32.437-.786.65-1.378.65-.845 0-1.446-.592-1.446-1.388 0-1.164 1.009-1.766 2.756-1.766v-.087c0-.621-.33-.932-.98-.932-.465 0-.873.117-1.232.35l-.213-.689c.437-.272.98-.408 1.62-.408 1.232 0 1.854.65 1.854 1.951v1.737c0 .476.02.845.068 1.126h-.943zm-.146-2.348c-1.164 0-1.747.282-1.747.951 0 .495.301.737.719.737.533 0 1.028-.407 1.028-.96v-.728z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/fr/android.png b/browser/themes/shared/app-marketplace-icons/fr/android.png
new file mode 100644
index 0000000000..7b8372b203
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/fr/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/fr/ios.svg b/browser/themes/shared/app-marketplace-icons/fr/ios.svg
new file mode 100644
index 0000000000..676e7cbc86
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/fr/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.229 40H4.76C2.153 40 0 37.872 0 35.267V4.726C0 2.12 2.153 0 4.76 0h125.468C132.834 0 135 2.12 135 4.726v30.541c0 2.605-2.166 4.733-4.771 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.159 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.04-.014-3.387-1.291-3.42-5.154zM26.959 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.848.874-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M45.175 31.504h-1.944V18.742h1.944v12.762zM50.251 19.048c-.516 1.812-1.128 3.3-1.836 4.464l-1.206.126a22.68 22.68 0 0 0 1.134-4.41l1.908-.18zM59.773 31.504h-2.07l-1.134-3.563h-3.942l-1.08 3.563h-2.016l3.906-12.132h2.412l3.924 12.132zm-3.546-5.059-1.026-3.168c-.108-.323-.312-1.086-.612-2.286h-.036c-.12.516-.312 1.278-.576 2.286l-1.008 3.168h3.258zM69.816 27.021c0 1.488-.402 2.664-1.207 3.528-.72.769-1.614 1.152-2.682 1.152-1.152 0-1.98-.414-2.484-1.242h-.036v4.608h-1.944v-9.433a59.1 59.1 0 0 0-.072-2.88h1.71l.108 1.387h.036c.648-1.045 1.632-1.566 2.952-1.566 1.032 0 1.893.408 2.583 1.224.691.817 1.036 1.89 1.036 3.222zm-1.98.073c0-.852-.192-1.554-.576-2.105-.42-.576-.984-.864-1.692-.864-.48 0-.916.159-1.305.478-.39.317-.645.734-.765 1.25-.06.24-.09.438-.09.594v1.458c0 .637.195 1.174.585 1.611.39.438.897.657 1.521.657.732 0 1.302-.282 1.71-.846.408-.565.612-1.308.612-2.233zM79.879 27.021c0 1.488-.402 2.664-1.207 3.528-.719.769-1.613 1.152-2.682 1.152-1.152 0-1.98-.414-2.484-1.242h-.035v4.608h-1.945v-9.433c0-.937-.023-1.896-.07-2.88h1.709l.107 1.387h.037c.648-1.045 1.631-1.566 2.951-1.566 1.033 0 1.893.408 2.584 1.224.689.817 1.035 1.89 1.035 3.222zm-1.981.073c0-.852-.191-1.554-.576-2.105-.42-.576-.984-.864-1.691-.864-.48 0-.916.159-1.305.478a2.2 2.2 0 0 0-.766 1.25c-.061.24-.09.438-.09.594v1.458c0 .637.195 1.174.584 1.611.391.438.898.657 1.521.657.732 0 1.303-.282 1.711-.846.407-.565.612-1.308.612-2.233zM91.127 28.103c0 1.031-.359 1.871-1.076 2.52-.791.708-1.893 1.062-3.305 1.062-1.307 0-2.354-.252-3.145-.756l.449-1.62a5.313 5.313 0 0 0 2.809.774c.732 0 1.303-.165 1.711-.496.408-.33.613-.772.613-1.325 0-.493-.168-.907-.504-1.244-.336-.336-.895-.649-1.674-.938-2.125-.793-3.188-1.953-3.188-3.479 0-.998.373-1.815 1.117-2.452s1.734-.956 2.971-.956c1.104 0 2.021.192 2.754.576l-.486 1.583c-.684-.372-1.459-.558-2.322-.558-.684 0-1.219.168-1.602.504a1.44 1.44 0 0 0-.486 1.099c0 .479.186.875.559 1.188.322.288.91.6 1.764.936 1.043.42 1.811.912 2.303 1.477s.738 1.264.738 2.105zM97.553 24.214h-2.141v4.248c0 1.08.377 1.62 1.133 1.62.348 0 .637-.03.865-.09l.053 1.476c-.383.145-.887.216-1.512.216-.768 0-1.367-.233-1.799-.702-.434-.468-.648-1.253-.648-2.357v-4.41h-1.279v-1.458h1.279v-1.602l1.908-.576v2.178h2.141v1.457zM107.219 27.059c0 1.343-.385 2.447-1.152 3.312-.805.888-1.871 1.332-3.203 1.332-1.285 0-2.309-.426-3.07-1.278-.762-.852-1.143-1.926-1.143-3.222 0-1.356.393-2.466 1.18-3.33.785-.864 1.844-1.296 3.176-1.296 1.285 0 2.316.426 3.096 1.277.743.828 1.116 1.896 1.116 3.205zm-2.016.062c0-.807-.174-1.498-.523-2.076-.408-.697-.988-1.047-1.746-1.047-.779 0-1.373.35-1.781 1.047-.348.578-.521 1.281-.521 2.111 0 .808.174 1.499.521 2.076.42.698 1.008 1.048 1.764 1.048.744 0 1.326-.355 1.746-1.065.358-.59.54-1.288.54-2.094zM113.535 24.466a3.3 3.3 0 0 0-.611-.054c-.684 0-1.213.258-1.584.773-.324.457-.486 1.033-.486 1.729v4.59h-1.943l.018-5.994c0-1.008-.023-1.926-.072-2.754h1.693l.07 1.674h.055c.205-.576.527-1.037.973-1.386a2.35 2.35 0 0 1 1.404-.468c.18 0 .342.012.484.035v1.855zM122.23 26.716c0 .349-.025.642-.072.882h-5.832c.023.864.307 1.524.846 1.98.492.408 1.129.611 1.908.611.863 0 1.65-.138 2.357-.413l.307 1.35c-.828.36-1.807.54-2.934.54-1.357 0-2.422-.398-3.195-1.197-.773-.798-1.16-1.869-1.16-3.213 0-1.32.359-2.418 1.078-3.294.758-.937 1.777-1.403 3.061-1.403 1.26 0 2.215.467 2.863 1.403.516.744.773 1.662.773 2.754zm-1.853-.504c.012-.576-.115-1.073-.379-1.494-.336-.54-.852-.81-1.549-.81-.635 0-1.15.264-1.547.791-.324.421-.516.925-.576 1.513h4.051z"/></g><g fill="#FFF"><path d="M47.84 7.778h-1.872v5.655H44.92V7.778h-1.862v-.882h4.782v.882zM52.981 10.853c0 .188-.014.346-.039.475h-3.143c.013.466.164.821.455 1.067.266.22.608.33 1.028.33.466 0 .89-.074 1.271-.223l.164.728c-.446.194-.973.291-1.581.291-.73 0-1.305-.215-1.722-.645s-.625-1.007-.625-1.731c0-.711.193-1.303.582-1.775.407-.504.956-.756 1.648-.756.679 0 1.193.252 1.542.756.28.4.42.895.42 1.483zm-1-.271a1.427 1.427 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.997.997 0 0 0-.835.427 1.577 1.577 0 0 0-.31.815h2.182zm.428-3.842-1.174 1.406h-.728l.844-1.406h1.058zM55.55 13.433h-1.048V6.556h1.048v6.877zM61.293 10.853c0 .188-.014.346-.039.475h-3.143c.013.466.164.821.455 1.067.266.22.608.33 1.028.33.466 0 .89-.074 1.271-.223l.164.728c-.446.194-.973.291-1.581.291-.73 0-1.305-.215-1.722-.645s-.625-1.007-.625-1.731c0-.711.193-1.303.582-1.775.407-.504.956-.756 1.648-.756.679 0 1.193.252 1.542.756.281.4.42.895.42 1.483zm-1-.271a1.427 1.427 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.997.997 0 0 0-.835.427 1.577 1.577 0 0 0-.31.815h2.182zm.428-3.842-1.174 1.406h-.727l.844-1.406h1.057zM66.181 8.845l-.203.795a2.062 2.062 0 0 0-.912-.194c-.459 0-.823.154-1.092.461-.268.307-.402.697-.402 1.169 0 .498.141.892.422 1.183s.639.437 1.072.437c.323 0 .64-.064.95-.194l.146.786c-.343.162-.775.243-1.3.243-.718 0-1.29-.218-1.717-.655s-.64-1.02-.64-1.751c0-.73.229-1.331.688-1.799s1.076-.703 1.853-.703c.44-.001.819.073 1.135.222zM71.709 13.433h-1.047v-2.68c0-.845-.316-1.268-.951-1.268-.484 0-.818.245-.999.735a1.283 1.283 0 0 0-.049.377v2.835h-1.048V6.556h1.048v2.841h.02c.331-.517.801-.775 1.417-.775.434 0 .791.142 1.076.427.355.355.533.883.533 1.581v2.803zM77.084 13.433h-.941l-.078-.543h-.029c-.322.433-.781.65-1.377.65-.445 0-.805-.143-1.076-.427a1.339 1.339 0 0 1-.369-.96c0-.576.24-1.015.723-1.319.482-.304 1.16-.453 2.033-.446V10.3c0-.621-.326-.931-.979-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.232 0 1.85.65 1.85 1.95v1.736c0 .471.023.846.068 1.124zm-1.088-1.62v-.727c-1.156-.02-1.734.297-1.734.95 0 .246.066.43.201.553a.733.733 0 0 0 .512.184c.23 0 .445-.073.641-.218a.893.893 0 0 0 .38-.742zM81.342 9.641a1.74 1.74 0 0 0-.33-.029c-.367 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474H78.85l.01-3.23c0-.543-.014-1.038-.039-1.484h.912l.039.902h.029c.109-.311.283-.56.523-.747.232-.168.484-.252.756-.252.098 0 .186.006.262.019v.999zM86.812 8.719c-.025.382-.039.828-.039 1.339v2.696c0 1.015-.227 1.727-.678 2.134-.414.375-.996.562-1.746.562-.654 0-1.182-.123-1.582-.369l.242-.805c.395.239.842.359 1.34.359.924 0 1.387-.498 1.387-1.494v-.456h-.02c-.291.479-.754.718-1.387.718a1.76 1.76 0 0 1-1.406-.65c-.369-.433-.553-.983-.553-1.649 0-.756.213-1.368.639-1.833.395-.433.877-.65 1.445-.65.641 0 1.1.249 1.379.747h.018l.039-.65h.922zm-1.085 2.697v-.834c0-.317-.1-.588-.297-.815-.199-.227-.459-.339-.785-.339-.357 0-.65.148-.881.446-.23.298-.346.695-.346 1.193 0 .453.107.818.322 1.096.219.304.521.456.904.456.234 0 .443-.069.629-.208.186-.139.316-.328.395-.567.039-.118.059-.261.059-.428zM92.516 10.853c0 .188-.014.346-.039.475h-3.143c.014.466.164.821.455 1.067.266.22.609.33 1.029.33.465 0 .889-.074 1.271-.223l.164.728c-.447.194-.973.291-1.582.291-.73 0-1.305-.215-1.721-.645-.418-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.406-.504.955-.756 1.648-.756.678 0 1.193.252 1.541.756.281.4.42.895.42 1.483zm-1-.271a1.411 1.411 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.995.995 0 0 0-.834.427 1.586 1.586 0 0 0-.311.815h2.182zM96.531 9.641a1.74 1.74 0 0 0-.33-.029c-.369 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474h-1.049l.01-3.23c0-.543-.012-1.038-.037-1.484h.91l.039.902h.029a1.6 1.6 0 0 1 .523-.747c.234-.168.486-.252.758-.252.096 0 .184.006.262.019v.999zM104.893 13.433h-.932l-.049-.757h-.029c-.297.576-.801.864-1.512.864-.57 0-1.041-.223-1.416-.669s-.562-1.025-.562-1.736c0-.763.203-1.381.609-1.853.395-.44.881-.66 1.455-.66.635 0 1.078.213 1.33.64h.02V6.556h1.047v5.607c0 .459.013.882.039 1.27zm-1.086-1.988v-.786a1.184 1.184 0 0 0-.41-.965 1.027 1.027 0 0 0-.701-.257c-.389 0-.695.155-.92.466s-.336.708-.336 1.193c0 .466.107.844.322 1.135.227.31.531.465.914.465.344 0 .621-.129.828-.388.201-.239.303-.527.303-.863zM110.246 13.433h-.941l-.076-.543h-.029c-.324.433-.783.65-1.377.65-.447 0-.807-.143-1.078-.427a1.337 1.337 0 0 1-.367-.96c0-.576.24-1.015.723-1.319.48-.304 1.158-.453 2.031-.446V10.3c0-.621-.326-.931-.977-.931-.465 0-.875.117-1.23.349l-.213-.688c.439-.271.979-.407 1.617-.407 1.234 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-1.086-1.62v-.727c-1.158-.02-1.736.297-1.736.95 0 .246.068.43.203.553a.728.728 0 0 0 .51.184c.232 0 .445-.073.643-.218a.898.898 0 0 0 .38-.742zM116.105 13.433h-1.049v-2.7c0-.832-.316-1.248-.949-1.248a.95.95 0 0 0-.758.343 1.217 1.217 0 0 0-.291.808v2.796h-1.047v-3.366c0-.414-.014-.863-.039-1.349h.922l.049.737h.029c.121-.229.303-.418.543-.569.283-.176.602-.265.949-.265.441 0 .807.142 1.098.427.361.349.543.87.543 1.562v2.824zM120.83 12.079c0 .438-.162.79-.484 1.055-.324.265-.77.397-1.34.397-.537 0-.992-.107-1.367-.32l.223-.776c.363.22.748.33 1.154.33.537 0 .805-.197.805-.592a.577.577 0 0 0-.174-.432c-.117-.113-.324-.225-.621-.334-.84-.311-1.26-.763-1.26-1.358 0-.407.154-.747.465-1.019s.721-.407 1.232-.407c.465 0 .863.095 1.193.285l-.225.753a1.841 1.841 0 0 0-.959-.271c-.221 0-.393.052-.516.155a.5.5 0 0 0-.184.397c0 .161.064.293.193.396.111.097.324.203.641.319.816.309 1.224.783 1.224 1.422z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/gl/android.png b/browser/themes/shared/app-marketplace-icons/gl/android.png
new file mode 100644
index 0000000000..0da16b89bb
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/gl/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/gu-IN/android.png b/browser/themes/shared/app-marketplace-icons/gu-IN/android.png
new file mode 100644
index 0000000000..7dc446f58b
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/gu-IN/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/he/android.png b/browser/themes/shared/app-marketplace-icons/he/android.png
new file mode 100644
index 0000000000..9177c5469f
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/he/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/he/ios.svg b/browser/themes/shared/app-marketplace-icons/he/ios.svg
new file mode 100644
index 0000000000..4994a2682b
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/he/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M90.126 9.462v.92h-2.842v-.92h2.842zM91.965 9.577c.161-1.15-.299-1.599-1.023-1.771l.207-1.07c.92.15 1.473.736 1.576 1.623.264-.702.955-1.611 2.231-1.611 1.795 0 2.231 1.645 2.231 3.866v1.473c0 .104-.126.863-.16 1.024H94.76a19.2 19.2 0 0 0-1.299.035l.195-1.024c.241-.046.782-.046 1.415-.046h1.208c.012-.483.012-.955.012-1.415 0-1.45-.185-2.865-1.531-2.865-1.276 0-1.725 1.266-1.897 2.048-.185.771-.426 2.163-.633 3.268h-.897c.229-1.188.505-2.683.632-3.535zM100.797 7.829l.195-1.024c.23.046.816.046 1.6.046h3.382l-.207 1.047h-.437c-.346 0-.473.242-.473 1.07 0 1.38.059 3.014.092 4.142h-.896c-.012-.748-.08-2.681-.08-3.935 0-.794.092-1.059.24-1.277h-2.139c-.679-.001-1.117-.023-1.277-.069zM110.527 9.543c0-1.139-.127-1.646-1.209-1.646h-1.139c-.678 0-1.115-.023-1.277-.069l.196-1.024c.229.046.817.046 1.599.046h.714c1.68 0 2.002.403 2.002 2.37v3.889h-.886V9.543zM114.229 9.508c0-.989-.115-1.346-1.012-1.565-.402-.104-.621-.149-.783-.218l.196-1.013c.149.058.38.115.794.184 1.289.276 1.703.702 1.703 2.451v3.762h-.898V9.508zM121.245 9.681c0-1.277-.115-1.783-1.196-1.783h-1.956c-.679 0-1.162-.023-1.323-.069l.195-1.024c.23.046.806.046 1.588.046h1.576c1.634 0 2.002.472 2.002 2.358v3.9h-.886V9.681zM117 9.819h.896v3.291H117V9.819z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/hi-IN/android.png b/browser/themes/shared/app-marketplace-icons/hi-IN/android.png
new file mode 100644
index 0000000000..eafcb92ad7
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/hi-IN/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/hr/android.png b/browser/themes/shared/app-marketplace-icons/hr/android.png
new file mode 100644
index 0000000000..3e8f2b5b84
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/hr/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/hu/android.png b/browser/themes/shared/app-marketplace-icons/hu/android.png
new file mode 100644
index 0000000000..c965eaa058
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/hu/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/hu/ios.svg b/browser/themes/shared/app-marketplace-icons/hu/ios.svg
new file mode 100644
index 0000000000..f01e689a1e
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/hu/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M50.383 30.648h-1.587l-.87-2.732h-3.022l-.828 2.732h-1.545l2.995-9.301h1.849l3.008 9.301zm-2.718-3.877-.787-2.429c-.083-.248-.239-.832-.469-1.753h-.028c-.092.396-.239.98-.441 1.753l-.773 2.429h2.498zM58.098 27.212c0 1.142-.309 2.043-.925 2.705-.552.589-1.237.883-2.056.883-.883 0-1.518-.317-1.904-.952h-.028v3.533h-1.49V26.15c0-.718-.019-1.453-.055-2.208h1.311l.083 1.062h.028c.497-.8 1.251-1.2 2.263-1.2.791 0 1.451.312 1.98.938.528.626.793 1.449.793 2.47zm-1.518.056c0-.653-.147-1.191-.442-1.614a1.524 1.524 0 0 0-1.297-.663 1.54 1.54 0 0 0-1 .366 1.691 1.691 0 0 0-.587.959 1.956 1.956 0 0 0-.069.455v1.118c0 .487.149.899.449 1.235.299.336.688.503 1.166.503.561 0 .998-.216 1.311-.648.312-.433.469-1.003.469-1.711zM65.826 27.212c0 1.142-.309 2.043-.925 2.705-.552.589-1.237.883-2.056.883-.883 0-1.518-.317-1.904-.952h-.028v3.533h-1.49V26.15c0-.718-.019-1.453-.055-2.208h1.311l.083 1.062h.028c.497-.8 1.251-1.2 2.263-1.2.791 0 1.451.312 1.98.938.528.626.793 1.449.793 2.47zm-1.518.056c0-.653-.147-1.191-.442-1.614a1.524 1.524 0 0 0-1.297-.663 1.54 1.54 0 0 0-1 .366 1.691 1.691 0 0 0-.587.959 1.956 1.956 0 0 0-.069.455v1.118c0 .487.149.899.449 1.235.299.336.688.503 1.166.503.561 0 .998-.216 1.311-.648.312-.433.469-1.003.469-1.711zM74.479 28.04c0 .792-.275 1.436-.826 1.933-.605.543-1.451.813-2.533.813-1.002 0-1.805-.193-2.411-.579l.344-1.242a4.078 4.078 0 0 0 2.154.594c.561 0 .998-.127 1.311-.381.314-.253.471-.592.471-1.016 0-.378-.129-.695-.387-.954-.258-.258-.686-.497-1.283-.719-1.629-.607-2.443-1.497-2.443-2.668 0-.765.285-1.391.855-1.879.57-.489 1.33-.733 2.277-.733.846 0 1.551.147 2.111.441l-.373 1.215c-.523-.285-1.117-.428-1.779-.428-.525 0-.934.129-1.229.387-.248.229-.373.51-.373.842 0 .368.143.671.428.91.248.221.699.46 1.354.718.801.322 1.389.699 1.766 1.132s.566.97.566 1.614zM79.529 25.06h-1.643v3.257c0 .828.289 1.242.869 1.242.268 0 .488-.023.662-.069l.041 1.132c-.293.11-.68.165-1.158.165-.59 0-1.049-.179-1.381-.538-.33-.358-.496-.961-.496-1.808V25.06h-.98v-1.118h.98v-1.228l1.463-.442v1.67h1.643v1.118zM87.09 27.24c0 1.03-.293 1.876-.883 2.539-.615.681-1.436 1.021-2.457 1.021-.984 0-1.768-.326-2.352-.979s-.877-1.477-.877-2.47c0-1.04.301-1.891.904-2.554.602-.662 1.414-.993 2.436-.993.984 0 1.775.326 2.373.979.571.635.856 1.454.856 2.457zm-1.545.048c0-.618-.133-1.148-.4-1.592-.312-.535-.76-.803-1.338-.803-.6 0-1.055.268-1.367.803-.266.443-.4.983-.4 1.619 0 .619.135 1.149.4 1.592.322.535.773.803 1.354.803.57 0 1.016-.272 1.338-.816.274-.453.413-.988.413-1.606zM92.279 25.253a2.494 2.494 0 0 0-.469-.042c-.525 0-.93.198-1.215.594-.248.35-.373.791-.373 1.325v3.519h-1.49l.014-4.596c0-.772-.018-1.477-.055-2.111h1.297l.055 1.283h.043c.156-.441.404-.795.744-1.062a1.801 1.801 0 0 1 1.076-.358c.139 0 .264.009.373.027v1.421zM99.068 26.978c0 .267-.02.492-.055.677H94.54c.02.662.236 1.168.65 1.518.377.312.863.469 1.461.469.664 0 1.266-.105 1.809-.317l.234 1.035c-.635.276-1.385.414-2.25.414-1.039 0-1.855-.306-2.449-.918-.592-.611-.889-1.433-.889-2.463 0-1.012.275-1.854.828-2.525.578-.718 1.361-1.076 2.346-1.076.965 0 1.697.358 2.193 1.076.398.569.595 1.273.595 2.11zm-1.422-.387c.01-.441-.088-.823-.289-1.145-.258-.414-.654-.621-1.188-.621-.488 0-.883.202-1.186.606-.25.322-.396.709-.443 1.159h3.106zM103.596 27.475h-3.438v-1.049h3.438v1.049zM111.57 27.198c0 1.132-.312 2.033-.938 2.705-.553.598-1.229.896-2.029.896-.957 0-1.66-.396-2.111-1.187h-.027l-.084 1.035h-1.27c.037-.543.057-1.146.057-1.808v-7.977h1.49v4.058h.027c.441-.746 1.154-1.118 2.139-1.118.811 0 1.471.311 1.98.932s.766 1.443.766 2.464zm-1.517.056c0-.653-.146-1.188-.441-1.601a1.53 1.53 0 0 0-1.311-.677c-.369 0-.699.12-.994.358-.295.24-.492.558-.594.953a2.023 2.023 0 0 0-.055.469v1.173c0 .46.154.855.461 1.187.309.332.693.497 1.152.497.562 0 1-.211 1.312-.635.313-.422.47-.998.47-1.724zM119.367 27.24c0 1.03-.293 1.876-.883 2.539-.615.681-1.436 1.021-2.457 1.021-.984 0-1.768-.326-2.352-.979s-.877-1.477-.877-2.47c0-1.04.301-1.891.904-2.554.602-.662 1.414-.993 2.436-.993.984 0 1.775.326 2.373.979.571.635.856 1.454.856 2.457zm-1.545.048c0-.618-.133-1.148-.4-1.592-.312-.535-.76-.803-1.338-.803-.6 0-1.055.268-1.367.803-.266.443-.4.983-.4 1.619 0 .619.135 1.149.4 1.592.322.535.773.803 1.354.803.57 0 1.016-.272 1.338-.816.275-.453.413-.988.413-1.606zm.207-6.161-1.67 2h-1.035l1.188-2h1.517zM122.5 30.648h-1.49v-9.784h1.49v9.784z"/></g><g fill="#FFF"><path d="M47.391 16.533h-3.715V9.996h1.048v5.655h2.667v.882zM52.678 13.953c0 .188-.014.346-.039.475h-3.143c.013.466.164.821.455 1.067.266.22.608.33 1.028.33.466 0 .89-.074 1.271-.223l.164.728c-.446.194-.973.291-1.581.291-.73 0-1.305-.215-1.722-.645s-.625-1.007-.625-1.731c0-.711.193-1.303.582-1.775.407-.504.956-.756 1.648-.756.679 0 1.193.252 1.542.756.281.4.42.895.42 1.483zm-1-.271a1.427 1.427 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.997.997 0 0 0-.835.427 1.577 1.577 0 0 0-.31.815h2.182zM56.577 12.604h-1.154v2.29c0 .582.204.873.611.873.188 0 .343-.016.466-.049l.028.795c-.207.078-.479.117-.814.117-.414 0-.737-.126-.97-.378-.233-.252-.35-.676-.35-1.271v-2.377h-.688v-.786h.688v-.863l1.028-.31v1.173h1.154v.786zM62.33 14.137c0 .725-.207 1.319-.62 1.785-.432.479-1.006.718-1.723.718-.69 0-1.24-.229-1.65-.689-.41-.459-.614-1.038-.614-1.736 0-.73.211-1.329.634-1.794.422-.466.992-.698 1.708-.698.69 0 1.245.229 1.665.688.399.446.6 1.022.6 1.726zm-2.698-3.511c0 .155-.05.285-.148.388a.492.492 0 0 1-.37.155.496.496 0 0 1-.38-.16c-.1-.107-.148-.234-.148-.383a.535.535 0 0 1 .538-.543c.147 0 .269.054.365.16a.557.557 0 0 1 .143.383zm1.611 3.545c0-.435-.094-.808-.28-1.119-.219-.376-.531-.564-.937-.564-.419 0-.738.188-.957.564-.187.311-.28.69-.28 1.138 0 .435.094.808.28 1.119.226.376.541.564.947.564.398 0 .712-.191.937-.574.193-.317.29-.693.29-1.128zm.214-3.545c0 .155-.05.285-.149.388a.503.503 0 0 1-.38.155.482.482 0 0 1-.369-.16c-.1-.107-.149-.234-.149-.383s.051-.276.153-.383a.504.504 0 0 1 .375-.16c.154 0 .279.054.375.16a.553.553 0 0 1 .144.383zM64.928 16.533H63.88V9.656h1.048v6.877zM69.166 12.604h-1.154v2.29c0 .582.204.873.611.873.188 0 .343-.016.466-.049l.027.795c-.207.078-.478.117-.814.117-.414 0-.737-.126-.97-.378-.233-.252-.35-.676-.35-1.271v-2.377h-.688v-.786h.688v-.863l1.028-.31v1.173h1.154v.786zM74.715 16.533h-1.049v-2.68c0-.845-.316-1.268-.949-1.268-.486 0-.818.245-1 .735a1.317 1.317 0 0 0-.049.377v2.835h-1.047V9.656h1.047v2.841h.02c.33-.517.803-.775 1.416-.775.434 0 .793.142 1.078.427.355.355.533.883.533 1.581v2.803zM80.439 13.953c0 .188-.014.346-.039.475h-3.143c.012.466.164.821.455 1.067.266.22.607.33 1.027.33.467 0 .891-.074 1.271-.223l.164.728c-.445.194-.973.291-1.58.291-.73 0-1.305-.215-1.723-.645-.416-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.408-.504.957-.756 1.648-.756.68 0 1.193.252 1.543.756.28.4.42.895.42 1.483zm-1-.271a1.435 1.435 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.998.998 0 0 0-.836.427 1.567 1.567 0 0 0-.309.815h2.182zM84.338 12.604h-1.154v2.29c0 .582.203.873.611.873.188 0 .342-.016.465-.049l.029.795c-.207.078-.479.117-.814.117-.414 0-.738-.126-.971-.378-.232-.252-.35-.676-.35-1.271v-2.377h-.688v-.786h.688v-.863l1.029-.31v1.173h1.154v.786zM90.1 14.137c0 .725-.207 1.319-.621 1.785-.434.479-1.01.718-1.727.718-.693 0-1.244-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.711-.698c.693 0 1.248.229 1.67.688.399.446.601 1.022.601 1.726zm-1.088.034c0-.435-.094-.808-.281-1.119-.219-.376-.533-.564-.939-.564-.422 0-.742.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .713-.191.939-.574.195-.317.291-.693.291-1.128zm-.746-4.389-1.029 1.368h-.629l.717-1.368h.941zm1.484 0-1.029 1.368h-.629l.717-1.368h.941zM98.004 16.533h-.941l-.076-.543h-.029c-.324.433-.783.65-1.377.65-.447 0-.807-.143-1.078-.427a1.337 1.337 0 0 1-.367-.96c0-.576.24-1.015.723-1.319.48-.304 1.158-.453 2.031-.446V13.4c0-.621-.326-.931-.977-.931-.465 0-.875.117-1.23.349l-.213-.688c.439-.271.979-.407 1.617-.407 1.234 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-1.086-1.62v-.727c-1.158-.02-1.736.297-1.736.95 0 .246.068.43.203.553a.728.728 0 0 0 .51.184c.232 0 .445-.073.643-.218a.898.898 0 0 0 .38-.742zM103.135 16.533h-3.84v-.611l1.881-2.473c.117-.155.33-.411.641-.767v-.019h-2.338v-.844h3.607v.65l-1.842 2.435c-.207.265-.42.521-.641.766v.02h2.531v.843z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/hy-AM/android.png b/browser/themes/shared/app-marketplace-icons/hy-AM/android.png
new file mode 100644
index 0000000000..c383a8ce9d
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/hy-AM/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/id/android.png b/browser/themes/shared/app-marketplace-icons/id/android.png
new file mode 100644
index 0000000000..9f603f02a1
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/id/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/id/ios.svg b/browser/themes/shared/app-marketplace-icons/id/ios.svg
new file mode 100644
index 0000000000..a6a69865cc
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/id/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M49.238 9.903c0 1.213-.363 2.126-1.09 2.74-.674.567-1.63.85-2.87.85-.613 0-1.14-.027-1.58-.08v-6.63c.573-.093 1.193-.14 1.86-.14 1.18 0 2.07.257 2.67.77.673.58 1.01 1.41 1.01 2.49zm-1.14.03c0-.787-.209-1.39-.625-1.81-.417-.42-1.025-.63-1.825-.63-.34 0-.63.023-.87.07v5.04c.134.02.377.03.73.03.826 0 1.465-.23 1.915-.69.45-.46.675-1.13.675-2.01zM55.278 10.963c0 .747-.214 1.36-.64 1.84-.447.493-1.04.74-1.78.74-.714 0-1.282-.236-1.705-.71-.424-.473-.635-1.07-.635-1.79 0-.753.218-1.37.654-1.85.437-.48 1.025-.72 1.766-.72.713 0 1.286.237 1.72.71.413.46.62 1.053.62 1.78zm-1.12.035c0-.448-.097-.833-.29-1.153-.227-.388-.55-.582-.97-.582-.434 0-.764.194-.99.582-.193.321-.29.712-.29 1.173 0 .448.097.833.29 1.153.233.388.56.582.98.582.413 0 .736-.197.97-.591.2-.328.3-.716.3-1.164zM63.378 8.573l-1.521 4.86h-.99l-.63-2.11c-.16-.527-.29-1.05-.39-1.57h-.021a11.361 11.361 0 0 1-.39 1.57l-.67 2.11h-1l-1.43-4.86h1.109l.55 2.31a23.4 23.4 0 0 1 .33 1.56h.021c.08-.406.213-.923.399-1.55l.69-2.32h.88l.66 2.27c.16.553.29 1.086.39 1.6h.03c.073-.5.184-1.033.33-1.6l.59-2.27h1.063zM68.978 13.433h-1.08V10.65c0-.858-.327-1.287-.98-1.287-.32 0-.58.118-.78.354-.199.236-.3.514-.3.833v2.883h-1.08v-3.47c0-.426-.013-.89-.04-1.39h.95l.05.76h.03c.127-.236.313-.432.561-.587.293-.182.619-.273.979-.273.453 0 .83.146 1.13.44.373.36.561.897.561 1.61v2.91zM71.957 13.433h-1.08v-7.09h1.08v7.09zM78.316 10.963c0 .747-.213 1.36-.639 1.84-.447.493-1.041.74-1.781.74-.713 0-1.281-.236-1.705-.71-.424-.473-.635-1.07-.635-1.79 0-.753.219-1.37.654-1.85.438-.48 1.025-.72 1.766-.72.713 0 1.287.237 1.721.71.412.46.619 1.053.619 1.78zm-1.119.035c0-.448-.098-.833-.291-1.153-.227-.388-.549-.582-.969-.582-.434 0-.764.194-.99.582-.193.321-.291.712-.291 1.173 0 .448.098.833.291 1.153.232.388.559.582.98.582.412 0 .736-.197.969-.591.202-.328.301-.716.301-1.164zM83.547 13.433h-.971l-.08-.56h-.029c-.334.447-.807.67-1.42.67-.459 0-.83-.146-1.109-.44a1.381 1.381 0 0 1-.381-.99c0-.593.248-1.047.746-1.36.496-.313 1.193-.466 2.094-.46v-.09c0-.64-.336-.96-1.008-.96-.479 0-.9.12-1.266.36l-.221-.71c.453-.28 1.008-.42 1.668-.42 1.271 0 1.906.67 1.906 2.01v1.79c.001.487.024.873.071 1.16zm-1.119-1.67v-.75c-1.193-.02-1.791.307-1.791.98 0 .253.07.443.209.57a.75.75 0 0 0 .527.19c.238 0 .459-.075.66-.225a.914.914 0 0 0 .373-.575.752.752 0 0 0 .022-.19zM89.688 13.433h-.961l-.049-.78h-.031c-.307.593-.826.89-1.559.89-.588 0-1.074-.23-1.461-.69s-.58-1.057-.58-1.79c0-.787.211-1.423.631-1.91.406-.454.906-.68 1.5-.68.652 0 1.109.22 1.369.66h.02v-2.79h1.08v5.78c-.001.474.013.91.041 1.31zm-1.122-2.05v-.81c0-.14-.01-.253-.029-.34a1.22 1.22 0 0 0-.393-.655 1.051 1.051 0 0 0-.723-.265c-.4 0-.717.16-.949.48-.23.32-.346.73-.346 1.23 0 .48.111.87.332 1.17.234.32.549.48.943.48.355 0 .639-.133.854-.4.208-.247.311-.543.311-.89zM98.807 13.433h-.959l-.051-.78h-.029c-.307.593-.828.89-1.561.89-.586 0-1.074-.23-1.459-.69-.387-.46-.58-1.057-.58-1.79 0-.787.209-1.423.629-1.91.406-.454.906-.68 1.5-.68.654 0 1.109.22 1.371.66h.02v-2.79h1.08v5.78c0 .474.013.91.039 1.31zm-1.119-2.05v-.81c0-.14-.01-.253-.031-.34-.061-.26-.189-.478-.391-.655s-.441-.265-.723-.265c-.402 0-.719.16-.949.48-.23.32-.346.73-.346 1.23 0 .48.109.87.33 1.17.234.32.549.48.943.48.355 0 .641-.133.854-.4a1.33 1.33 0 0 0 .313-.89zM101.938 7.123c0 .193-.064.35-.189.47a.686.686 0 0 1-.49.18.616.616 0 0 1-.455-.185.624.624 0 0 1-.186-.465c0-.187.062-.34.189-.46s.283-.18.471-.18c.186 0 .344.06.471.18.124.12.189.274.189.46zm-.122 6.31h-1.08v-4.86h1.08v4.86z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/is/android.png b/browser/themes/shared/app-marketplace-icons/is/android.png
new file mode 100644
index 0000000000..1e4d7478eb
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/is/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/it/android.png b/browser/themes/shared/app-marketplace-icons/it/android.png
new file mode 100644
index 0000000000..85b5df99df
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/it/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/it/ios.svg b/browser/themes/shared/app-marketplace-icons/it/ios.svg
new file mode 100644
index 0000000000..6e1e4394e5
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/it/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.133 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.04-.014-3.386-1.291-3.42-5.154zM26.933 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.649 31.504h-2.271l-1.244-3.909H45.81l-1.185 3.909h-2.211l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549-1.125-3.475c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.666 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159H57.3l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.703 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.039v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.754.896 1.133 2.074 1.133 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.043 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.538.616.808 1.387.808 2.307zM95.092 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.695 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.213.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.394-.645.591-1.412.591-2.296zM112.625 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.16 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M47.424 11.6c0 .557-.193 1.009-.58 1.358-.426.381-1.02.572-1.781.572-.703 0-1.269-.136-1.694-.408l.242-.873c.46.278.964.417 1.515.417.395 0 .701-.089.922-.268a.87.87 0 0 0 .329-.714.91.91 0 0 0-.271-.67c-.181-.181-.481-.35-.901-.505-1.145-.427-1.717-1.052-1.717-1.875 0-.538.2-.978.601-1.321.401-.343.935-.515 1.601-.515.595 0 1.09.104 1.484.311l-.262.854a2.573 2.573 0 0 0-1.252-.301c-.368 0-.656.091-.863.271a.779.779 0 0 0-.262.592.8.8 0 0 0 .301.64c.175.155.491.324.951.504.562.227.976.492 1.241.795.264.305.396.683.396 1.136zM52.39 8.845l-.203.795a2.062 2.062 0 0 0-.912-.194c-.459 0-.823.154-1.092.461-.268.307-.402.697-.402 1.169 0 .498.141.892.422 1.183s.639.437 1.072.437c.323 0 .64-.064.95-.194l.146.786c-.343.162-.775.243-1.3.243-.718 0-1.29-.218-1.717-.655s-.64-1.02-.64-1.751c0-.73.229-1.331.688-1.799s1.076-.703 1.853-.703c.44-.001.819.073 1.135.222zM57.356 13.433h-.941l-.077-.543h-.029c-.323.433-.782.65-1.377.65-.446 0-.806-.143-1.077-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-1.087-1.62v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.73.73 0 0 0 .511.184c.231 0 .445-.073.642-.218a.889.889 0 0 0 .38-.742zM61.615 9.641a1.74 1.74 0 0 0-.33-.029c-.368 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474h-1.048l.01-3.23c0-.543-.013-1.038-.038-1.484h.911l.039.902h.029c.109-.311.284-.56.523-.747.233-.168.485-.252.757-.252.097 0 .185.006.262.019v.999zM64.117 7.312a.603.603 0 0 1-.184.456.661.661 0 0 1-.476.175.611.611 0 0 1-.621-.63c0-.181.062-.33.185-.446s.274-.175.456-.175a.64.64 0 0 1 .456.175.586.586 0 0 1 .184.445zM64 13.433h-1.048V8.719H64v4.714zM69.229 8.845l-.203.795a2.066 2.066 0 0 0-.913-.194c-.459 0-.823.154-1.092.461-.268.307-.402.697-.402 1.169 0 .498.141.892.422 1.183s.639.437 1.072.437c.323 0 .64-.064.95-.194l.146.786c-.343.162-.776.243-1.3.243-.718 0-1.29-.218-1.717-.655s-.64-1.02-.64-1.751c0-.73.229-1.331.688-1.799s1.076-.703 1.853-.703c.44-.001.819.073 1.136.222zM74.193 13.433h-.941l-.076-.543h-.029c-.324.433-.783.65-1.377.65-.447 0-.807-.143-1.078-.427a1.337 1.337 0 0 1-.367-.96c0-.576.24-1.015.723-1.319.48-.304 1.158-.453 2.031-.446V10.3c0-.621-.326-.931-.977-.931-.465 0-.875.117-1.23.349l-.213-.688c.439-.271.979-.407 1.617-.407 1.234 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-1.086-1.62v-.727c-1.158-.02-1.736.297-1.736.95 0 .246.068.43.203.553a.728.728 0 0 0 .51.184c.232 0 .445-.073.643-.218a.898.898 0 0 0 .38-.742zM81.672 12.079c0 .438-.16.79-.484 1.055-.322.265-.77.397-1.338.397-.537 0-.992-.107-1.367-.32l.223-.776c.361.22.746.33 1.154.33.537 0 .805-.197.805-.592a.584.584 0 0 0-.174-.432c-.117-.113-.324-.225-.621-.334-.842-.311-1.262-.763-1.262-1.358 0-.407.156-.747.465-1.019.311-.271.723-.407 1.232-.407.467 0 .863.095 1.193.285l-.223.752a1.854 1.854 0 0 0-.961-.271c-.219 0-.391.052-.514.155a.495.495 0 0 0-.184.397c0 .161.064.293.193.396.109.097.322.203.641.319.816.31 1.222.784 1.222 1.423zM87.309 13.433h-.922l-.059-.718h-.02c-.33.55-.828.825-1.494.825-.465 0-.836-.146-1.115-.437-.33-.356-.494-.893-.494-1.61V8.719h1.047v2.6c0 .906.311 1.358.932 1.358.467 0 .789-.226.971-.679.045-.116.068-.249.068-.398V8.719h1.047v3.356c0 .446.013.899.039 1.358z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/ja/android.png b/browser/themes/shared/app-marketplace-icons/ja/android.png
new file mode 100644
index 0000000000..5ed3cadd17
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ja/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ja/ios.svg b/browser/themes/shared/app-marketplace-icons/ja/ios.svg
new file mode 100644
index 0000000000..2385a32c1c
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ja/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.268V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.542c0 2.604-2.197 4.732-4.803 4.732z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.554 2.355 3.287 4.016 3.226 1.625-.066 2.232-1.035 4.193-1.035 1.943 0 2.513 1.035 4.207.996 1.744-.027 2.842-1.56 3.89-3.127 1.255-1.779 1.759-3.533 1.779-3.623-.041-.014-3.387-1.292-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M54.023 17.179h-2.006l-1.1-3.455h-3.821l-1.047 3.455h-1.955l3.787-11.761h2.338l3.804 11.761zm-3.437-4.904-.995-3.071c-.104-.314-.303-1.053-.593-2.216h-.035c-.117.5-.303 1.239-.559 2.216l-.977 3.071h3.159zM63.742 12.833c0 1.443-.391 2.583-1.176 3.42-.701.745-1.572 1.117-2.613 1.117-1.125 0-1.932-.401-2.422-1.204v4.45h-1.885v-9.13a56.6 56.6 0 0 0-.07-2.788h1.658l.105 1.344h.034c.629-1.012 1.582-1.519 2.861-1.519 1.002 0 1.836.396 2.506 1.187.668.791 1.002 1.832 1.002 3.123zm-1.918.07c0-.826-.188-1.506-.559-2.042-.408-.558-.955-.837-1.641-.837-.465 0-.887.154-1.266.462s-.625.712-.742 1.213a2.414 2.414 0 0 0-.086.576v1.414c0 .617.188 1.137.566 1.562.379.425.869.637 1.475.637.709 0 1.262-.273 1.658-.82.396-.547.595-1.269.595-2.165zM73.497 12.833c0 1.443-.392 2.583-1.177 3.42-.701.745-1.572 1.117-2.613 1.117-1.124 0-1.931-.401-2.422-1.204v4.45H65.4v-9.13c0-.906-.023-1.835-.069-2.788h1.657l.104 1.344h.035c.628-1.012 1.582-1.519 2.861-1.519 1 0 1.835.396 2.505 1.187.669.791 1.004 1.832 1.004 3.123zm-1.919.07c0-.826-.188-1.506-.559-2.042-.408-.558-.955-.837-1.642-.837-.465 0-.887.154-1.265.462a2.134 2.134 0 0 0-.742 1.213 2.423 2.423 0 0 0-.087.576v1.414c0 .617.188 1.137.567 1.562.377.425.87.637 1.474.637.71 0 1.263-.273 1.657-.82.397-.547.597-1.269.597-2.165zM86.759 13.881c0 1-.349 1.814-1.045 2.443-.766.687-1.834 1.029-3.202 1.029-1.266 0-2.281-.244-3.047-.733l.436-1.57a5.246 5.246 0 0 0 2.724.733c.709 0 1.263-.16 1.657-.48.396-.32.594-.747.594-1.282 0-.477-.163-.878-.488-1.204-.326-.326-.867-.628-1.623-.908-2.06-.768-3.089-1.89-3.089-3.368 0-.965.363-1.756 1.091-2.373s1.689-.925 2.889-.925c1.07 0 1.959.186 2.67.558l-.476 1.536c-.666-.36-1.418-.541-2.26-.541-.665 0-1.186.163-1.559.489a1.395 1.395 0 0 0-.473 1.064c0 .465.18.849.541 1.152.313.279.883.582 1.709.907 1.012.407 1.758.884 2.233 1.431.479.547.718 1.227.718 2.042zM93.006 10.111H90.93v4.118c0 1.047.366 1.571 1.1 1.571.337 0 .615-.029.838-.087l.052 1.431c-.372.139-.86.209-1.466.209-.744 0-1.326-.227-1.744-.68-.419-.454-.629-1.216-.629-2.286v-4.275h-1.238V8.698h1.238V7.145l1.85-.558v2.111h2.077l-.002 1.413zM102.357 12.869c0 1.303-.373 2.373-1.116 3.211-.779.861-1.814 1.291-3.104 1.291-1.246 0-2.238-.413-2.977-1.239-.739-.826-1.108-1.867-1.108-3.124 0-1.314.382-2.391 1.144-3.229.763-.837 1.789-1.256 3.08-1.256 1.244 0 2.244.413 3.002 1.239.719.803 1.079 1.839 1.079 3.107zm-1.955.043c0-.777-.168-1.444-.506-2.001-.396-.672-.959-1.009-1.691-1.009-.757 0-1.332.336-1.729 1.009-.338.557-.506 1.236-.506 2.036 0 .777.168 1.444.506 2.001.407.673.979 1.009 1.711 1.009.722 0 1.285-.342 1.691-1.026.351-.569.524-1.242.524-2.019zM108.482 10.356a3.227 3.227 0 0 0-.594-.052c-.662 0-1.176.25-1.535.75-.313.442-.472 1.001-.472 1.675v4.45h-1.885v-5.811c0-.978-.019-1.867-.054-2.67h1.642l.069 1.623h.053a2.887 2.887 0 0 1 .941-1.343c.42-.303.873-.454 1.361-.454a2.9 2.9 0 0 1 .471.035v1.797h.003zM116.91 12.537c0 .337-.023.623-.069.855h-5.653c.022.837.297 1.478.819 1.919.478.396 1.095.593 1.851.593.838 0 1.6-.133 2.285-.401l.297 1.309c-.803.349-1.75.523-2.844.523-1.314 0-2.348-.387-3.098-1.161-.751-.773-1.126-1.812-1.126-3.115 0-1.279.351-2.344 1.047-3.193.733-.907 1.722-1.361 2.968-1.361 1.221 0 2.146.454 2.773 1.361.5.723.75 1.613.75 2.671zm-1.797-.489c.012-.558-.11-1.041-.366-1.448-.326-.523-.826-.785-1.501-.785-.616 0-1.117.256-1.501.768-.313.408-.5.896-.558 1.466l3.926-.001z"/></g><g fill="#FFF"><path d="M46.313 26.928c.211-.878.363-1.791.468-2.703l1.007.129c-.117.83-.281 1.674-.479 2.504.304-.022.573-.034.796-.034 1.604 0 2.329.843 2.329 2.598 0 1.791-.316 3.384-.749 4.099-.352.571-.761.782-1.51.782a8.077 8.077 0 0 1-1.697-.198l.07-.947a4.943 4.943 0 0 0 1.428.223c.444 0 .632-.07.843-.387.374-.551.62-1.955.62-3.535 0-1.275-.387-1.708-1.393-1.708-.281 0-.608.012-.96.035-.644 2.364-1.533 4.541-2.563 6.026l-.889-.479c.994-1.346 1.86-3.301 2.445-5.466-.808.093-1.649.222-2.387.362l-.176-.937a42.748 42.748 0 0 1 2.797-.364zm7.678 4.037-1.007.246c-.199-1.533-.878-3.277-2.142-4.564l.819-.525c1.359 1.403 2.119 3.345 2.33 4.843zM56.762 30.24c1.17-.82 2.633-1.381 3.886-1.381 1.813 0 2.914.877 2.914 2.387 0 1.873-1.533 3.055-5.173 3.055-.152 0-.363 0-.551-.012l-.21-.947c.28.012.632.023.854.023 2.927 0 4.05-.832 4.05-2.096 0-1.029-.679-1.568-2.095-1.568-1.206 0-2.587.668-3.909 1.814l-.808-.353c0-2.527.27-3.744 1.159-5.021l.924.314c-.82 1.14-1.041 2.205-1.041 3.785zm-.106-5.103.258-.936c1.626.246 4.084.795 5.243 1.217l-.27.925c-1.053-.409-3.639-1.007-5.231-1.206zM68.264 28.191a26.295 26.295 0 0 1 2.752 1.803 9.62 9.62 0 0 0 1.438-3.418h-3.78c-.854 1.357-1.967 2.691-3.055 3.547l-.784-.668c1.627-1.182 3.229-3.486 3.909-5.242l.982.339c-.141.353-.315.714-.516 1.101h3.77l.748.41c-.818 3.769-3.03 6.929-6.447 8.31l-.714-.865a9.144 9.144 0 0 0 3.826-2.692 19.686 19.686 0 0 0-2.762-1.859l.633-.766zm4.623-4.365c.48.48.854.982 1.229 1.568l-.527.375c-.351-.574-.737-1.102-1.205-1.558l.503-.385zm1.521-.34c.49.492.854.996 1.217 1.592l-.55.363a7.17 7.17 0 0 0-1.183-1.592l.516-.363zM80.434 26.261v-2.024h1.064v2.024h3.064l.891.362c-.292 3.57-1.697 6.344-5.441 7.701l-.645-.912c3.453-1.171 4.693-3.477 4.869-6.18h-6.25v2.69h-1.053V26.26l3.501.001zM91.255 27.35l-.69.854c-.644-.573-2.049-1.593-3.02-2.106l.655-.843c1.007.585 2.329 1.497 3.055 2.095zm4.507.023.678.795c-1.604 2.609-4.893 5.104-8.086 6.051l-.527-1.006c3.123-.797 6.377-3.219 7.935-5.84zM106.924 25.723v7.854h-8.355v-7.854h8.355zm-1.076 6.845v-5.863H99.62v5.863h6.228zM118.857 28.754v1.076h-9.526v-1.076h9.526zM128.288 30.428l-.679.865c-1.252-.912-3.113-1.954-4.646-2.68v5.688h-1.076V24.236h1.076v3.242c1.662.76 3.827 1.942 5.325 2.95zm-2.726-4.951a8.66 8.66 0 0 1 1.158 1.558l-.516.327a7.643 7.643 0 0 0-1.123-1.557l.481-.328zm1.228-.738a9.75 9.75 0 0 1 1.171 1.545l-.516.327a8.072 8.072 0 0 0-1.135-1.533l.48-.339z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/jar.mn b/browser/themes/shared/app-marketplace-icons/jar.mn
new file mode 100644
index 0000000000..e201dad135
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/jar.mn
@@ -0,0 +1,17 @@
+#filter substitution
+# 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/.
+
+browser.jar:
+%  locale app-marketplace-icons @AB_CD@ %locale/@AB_CD@/app-marketplace-icons/
+#if defined(ANDROID_MARKETPLACE_AB_CD)
+    locale/@AB_CD@/app-marketplace-icons/android.png (@ANDROID_MARKETPLACE_AB_CD@/android.png)
+#else
+    locale/@AB_CD@/app-marketplace-icons/android.png (en-US/android.png)
+#endif
+#if defined(IOS_MARKETPLACE_AB_CD)
+    locale/@AB_CD@/app-marketplace-icons/ios.svg (@IOS_MARKETPLACE_AB_CD@/ios.svg)
+#else
+    locale/@AB_CD@/app-marketplace-icons/ios.svg (en-US/ios.svg)
+#endif
diff --git a/browser/themes/shared/app-marketplace-icons/ka/android.png b/browser/themes/shared/app-marketplace-icons/ka/android.png
new file mode 100644
index 0000000000..4717fffd19
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ka/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/kk/android.png b/browser/themes/shared/app-marketplace-icons/kk/android.png
new file mode 100644
index 0000000000..36266d750c
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/kk/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/km/android.png b/browser/themes/shared/app-marketplace-icons/km/android.png
new file mode 100644
index 0000000000..4529924e7d
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/km/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/kn/android.png b/browser/themes/shared/app-marketplace-icons/kn/android.png
new file mode 100644
index 0000000000..0b57399581
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/kn/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ko/android.png b/browser/themes/shared/app-marketplace-icons/ko/android.png
new file mode 100644
index 0000000000..b0c0c496bf
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ko/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ko/ios.svg b/browser/themes/shared/app-marketplace-icons/ko/ios.svg
new file mode 100644
index 0000000000..aba6865915
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ko/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M51.285 16.038h-1.61l-.882-2.772h-3.066l-.84 2.772h-1.568l3.038-9.436h1.876l3.052 9.436zm-2.758-3.934-.798-2.464c-.084-.252-.243-.845-.476-1.778h-.028c-.093.401-.243.994-.448 1.778l-.784 2.464h2.534zM59.097 12.552c0 1.157-.313 2.072-.938 2.744-.56.598-1.255.896-2.086.896-.896 0-1.54-.322-1.932-.966h-.028v3.584h-1.512v-7.336c0-.728-.019-1.475-.056-2.24h1.33l.084 1.078h.028c.504-.812 1.27-1.218 2.296-1.218.803 0 1.472.317 2.009.952.536.634.805 1.47.805 2.506zm-1.54.055c0-.663-.149-1.208-.448-1.638a1.547 1.547 0 0 0-1.316-.672c-.374 0-.712.124-1.015.371a1.722 1.722 0 0 0-.595.973 1.97 1.97 0 0 0-.07.462v1.134c0 .495.152.912.455 1.253s.698.511 1.183.511c.569 0 1.013-.219 1.33-.658.316-.438.476-1.017.476-1.736zM66.922 12.552c0 1.157-.313 2.072-.938 2.744-.56.598-1.255.896-2.086.896-.896 0-1.54-.322-1.932-.966h-.028v3.584h-1.512v-7.336c0-.728-.019-1.475-.056-2.24h1.33l.084 1.078h.028c.504-.812 1.27-1.218 2.296-1.218.803 0 1.472.317 2.009.952.537.634.805 1.47.805 2.506zm-1.54.055c0-.663-.149-1.208-.448-1.638a1.547 1.547 0 0 0-1.316-.672c-.374 0-.712.124-1.015.371a1.722 1.722 0 0 0-.595.973 1.97 1.97 0 0 0-.07.462v1.134c0 .495.152.912.455 1.253s.698.511 1.183.511c.569 0 1.013-.219 1.33-.658.317-.438.476-1.017.476-1.736zM75.672 13.392c0 .803-.279 1.456-.838 1.96-.615.551-1.472.826-2.57.826-1.016 0-1.83-.196-2.445-.588l.35-1.26a4.145 4.145 0 0 0 2.185.602c.57 0 1.014-.128 1.331-.386.317-.257.477-.601.477-1.031 0-.383-.131-.706-.393-.967-.261-.262-.695-.505-1.302-.729-1.652-.617-2.479-1.519-2.479-2.707 0-.776.29-1.412.868-1.907.579-.496 1.349-.744 2.311-.744.858 0 1.572.149 2.142.448l-.379 1.233c-.532-.289-1.134-.434-1.806-.434-.532 0-.947.131-1.246.392a1.12 1.12 0 0 0-.378.854c0 .374.145.681.434.924.252.224.709.467 1.372.728.812.327 1.409.709 1.792 1.148.382.438.574.984.574 1.638zM80.67 10.368h-1.666v3.304c0 .84.294 1.26.882 1.26.271 0 .495-.023.672-.07l.042 1.148c-.298.112-.69.168-1.176.168-.597 0-1.063-.182-1.399-.546-.336-.364-.504-.976-.504-1.834v-3.43h-.994V9.233h.994V7.988l1.483-.448v1.694h1.666v1.134zM88.188 12.58c0 1.045-.299 1.904-.896 2.576-.626.69-1.456 1.036-2.492 1.036-.999 0-1.795-.331-2.388-.994s-.889-1.498-.889-2.506c0-1.054.306-1.918.917-2.59s1.436-1.008 2.471-1.008c.999 0 1.802.331 2.408.994.58.643.869 1.474.869 2.492zm-1.568.048c0-.627-.135-1.165-.405-1.614-.317-.543-.771-.814-1.358-.814-.606 0-1.068.271-1.386.814-.271.449-.406.997-.406 1.643 0 .627.135 1.166.406 1.614.326.543.784.814 1.372.814.578 0 1.031-.276 1.357-.828.28-.458.42-1.001.42-1.629zM93.103 10.563a2.579 2.579 0 0 0-.476-.042c-.532 0-.943.201-1.232.602-.252.355-.378.803-.378 1.344v3.57h-1.512l.014-4.662c0-.784-.019-1.498-.056-2.142h1.315l.057 1.302h.042c.158-.448.41-.807.756-1.078.336-.243.7-.364 1.092-.364.14 0 .267.009.378.028v1.442zM99.864 12.313c0 .271-.019.5-.056.686h-4.536c.019.672.238 1.186.658 1.54.383.317.877.476 1.483.476.673 0 1.283-.107 1.834-.322l.238 1.05c-.644.28-1.404.42-2.282.42-1.055 0-1.883-.31-2.484-.931-.603-.621-.903-1.454-.903-2.499 0-1.026.28-1.88.84-2.562.588-.728 1.382-1.092 2.38-1.092.98 0 1.723.364 2.227 1.092.401.579.601 1.293.601 2.142zm-1.441-.392c.009-.448-.089-.835-.294-1.162-.262-.42-.663-.63-1.204-.63-.495 0-.896.206-1.204.616a2.262 2.262 0 0 0-.448 1.176h3.15zM103.977 7.078c1.287 0 2.062 1.026 2.213 2.715h.784V6.596h1.166v9.09h-1.166v-4.887h-.765c-.09 1.84-.854 2.957-2.232 2.957-1.377 0-2.202-1.267-2.202-3.329-.001-2.072.794-3.349 2.202-3.349zm-1.076 3.339c0 1.328.352 2.353 1.065 2.353.774 0 1.106-1.016 1.106-2.353s-.332-2.363-1.106-2.363-1.065 1.035-1.065 2.363zm7.009 5.581h-1.167V6.545h1.167v9.453zM115.665 6.968v2.645c0 1.498 1.237 2.604 2.504 3.218l-.573.895c-.814-.473-1.94-1.237-2.534-2.263-.532 1.036-1.559 1.84-2.563 2.464l-.755-.805c1.429-.794 2.716-1.971 2.716-3.54V6.968h1.205zm4.485 9.03h-1.188v-5.762h-1.84V9.28h1.84V6.545h1.188v9.453zM49.135 29.123c-1.73.23-3.318.23-5.39.23v-6.324h4.585v.955h-3.399v4.395c1.408 0 2.675-.011 4.204-.222v.966zm3.428-2.695h-1.619v5.369h-1.187v-9.451h1.187v3.117h1.619v.965zM62.845 27.916h-3.781v1.77h-1.197v-1.77h-4.032v-.936h9.01v.936zm-7.844-3.51c0-1.025 1.106-1.93 3.318-1.93 2.172 0 3.358.895 3.358 1.93 0 1.156-1.166 1.951-3.358 1.951-2.191 0-3.318-.835-3.318-1.951zM62 31.637h-6.968V28.67h1.207v2.021H62v.946zm-5.782-7.231c0 .634.875 1.066 2.102 1.066 1.287 0 2.132-.433 2.132-1.066 0-.572-.905-1.025-2.132-1.025-1.257 0-2.102.453-2.102 1.025zM69.365 28.529v1.217h3.892v.955h-9.01v-.955h3.912v-1.217h1.206zm-3.891-.432v-3.138h5.319v-1.186h-5.35v-.926h6.546v3.037H66.67v1.287h5.682v.925h-6.878zM83.668 30.379h-9.01v-.955h9.01v.955zm-7.783-2.775v-4.625h6.627v.945h-5.44v2.734h5.562v.945h-6.749zM92.106 23.723h2.434v.936h-6.083v-.936h2.433v-1.377h1.217v1.377zm1.891 3.881c0 1.338-.895 2.465-2.494 2.465-1.538 0-2.493-1.057-2.493-2.465 0-1.527.965-2.473 2.493-2.473 1.6 0 2.494.925 2.494 2.473zm-1.166 0c0-.955-.413-1.527-1.328-1.527-.854 0-1.316.604-1.316 1.527 0 .886.462 1.509 1.316 1.509.915-.001 1.328-.624 1.328-1.509zm3.469-5.258v3.841h1.599v.995H96.3v4.615h-1.187v-9.451H96.3zM104.378 23.029c-.04 3.82-1.81 5.561-4.243 6.877l-.744-.814c2.483-1.357 3.67-2.825 3.73-5.107h-3.349v-.955h4.606zm2.665 8.768h-1.187v-9.451h1.187v9.451z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/lo/android.png b/browser/themes/shared/app-marketplace-icons/lo/android.png
new file mode 100644
index 0000000000..ea2eaa3ffb
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/lo/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/lt/android.png b/browser/themes/shared/app-marketplace-icons/lt/android.png
new file mode 100644
index 0000000000..7ad323fb97
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/lt/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/lt/ios.svg b/browser/themes/shared/app-marketplace-icons/lt/ios.svg
new file mode 100644
index 0000000000..dc3e080ee2
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/lt/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M48.71 13.433h-1.115l-.611-1.92H44.86l-.582 1.92h-1.086l2.104-6.538h1.3l2.114 6.538zm-1.91-2.725L46.247 9a22.123 22.123 0 0 1-.329-1.232h-.02A48.66 48.66 0 0 1 45.587 9l-.543 1.708H46.8zM52.523 9.504h-1.154v2.29c0 .582.204.873.611.873.188 0 .343-.016.466-.049l.028.795c-.207.078-.479.117-.814.117-.414 0-.737-.126-.97-.378-.233-.252-.35-.676-.35-1.271V9.504h-.688v-.785h.688v-.864l1.028-.31v1.173h1.154v.786zM56.858 12.079c0 .438-.161.79-.484 1.055s-.77.397-1.339.397c-.537 0-.992-.107-1.367-.32l.223-.776c.362.22.747.33 1.154.33.537 0 .805-.197.805-.592a.58.58 0 0 0-.174-.432c-.117-.113-.324-.225-.621-.334-.841-.311-1.261-.763-1.261-1.358a1.3 1.3 0 0 1 .465-1.019c.311-.271.722-.407 1.232-.407.466 0 .863.095 1.193.285l-.224.752a1.848 1.848 0 0 0-.96-.271c-.22 0-.392.052-.515.155a.498.498 0 0 0-.184.397c0 .161.064.293.193.396.11.097.323.203.641.319.816.31 1.223.784 1.223 1.423zM59.584 7.312a.603.603 0 0 1-.184.456.661.661 0 0 1-.476.175.611.611 0 0 1-.621-.63c0-.181.062-.33.185-.446s.274-.175.456-.175a.64.64 0 0 1 .456.175.582.582 0 0 1 .184.445zm-.116 6.121H58.42V8.719h1.048v4.714zM64.21 12.079c0 .438-.161.79-.484 1.055s-.77.397-1.339.397c-.537 0-.992-.107-1.367-.32l.223-.776c.362.22.747.33 1.154.33.537 0 .805-.197.805-.592a.58.58 0 0 0-.174-.432c-.117-.113-.324-.225-.621-.334-.841-.311-1.261-.763-1.261-1.358a1.3 1.3 0 0 1 .465-1.019c.311-.271.722-.407 1.232-.407.466 0 .863.095 1.193.285l-.223.752a1.848 1.848 0 0 0-.96-.271c-.22 0-.392.052-.515.155a.498.498 0 0 0-.184.397c0 .161.064.293.193.396.11.097.323.203.641.319.815.31 1.222.784 1.222 1.423zM66.936 7.312a.603.603 0 0 1-.184.456.661.661 0 0 1-.476.175.611.611 0 0 1-.621-.63c0-.181.062-.33.185-.446s.274-.175.456-.175a.64.64 0 0 1 .456.175.582.582 0 0 1 .184.445zm-.116 6.121h-1.048V8.719h1.048v4.714zM72.756 13.433l-.301-.02c-.033.052-.066.108-.102.17s-.07.131-.102.208a2.359 2.359 0 0 0-.084.228.905.905 0 0 0-.033.247.477.477 0 0 0 .494.524c.092 0 .174-.008.248-.024a.908.908 0 0 0 .189-.063l.154.524a1.073 1.073 0 0 1-.402.185 1.845 1.845 0 0 1-.441.058c-.291 0-.523-.075-.697-.223-.176-.149-.264-.372-.264-.669 0-.116.018-.238.049-.364a2.267 2.267 0 0 1 .242-.592c.047-.081.088-.15.127-.208l-.059-.698h-.02c-.33.55-.828.825-1.494.825-.465 0-.836-.146-1.115-.437-.33-.356-.494-.893-.494-1.61V8.719h1.046v2.6c0 .906.311 1.358.932 1.358.467 0 .789-.226.971-.679.045-.116.068-.249.068-.398V8.719h1.047v3.356c.002.446.015.899.041 1.358zM77.461 12.079c0 .438-.162.79-.484 1.055-.324.265-.77.397-1.34.397-.537 0-.992-.107-1.367-.32l.223-.776c.363.22.748.33 1.154.33.537 0 .805-.197.805-.592a.577.577 0 0 0-.174-.432c-.117-.113-.324-.225-.621-.334-.84-.311-1.26-.763-1.26-1.358 0-.407.154-.747.465-1.019s.721-.407 1.232-.407c.465 0 .863.095 1.193.285l-.225.752a1.841 1.841 0 0 0-.959-.271c-.221 0-.393.052-.516.155a.5.5 0 0 0-.184.397c0 .161.064.293.193.396.111.097.324.203.641.319.816.31 1.224.784 1.224 1.423zM83.174 13.433h-1.279l-1.428-2.153-.396.485v1.668h-1.049V6.556h1.049v4.268h.02c.129-.207.256-.388.377-.543l1.213-1.562h1.252l-1.736 1.94 1.977 2.774zM85.434 7.312a.603.603 0 0 1-.184.456.662.662 0 0 1-.477.175.614.614 0 0 1-.621-.63c0-.181.062-.33.186-.446s.273-.175.455-.175.334.059.457.175a.59.59 0 0 1 .184.445zm-.118 6.121H84.27V8.719h1.047v4.714zM89.555 9.504H88.4v2.29c0 .582.205.873.611.873.188 0 .344-.016.467-.049l.027.795c-.207.078-.479.117-.814.117-.414 0-.736-.126-.969-.378-.234-.252-.35-.676-.35-1.271V9.504h-.689v-.785h.689v-.864l1.027-.31v1.173h1.154v.786zM94.891 10.853c0 .188-.014.346-.039.475h-3.143c.014.466.164.821.455 1.067.266.22.609.33 1.029.33.465 0 .889-.074 1.271-.223l.164.728c-.447.194-.973.291-1.582.291-.73 0-1.305-.215-1.721-.645-.418-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.406-.504.955-.756 1.648-.756.678 0 1.193.252 1.541.756.281.4.42.895.42 1.483zm-1-.271a1.411 1.411 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.995.995 0 0 0-.834.427 1.586 1.586 0 0 0-.311.815h2.182zM100.408 7.312a.599.599 0 0 1-.184.456.66.66 0 0 1-.475.175.598.598 0 0 1-.441-.179c-.121-.12-.18-.27-.18-.451s.061-.33.184-.446.275-.175.457-.175c.18 0 .332.059.455.175s.184.264.184.445zm-.115 6.121h-1.049V8.719h1.049v4.714zM105.035 12.079c0 .438-.162.79-.484 1.055-.324.265-.77.397-1.34.397-.537 0-.992-.107-1.367-.32l.223-.776c.363.22.748.33 1.154.33.537 0 .805-.197.805-.592a.577.577 0 0 0-.174-.432c-.117-.113-.324-.225-.621-.334-.84-.311-1.26-.763-1.26-1.358 0-.407.154-.747.465-1.019s.721-.407 1.232-.407c.465 0 .863.095 1.193.285l-.225.753a1.841 1.841 0 0 0-.959-.271c-.221 0-.393.052-.516.155a.5.5 0 0 0-.184.397c0 .161.064.293.193.396.111.097.324.203.641.319.816.309 1.224.783 1.224 1.422zm-1.92-4-.941-1.416h.756l.543.902h.02l.553-.902h.738l-.932 1.416h-.737z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/lv/android.png b/browser/themes/shared/app-marketplace-icons/lv/android.png
new file mode 100644
index 0000000000..828f6bd659
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/lv/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/lv/ios.svg b/browser/themes/shared/app-marketplace-icons/lv/ios.svg
new file mode 100644
index 0000000000..45aa7eb35e
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/lv/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M47.391 13.433h-3.715V6.896h1.048v5.655h2.667v.882zM52.678 10.853c0 .188-.014.346-.039.475h-3.143c.013.466.164.821.455 1.067.266.22.608.33 1.028.33.466 0 .89-.074 1.271-.223l.164.728c-.446.194-.973.291-1.581.291-.73 0-1.305-.215-1.722-.645s-.625-1.007-.625-1.731c0-.711.193-1.303.582-1.775.407-.504.956-.756 1.648-.756.679 0 1.193.252 1.542.756.281.4.42.895.42 1.483zm-1-.271a1.427 1.427 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.997.997 0 0 0-.835.427 1.577 1.577 0 0 0-.31.815h2.182zM55.374 12.977c0 .925-.197 1.581-.592 1.969-.355.355-.873.537-1.552.543l-.106-.825c.42-.032.718-.149.893-.349.207-.227.311-.783.311-1.668V8.719h1.047v4.258zm.116-5.665a.603.603 0 0 1-.184.456.648.648 0 0 1-.466.175.614.614 0 0 1-.631-.63c0-.181.062-.33.185-.446s.278-.175.466-.175c.181 0 .331.059.451.175a.593.593 0 0 1 .179.445zM61.292 13.433h-.921l-.059-.718h-.02c-.33.55-.828.825-1.494.825-.465 0-.837-.146-1.115-.437-.33-.356-.494-.893-.494-1.61V8.719h1.047v2.6c0 .906.311 1.358.932 1.358.466 0 .789-.226.97-.679.045-.116.068-.249.068-.398V8.719h1.047v3.356c-.001.446.013.899.039 1.358zM67.616 11.018c0 .802-.217 1.436-.649 1.901-.389.414-.87.621-1.445.621-.621 0-1.067-.223-1.339-.669h-.02v2.483h-1.048v-5.083c0-.504-.013-1.022-.038-1.552h.921l.059.747h.02c.349-.562.879-.844 1.591-.844.556 0 1.02.22 1.392.66.37.439.556 1.018.556 1.736zm-1.067.039c0-.459-.104-.837-.311-1.135a1.071 1.071 0 0 0-.912-.466c-.259 0-.493.086-.703.257s-.348.396-.412.674a1.394 1.394 0 0 0-.049.32v.786c0 .343.105.632.315.868s.483.354.819.354c.395 0 .702-.152.922-.456.221-.303.331-.704.331-1.202zM70.332 7.312a.603.603 0 0 1-.184.456.662.662 0 0 1-.477.175.614.614 0 0 1-.621-.63c0-.181.062-.33.186-.446s.273-.175.455-.175.334.059.457.175a.586.586 0 0 1 .184.445zm-.117 6.121h-1.047V8.719h1.047v4.714zM75.957 10.853c0 .188-.014.346-.039.475h-3.143c.014.466.164.821.455 1.067.266.22.609.33 1.029.33.465 0 .889-.074 1.271-.223l.164.728c-.447.194-.973.291-1.582.291-.73 0-1.305-.215-1.721-.645-.418-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.406-.504.955-.756 1.648-.756.678 0 1.193.252 1.541.756.281.4.42.895.42 1.483zm-1-.271a1.411 1.411 0 0 0-.203-.805c-.182-.292-.459-.437-.834-.437a.995.995 0 0 0-.834.427 1.586 1.586 0 0 0-.311.815h2.182zM78.527 13.433H77.48V6.556h1.047v6.877zM83.92 13.433h-.941l-.076-.543h-.029c-.324.433-.783.65-1.377.65-.447 0-.807-.143-1.078-.427a1.337 1.337 0 0 1-.367-.96c0-.576.24-1.015.723-1.319.48-.304 1.158-.453 2.031-.446V10.3c0-.621-.326-.931-.977-.931-.465 0-.875.117-1.23.349l-.213-.688c.439-.271.979-.407 1.617-.407 1.234 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-.668-6.305v.631H80.99v-.631h2.262zm-.418 4.685v-.727c-1.158-.02-1.736.297-1.736.95 0 .246.068.43.203.553a.728.728 0 0 0 .51.184c.232 0 .445-.073.643-.218a.898.898 0 0 0 .38-.742zM89.875 13.433h-.93l-.049-.757h-.029c-.297.576-.803.864-1.514.864-.568 0-1.041-.223-1.416-.669s-.562-1.025-.562-1.736c0-.763.203-1.381.611-1.853.395-.44.879-.66 1.455-.66.633 0 1.076.213 1.328.64h.02V6.556h1.049v5.607c0 .459.012.882.037 1.27zm-1.086-1.988v-.786a1.194 1.194 0 0 0-.408-.965 1.03 1.03 0 0 0-.701-.257c-.391 0-.697.155-.922.466-.223.311-.336.708-.336 1.193 0 .466.107.844.322 1.135.227.31.533.465.916.465.344 0 .619-.129.828-.388.201-.239.301-.527.301-.863zM95.58 10.853c0 .188-.014.346-.039.475h-3.143c.012.466.164.821.455 1.067.266.22.607.33 1.027.33.467 0 .891-.074 1.271-.223l.164.728c-.445.194-.973.291-1.58.291-.73 0-1.305-.215-1.723-.645-.416-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.408-.504.957-.756 1.648-.756.68 0 1.193.252 1.543.756.279.4.42.895.42 1.483zm-1-.271a1.435 1.435 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.998.998 0 0 0-.836.427 1.567 1.567 0 0 0-.309.815h2.182zm.154-3.454v.631h-2.26v-.631h2.26zM99.479 9.504h-1.154v2.29c0 .582.205.873.611.873.188 0 .344-.016.467-.049l.027.795c-.207.078-.479.117-.814.117-.414 0-.736-.126-.969-.378-.234-.252-.35-.676-.35-1.271V9.504h-.689v-.785h.689v-.864l1.027-.31v1.173h1.154v.786zM107.859 13.433h-1.049v-2.7c0-.832-.316-1.248-.949-1.248a.95.95 0 0 0-.758.343 1.217 1.217 0 0 0-.291.808v2.796h-1.047v-3.366c0-.414-.014-.863-.039-1.349h.922l.049.737h.029c.121-.229.303-.418.543-.569.283-.176.602-.265.949-.265.441 0 .807.142 1.098.427.361.349.543.87.543 1.562v2.824zM114.01 11.037c0 .725-.207 1.319-.621 1.785-.434.479-1.01.718-1.727.718-.693 0-1.244-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.711-.698c.693 0 1.248.229 1.67.688.4.446.601 1.022.601 1.726zm-1.088.034c0-.435-.094-.808-.281-1.119-.219-.376-.533-.564-.939-.564-.422 0-.742.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .713-.191.939-.574.195-.317.291-.693.291-1.128z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/mk/android.png b/browser/themes/shared/app-marketplace-icons/mk/android.png
new file mode 100644
index 0000000000..e3f7f0a856
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/mk/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ml/android.png b/browser/themes/shared/app-marketplace-icons/ml/android.png
new file mode 100644
index 0000000000..5debb8c1a1
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ml/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/moz.build b/browser/themes/shared/app-marketplace-icons/moz.build
new file mode 100644
index 0000000000..d988c0ff9b
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/moz.build
@@ -0,0 +1,7 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+JAR_MANIFESTS += ["jar.mn"]
diff --git a/browser/themes/shared/app-marketplace-icons/mr/android.png b/browser/themes/shared/app-marketplace-icons/mr/android.png
new file mode 100644
index 0000000000..ca00f14064
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/mr/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ms/android.png b/browser/themes/shared/app-marketplace-icons/ms/android.png
new file mode 100644
index 0000000000..e6c25272c0
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ms/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ms/ios.svg b/browser/themes/shared/app-marketplace-icons/ms/ios.svg
new file mode 100644
index 0000000000..b8e2904aa7
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ms/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M50.244 13.433h-1.019l-.136-2.735c-.065-1.235-.094-2.153-.088-2.755h-.029c-.207.77-.462 1.594-.766 2.474l-1.019 2.958h-.796l-.931-2.91a28.27 28.27 0 0 1-.679-2.522h-.02c-.033.983-.071 1.917-.117 2.803l-.154 2.687h-.98l.437-6.538h1.349l.94 2.832c.233.699.437 1.449.611 2.25h.029a25.68 25.68 0 0 1 .659-2.25l.98-2.832h1.348l.381 6.538zM55.789 13.433h-.921l-.059-.718h-.02c-.33.55-.828.825-1.494.825-.465 0-.837-.146-1.115-.437-.33-.356-.494-.893-.494-1.61V8.719h1.047v2.6c0 .906.311 1.358.932 1.358.466 0 .789-.226.97-.679.045-.116.068-.249.068-.398V8.719h1.047v3.356c0 .446.013.899.039 1.358zM60.871 13.433h-.941l-.077-.543h-.029c-.323.433-.782.65-1.377.65-.446 0-.806-.143-1.077-.427a1.337 1.337 0 0 1-.37-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c0 .471.024.846.069 1.124zm-1.087-1.62v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.73.73 0 0 0 .511.184c.231 0 .445-.073.642-.218a.889.889 0 0 0 .38-.742zM64.683 9.504h-1.154v2.29c0 .582.204.873.611.873.188 0 .343-.016.466-.049l.028.795c-.207.078-.479.117-.814.117-.414 0-.737-.126-.97-.378-.233-.252-.35-.676-.35-1.271V9.504h-.688v-.785h.688v-.864l1.028-.31v1.173h1.154v.786zM70.744 9.504H69.59v2.29c0 .582.205.873.611.873.188 0 .344-.016.467-.049l.027.795c-.207.078-.479.117-.814.117-.414 0-.736-.126-.969-.378-.233-.252-.35-.676-.35-1.271V9.504h-.688v-.785h.688v-.864l1.028-.31v1.173h1.154v.786zM75.973 13.433h-.92l-.059-.718h-.02c-.33.55-.828.825-1.494.825-.465 0-.838-.146-1.115-.437-.33-.356-.494-.893-.494-1.61V8.719h1.047v2.6c0 .906.311 1.358.932 1.358.465 0 .789-.226.969-.679.045-.116.068-.249.068-.398V8.719h1.047v3.356c0 .446.013.899.039 1.358zM80.006 9.641a1.74 1.74 0 0 0-.33-.029c-.367 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474h-1.047l.01-3.23c0-.543-.014-1.038-.039-1.484h.912l.039.902h.029c.109-.311.283-.56.523-.747.232-.168.484-.252.756-.252.098 0 .186.006.262.019v.999zM85.176 13.433h-.92l-.059-.718h-.02c-.33.55-.828.825-1.494.825-.465 0-.838-.146-1.115-.437-.33-.356-.494-.893-.494-1.61V8.719h1.047v2.6c0 .906.311 1.358.932 1.358.465 0 .789-.226.969-.679.045-.116.068-.249.068-.398V8.719h1.047v3.356c0 .446.013.899.039 1.358zM90.814 13.433h-1.047v-2.7c0-.832-.316-1.248-.951-1.248-.311 0-.562.114-.756.343s-.291.499-.291.808v2.796H86.72v-3.366c0-.414-.012-.863-.037-1.349h.92l.049.737h.029a1.53 1.53 0 0 1 .543-.569c.285-.176.602-.265.951-.265.439 0 .805.142 1.096.427.363.349.543.87.543 1.562v2.824zM99.391 11.018c0 .802-.217 1.436-.65 1.901a1.9 1.9 0 0 1-1.445.621c-.621 0-1.066-.223-1.338-.669h-.02v2.483h-1.049v-5.083c0-.504-.012-1.022-.037-1.552h.92l.059.747h.02c.35-.562.879-.844 1.592-.844.555 0 1.02.22 1.391.66.371.439.557 1.018.557 1.736zm-1.067.039c0-.459-.104-.837-.311-1.135a1.073 1.073 0 0 0-.912-.466c-.26 0-.494.086-.703.257a1.182 1.182 0 0 0-.412.674 1.34 1.34 0 0 0-.049.32v.786c0 .343.105.632.314.868.211.236.484.354.82.354.395 0 .701-.152.922-.456.22-.303.331-.704.331-1.202zM104.24 13.433h-.941l-.076-.543h-.029c-.324.433-.783.65-1.377.65-.447 0-.807-.143-1.078-.427a1.337 1.337 0 0 1-.367-.96c0-.576.24-1.015.723-1.319.48-.304 1.158-.453 2.031-.446V10.3c0-.621-.326-.931-.977-.931-.465 0-.875.117-1.23.349l-.213-.688c.439-.271.979-.407 1.617-.407 1.234 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-1.086-1.62v-.727c-1.158-.02-1.736.297-1.736.95 0 .246.068.43.203.553a.728.728 0 0 0 .51.184c.232 0 .445-.073.643-.218a.898.898 0 0 0 .38-.742zM109.934 13.433h-.932l-.049-.757h-.029c-.297.576-.801.864-1.512.864-.57 0-1.041-.223-1.416-.669s-.562-1.025-.562-1.736c0-.763.203-1.381.609-1.853.395-.44.881-.66 1.455-.66.635 0 1.078.213 1.33.64h.02V6.556h1.047v5.607c0 .459.013.882.039 1.27zm-1.086-1.988v-.786a1.184 1.184 0 0 0-.41-.965 1.027 1.027 0 0 0-.701-.257c-.389 0-.695.155-.92.466s-.336.708-.336 1.193c0 .466.107.844.322 1.135.227.31.531.465.914.465.344 0 .621-.129.828-.388.201-.239.303-.527.303-.863zM115.01 13.433h-.941l-.076-.543h-.029c-.324.433-.783.65-1.377.65-.447 0-.807-.143-1.078-.427a1.337 1.337 0 0 1-.367-.96c0-.576.24-1.015.723-1.319.48-.304 1.158-.453 2.031-.446V10.3c0-.621-.326-.931-.977-.931-.465 0-.875.117-1.23.349l-.213-.688c.439-.271.979-.407 1.617-.407 1.234 0 1.85.65 1.85 1.95v1.736c-.002.471.022.846.067 1.124zm-1.086-1.62v-.727c-1.158-.02-1.736.297-1.736.95 0 .246.068.43.203.553a.728.728 0 0 0 .51.184c.232 0 .445-.073.643-.218a.898.898 0 0 0 .38-.742z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/mt/ios.svg b/browser/themes/shared/app-marketplace-icons/mt/ios.svg
new file mode 100644
index 0000000000..3f68a2fe59
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/mt/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M48.653 13.433h-1.077l-1.804-3.036a20.967 20.967 0 0 1-1.164-2.231l-.029.01c.045.731.067 1.655.067 2.774v2.483h-.97V6.896h1.164l1.805 2.997c.42.698.792 1.419 1.115 2.163l.02-.01a29.027 29.027 0 0 1-.107-2.716V6.896h.98v6.537zM51.708 7.312a.603.603 0 0 1-.184.456.661.661 0 0 1-.476.175.611.611 0 0 1-.621-.63c0-.181.062-.33.185-.446s.274-.175.456-.175a.64.64 0 0 1 .456.175.586.586 0 0 1 .184.445zm-.117 6.121h-1.048V8.719h1.048v4.714zM56.819 13.433h-3.841v-.611l1.882-2.473c.116-.155.329-.411.64-.767v-.019h-2.338v-.844h3.608v.65l-1.843 2.435c-.207.265-.42.521-.64.766v.02h2.531v.843zm-1.862-5.461c-.155 0-.284-.055-.388-.165s-.155-.239-.155-.388c0-.162.053-.296.16-.402.106-.107.237-.16.393-.16s.283.053.383.16a.56.56 0 0 1 .15.402.563.563 0 0 1-.146.388.493.493 0 0 1-.388.165h-.009zM61.573 13.433h-3.841v-.611l1.882-2.473c.116-.155.329-.411.64-.767v-.019h-2.338v-.844h3.608v.65l-1.843 2.435c-.207.265-.42.521-.64.766v.02h2.531v.843zM59.71 7.972c-.155 0-.284-.055-.388-.165s-.155-.239-.155-.388c0-.162.053-.296.16-.402.106-.107.237-.16.393-.16s.283.053.383.16a.56.56 0 0 1 .15.402.563.563 0 0 1-.146.388.493.493 0 0 1-.388.165h-.009zM66.84 10.853c0 .188-.014.346-.039.475h-3.143c.013.466.164.821.455 1.067.266.22.608.33 1.028.33.466 0 .89-.074 1.271-.223l.164.728c-.446.194-.973.291-1.581.291-.73 0-1.305-.215-1.722-.645s-.625-1.007-.625-1.731c0-.711.193-1.303.582-1.775.407-.504.956-.756 1.648-.756.679 0 1.193.252 1.542.756.281.4.42.895.42 1.483zm-1-.271a1.427 1.427 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.997.997 0 0 0-.835.427 1.577 1.577 0 0 0-.31.815h2.182zM69.41 13.433h-1.048V6.556h1.048v6.877zM80.855 13.433h-1.027v-2.642c0-.871-.299-1.306-.893-1.306a.827.827 0 0 0-.684.324 1.182 1.182 0 0 0-.258.759v2.864h-1.027v-2.777c0-.355-.074-.639-.219-.852-.146-.213-.361-.319-.645-.319a.848.848 0 0 0-.699.348 1.25 1.25 0 0 0-.271.793v2.806h-1.029v-3.366c0-.414-.012-.863-.037-1.349h.9l.049.717h.029c.324-.542.803-.814 1.436-.814.641 0 1.074.294 1.301.882h.02c.148-.246.332-.443.553-.591.277-.194.598-.291.959-.291.422 0 .768.142 1.039.427.336.355.504.886.504 1.591v2.796zM83.852 7.312a.599.599 0 0 1-.184.456.66.66 0 0 1-.475.175.598.598 0 0 1-.441-.179c-.121-.12-.18-.27-.18-.451s.061-.33.184-.446.275-.175.457-.175c.18 0 .332.059.455.175s.184.264.184.445zm-.116 6.121h-1.049V8.719h1.049v4.714zM86.645 13.433h-1.047V6.556h1.047v6.877zM89.555 13.433h-1.049V6.556h1.049v6.877zM93.463 11.202h-2.414v-.737h2.414v.737z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/my/android.png b/browser/themes/shared/app-marketplace-icons/my/android.png
new file mode 100644
index 0000000000..0f90e2d8e4
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/my/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/nb-NO/android.png b/browser/themes/shared/app-marketplace-icons/nb-NO/android.png
new file mode 100644
index 0000000000..1bf3d31a1e
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/nb-NO/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg b/browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg
new file mode 100644
index 0000000000..5a3831467f
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/nb-NO/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.717 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909h-2.211l4.284-13.308h2.646l4.305 13.308zm-3.889-5.549-1.125-3.475c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.734 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.771 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.039v5.055H66.61V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.756.896 1.134 2.074 1.134 3.535zm-2.171.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.447-.619.672-1.435.672-2.449zM88.111 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.16 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.764 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.817.907 1.226 2.078 1.226 3.513zm-2.213.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.394-.645.591-1.412.591-2.296zM112.693 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.229 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.562.815.846 1.823.846 3.02zm-2.034-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M47.463 13.433h-3.715V6.896h1.048v5.655h2.667v.882zM52.401 13.433h-.941l-.077-.543h-.029c-.323.433-.782.65-1.377.65-.446 0-.806-.143-1.077-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-1.087-1.62v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.73.73 0 0 0 .511.184c.231 0 .445-.073.642-.218a.889.889 0 0 0 .38-.742zM57.046 12.079c0 .438-.161.79-.484 1.055s-.77.397-1.339.397c-.537 0-.992-.107-1.367-.32l.223-.776c.362.22.747.33 1.154.33.537 0 .805-.197.805-.592a.58.58 0 0 0-.174-.432c-.117-.113-.324-.225-.621-.334-.841-.311-1.261-.763-1.261-1.358a1.3 1.3 0 0 1 .465-1.019c.311-.271.722-.407 1.232-.407.466 0 .863.095 1.193.285l-.223.752a1.848 1.848 0 0 0-.96-.271c-.22 0-.392.052-.515.155a.498.498 0 0 0-.184.397c0 .161.064.293.193.396.11.097.323.203.641.319.815.31 1.222.784 1.222 1.423zM60.986 9.504h-1.154v2.29c0 .582.204.873.611.873.188 0 .343-.016.466-.049l.028.795c-.207.078-.479.117-.814.117-.414 0-.737-.126-.97-.378-.233-.252-.35-.676-.35-1.271V9.504h-.688v-.785h.688v-.864l1.028-.31v1.173h1.154v.786zM69.365 13.433h-1.047v-2.7c0-.832-.316-1.248-.95-1.248a.946.946 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.737h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.44 0 .806.142 1.097.427.363.349.542.87.542 1.562v2.824zM75.09 10.853c0 .188-.014.346-.039.475h-3.143c.012.466.164.821.455 1.067.266.22.607.33 1.027.33.467 0 .891-.074 1.271-.223l.164.728c-.445.194-.973.291-1.58.291-.73 0-1.305-.215-1.723-.645-.416-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.408-.504.957-.756 1.648-.756.68 0 1.193.252 1.543.756.279.4.42.895.42 1.483zm-1-.271a1.435 1.435 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.998.998 0 0 0-.836.427 1.567 1.567 0 0 0-.309.815h2.182zM80.803 13.433h-.932l-.049-.757h-.029c-.297.576-.801.864-1.512.864-.57 0-1.041-.223-1.416-.669s-.562-1.025-.562-1.736c0-.763.203-1.381.609-1.853.395-.44.881-.66 1.455-.66.635 0 1.078.213 1.33.64h.02V6.556h1.047v5.607c0 .459.013.882.039 1.27zm-1.086-1.988v-.786a1.184 1.184 0 0 0-.41-.965 1.027 1.027 0 0 0-.701-.257c-.389 0-.695.155-.92.466s-.336.708-.336 1.193c0 .466.107.844.322 1.135.227.31.531.465.914.465.344 0 .621-.129.828-.388.201-.239.303-.527.303-.863zM88.047 6.575l-.096.815a1.337 1.337 0 0 0-.514-.097c-.551 0-.826.395-.826 1.184v.242h1.059v.786h-1.049v3.929h-1.047v-3.93h-.641v-.785h.641v-.214c0-.718.184-1.254.553-1.61.311-.297.705-.446 1.184-.446.277 0 .523.042.736.126zM91.451 9.641a1.74 1.74 0 0 0-.33-.029c-.367 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474h-1.047l.01-3.23c0-.543-.014-1.038-.039-1.484h.912l.039.902h.029c.109-.311.283-.56.523-.747.232-.168.484-.252.756-.252.098 0 .186.006.262.019v.999zM96.322 13.433h-.941l-.078-.543h-.029c-.322.433-.781.65-1.377.65-.445 0-.805-.143-1.076-.427a1.339 1.339 0 0 1-.369-.96c0-.576.24-1.015.723-1.319.482-.304 1.16-.453 2.033-.446V10.3c0-.621-.326-.931-.979-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.232 0 1.85.65 1.85 1.95v1.736c0 .471.023.846.068 1.124zm-1.088-1.62v-.727c-1.156-.02-1.734.297-1.734.95 0 .246.066.43.201.553a.733.733 0 0 0 .512.184c.23 0 .445-.073.641-.218a.893.893 0 0 0 .38-.742z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/ne-NP/android.png b/browser/themes/shared/app-marketplace-icons/ne-NP/android.png
new file mode 100644
index 0000000000..ac4d645359
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ne-NP/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/nl/android.png b/browser/themes/shared/app-marketplace-icons/nl/android.png
new file mode 100644
index 0000000000..3521f86305
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/nl/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/nl/ios.svg b/browser/themes/shared/app-marketplace-icons/nl/ios.svg
new file mode 100644
index 0000000000..1d11155096
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/nl/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.717 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909h-2.211l4.284-13.308h2.646l4.305 13.308zm-3.889-5.549-1.125-3.475c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.734 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.771 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.039v5.055H66.61V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.756.896 1.134 2.074 1.134 3.535zm-2.171.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.447-.619.672-1.435.672-2.449zM88.111 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.16 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.764 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.817.907 1.226 2.078 1.226 3.513zm-2.213.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.394-.645.591-1.412.591-2.296zM112.693 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.229 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.562.815.846 1.823.846 3.02zm-2.034-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M49.31 9.903c0 1.213-.363 2.126-1.09 2.74-.674.567-1.63.85-2.87.85-.613 0-1.14-.027-1.58-.08v-6.63c.573-.093 1.193-.14 1.86-.14 1.18 0 2.07.257 2.67.77.673.58 1.01 1.41 1.01 2.49zm-1.14.03c0-.787-.209-1.39-.625-1.81-.417-.42-1.025-.63-1.825-.63-.34 0-.63.023-.87.07v5.04c.134.02.377.03.73.03.826 0 1.465-.23 1.915-.69.45-.46.675-1.13.675-2.01zM55.35 10.963c0 .747-.214 1.36-.64 1.84-.447.493-1.04.74-1.78.74-.714 0-1.282-.236-1.705-.71-.424-.473-.635-1.07-.635-1.79 0-.753.218-1.37.654-1.85.437-.48 1.025-.72 1.766-.72.713 0 1.286.237 1.72.71.413.46.62 1.053.62 1.78zm-1.12.035c0-.448-.097-.833-.29-1.153-.227-.388-.55-.582-.97-.582-.434 0-.764.194-.99.582-.193.321-.29.712-.29 1.173 0 .448.097.833.29 1.153.233.388.56.582.98.582.413 0 .736-.197.97-.591.2-.328.3-.716.3-1.164zM63.451 8.573l-1.521 4.86h-.99l-.63-2.11c-.16-.527-.29-1.05-.39-1.57h-.02a11.361 11.361 0 0 1-.39 1.57l-.67 2.11h-1l-1.43-4.86h1.109l.55 2.31a23.4 23.4 0 0 1 .33 1.56h.021c.08-.406.213-.923.399-1.55l.69-2.32h.88l.66 2.27c.16.553.29 1.086.39 1.6h.03c.073-.5.184-1.033.33-1.6l.59-2.27h1.062zM69.051 13.433H67.97V10.65c0-.858-.327-1.287-.98-1.287-.32 0-.58.118-.78.354-.199.236-.3.514-.3.833v2.883h-1.08v-3.47c0-.426-.013-.89-.04-1.39h.95l.05.76h.03c.127-.236.313-.432.561-.587.292-.182.619-.273.979-.273.453 0 .83.146 1.13.44.373.36.561.897.561 1.61v2.91zM72.029 13.433h-1.08v-7.09h1.08v7.09zM78.389 10.963c0 .747-.213 1.36-.639 1.84-.447.493-1.041.74-1.781.74-.713 0-1.281-.236-1.705-.71-.424-.473-.635-1.07-.635-1.79 0-.753.219-1.37.654-1.85.438-.48 1.025-.72 1.766-.72.713 0 1.287.237 1.721.71.412.46.619 1.053.619 1.78zm-1.119.035c0-.448-.098-.833-.291-1.153-.227-.388-.549-.582-.969-.582-.434 0-.764.194-.99.582-.193.321-.291.712-.291 1.173 0 .448.098.833.291 1.153.232.388.559.582.98.582.412 0 .736-.197.969-.591.201-.328.301-.716.301-1.164zM83.619 13.433h-.971l-.08-.56h-.029c-.334.447-.807.67-1.42.67-.459 0-.83-.146-1.109-.44a1.381 1.381 0 0 1-.381-.99c0-.593.248-1.047.746-1.36.496-.313 1.193-.466 2.094-.46v-.09c0-.64-.336-.96-1.008-.96-.479 0-.9.12-1.266.36l-.221-.71c.453-.28 1.008-.42 1.668-.42 1.271 0 1.906.67 1.906 2.01v1.79c.001.487.024.873.071 1.16zm-1.119-1.67v-.75c-1.193-.02-1.791.307-1.791.98 0 .253.07.443.209.57a.75.75 0 0 0 .527.19c.238 0 .459-.075.66-.225a.914.914 0 0 0 .373-.575.752.752 0 0 0 .022-.19zM89.76 13.433h-.961l-.049-.78h-.031c-.307.593-.826.89-1.559.89-.588 0-1.074-.23-1.461-.69s-.58-1.057-.58-1.79c0-.787.211-1.423.631-1.91.406-.454.906-.68 1.5-.68.652 0 1.109.22 1.369.66h.02v-2.79h1.08v5.78c0 .474.013.91.041 1.31zm-1.121-2.05v-.81c0-.14-.01-.253-.029-.34a1.22 1.22 0 0 0-.393-.655 1.051 1.051 0 0 0-.723-.265c-.4 0-.717.16-.949.48-.23.32-.346.73-.346 1.23 0 .48.111.87.332 1.17.234.32.549.48.943.48.355 0 .639-.133.854-.4a1.34 1.34 0 0 0 .311-.89zM95.76 7.123c0 .193-.064.35-.189.47a.686.686 0 0 1-.49.18.616.616 0 0 1-.455-.185.621.621 0 0 1-.187-.465c0-.187.062-.34.189-.46s.283-.18.471-.18c.186 0 .344.06.471.18.125.12.19.274.19.46zm-.121 6.31h-1.08v-4.86h1.08v4.86zM101.779 13.433h-1.08V10.65c0-.858-.328-1.287-.98-1.287-.32 0-.58.118-.781.354a1.253 1.253 0 0 0-.299.833v2.883h-1.08v-3.47c0-.426-.014-.89-.041-1.39h.951l.049.76h.031a1.55 1.55 0 0 1 .561-.587c.293-.182.619-.273.979-.273.453 0 .83.146 1.131.44.373.36.561.897.561 1.61v2.91zM110.918 13.433h-.959l-.051-.78h-.029c-.307.593-.828.89-1.561.89-.586 0-1.074-.23-1.459-.69-.387-.46-.58-1.057-.58-1.79 0-.787.209-1.423.629-1.91.406-.454.906-.68 1.5-.68.654 0 1.109.22 1.371.66h.02v-2.79h1.08v5.78c0 .474.014.91.039 1.31zm-1.119-2.05v-.81c0-.14-.01-.253-.031-.34-.061-.26-.189-.478-.391-.655s-.441-.265-.723-.265c-.402 0-.719.16-.949.48-.23.32-.346.73-.346 1.23 0 .48.109.87.33 1.17.234.32.549.48.943.48.355 0 .641-.133.854-.4a1.33 1.33 0 0 0 .313-.89zM116.799 10.773c0 .193-.014.357-.041.49h-3.238c.012.48.17.847.469 1.1.273.227.627.34 1.061.34.48 0 .916-.077 1.311-.23l.17.75c-.461.2-1.004.3-1.631.3-.754 0-1.346-.221-1.775-.665-.43-.443-.645-1.038-.645-1.785 0-.733.199-1.343.6-1.83.42-.52.986-.78 1.701-.78.699 0 1.229.26 1.59.78.283.414.428.924.428 1.53zm-1.029-.28a1.47 1.47 0 0 0-.211-.83c-.188-.3-.473-.45-.859-.45-.354 0-.641.147-.861.44-.18.233-.285.513-.318.84h2.249z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/nn-NO/android.png b/browser/themes/shared/app-marketplace-icons/nn-NO/android.png
new file mode 100644
index 0000000000..1bf3d31a1e
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/nn-NO/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg b/browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg
new file mode 100644
index 0000000000..5a3831467f
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/nn-NO/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.717 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909h-2.211l4.284-13.308h2.646l4.305 13.308zm-3.889-5.549-1.125-3.475c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.734 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.771 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.039v5.055H66.61V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.756.896 1.134 2.074 1.134 3.535zm-2.171.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.447-.619.672-1.435.672-2.449zM88.111 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.16 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.764 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.817.907 1.226 2.078 1.226 3.513zm-2.213.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.394-.645.591-1.412.591-2.296zM112.693 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.229 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.562.815.846 1.823.846 3.02zm-2.034-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M47.463 13.433h-3.715V6.896h1.048v5.655h2.667v.882zM52.401 13.433h-.941l-.077-.543h-.029c-.323.433-.782.65-1.377.65-.446 0-.806-.143-1.077-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-1.087-1.62v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.73.73 0 0 0 .511.184c.231 0 .445-.073.642-.218a.889.889 0 0 0 .38-.742zM57.046 12.079c0 .438-.161.79-.484 1.055s-.77.397-1.339.397c-.537 0-.992-.107-1.367-.32l.223-.776c.362.22.747.33 1.154.33.537 0 .805-.197.805-.592a.58.58 0 0 0-.174-.432c-.117-.113-.324-.225-.621-.334-.841-.311-1.261-.763-1.261-1.358a1.3 1.3 0 0 1 .465-1.019c.311-.271.722-.407 1.232-.407.466 0 .863.095 1.193.285l-.223.752a1.848 1.848 0 0 0-.96-.271c-.22 0-.392.052-.515.155a.498.498 0 0 0-.184.397c0 .161.064.293.193.396.11.097.323.203.641.319.815.31 1.222.784 1.222 1.423zM60.986 9.504h-1.154v2.29c0 .582.204.873.611.873.188 0 .343-.016.466-.049l.028.795c-.207.078-.479.117-.814.117-.414 0-.737-.126-.97-.378-.233-.252-.35-.676-.35-1.271V9.504h-.688v-.785h.688v-.864l1.028-.31v1.173h1.154v.786zM69.365 13.433h-1.047v-2.7c0-.832-.316-1.248-.95-1.248a.946.946 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.737h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.44 0 .806.142 1.097.427.363.349.542.87.542 1.562v2.824zM75.09 10.853c0 .188-.014.346-.039.475h-3.143c.012.466.164.821.455 1.067.266.22.607.33 1.027.33.467 0 .891-.074 1.271-.223l.164.728c-.445.194-.973.291-1.58.291-.73 0-1.305-.215-1.723-.645-.416-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.408-.504.957-.756 1.648-.756.68 0 1.193.252 1.543.756.279.4.42.895.42 1.483zm-1-.271a1.435 1.435 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.998.998 0 0 0-.836.427 1.567 1.567 0 0 0-.309.815h2.182zM80.803 13.433h-.932l-.049-.757h-.029c-.297.576-.801.864-1.512.864-.57 0-1.041-.223-1.416-.669s-.562-1.025-.562-1.736c0-.763.203-1.381.609-1.853.395-.44.881-.66 1.455-.66.635 0 1.078.213 1.33.64h.02V6.556h1.047v5.607c0 .459.013.882.039 1.27zm-1.086-1.988v-.786a1.184 1.184 0 0 0-.41-.965 1.027 1.027 0 0 0-.701-.257c-.389 0-.695.155-.92.466s-.336.708-.336 1.193c0 .466.107.844.322 1.135.227.31.531.465.914.465.344 0 .621-.129.828-.388.201-.239.303-.527.303-.863zM88.047 6.575l-.096.815a1.337 1.337 0 0 0-.514-.097c-.551 0-.826.395-.826 1.184v.242h1.059v.786h-1.049v3.929h-1.047v-3.93h-.641v-.785h.641v-.214c0-.718.184-1.254.553-1.61.311-.297.705-.446 1.184-.446.277 0 .523.042.736.126zM91.451 9.641a1.74 1.74 0 0 0-.33-.029c-.367 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474h-1.047l.01-3.23c0-.543-.014-1.038-.039-1.484h.912l.039.902h.029c.109-.311.283-.56.523-.747.232-.168.484-.252.756-.252.098 0 .186.006.262.019v.999zM96.322 13.433h-.941l-.078-.543h-.029c-.322.433-.781.65-1.377.65-.445 0-.805-.143-1.076-.427a1.339 1.339 0 0 1-.369-.96c0-.576.24-1.015.723-1.319.482-.304 1.16-.453 2.033-.446V10.3c0-.621-.326-.931-.979-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.232 0 1.85.65 1.85 1.95v1.736c0 .471.023.846.068 1.124zm-1.088-1.62v-.727c-1.156-.02-1.734.297-1.734.95 0 .246.066.43.201.553a.733.733 0 0 0 .512.184c.23 0 .445-.073.641-.218a.893.893 0 0 0 .38-.742z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/pa-IN/android.png b/browser/themes/shared/app-marketplace-icons/pa-IN/android.png
new file mode 100644
index 0000000000..12ccc49e4a
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/pa-IN/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/pl/android.png b/browser/themes/shared/app-marketplace-icons/pl/android.png
new file mode 100644
index 0000000000..2229bade13
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/pl/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/pl/ios.svg b/browser/themes/shared/app-marketplace-icons/pl/ios.svg
new file mode 100644
index 0000000000..1af1327869
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/pl/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.795c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.858 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.04-.013-3.386-1.29-3.42-5.153zM26.928 10.317c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.716 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.646 31.516h-2.271l-1.244-3.91h-4.324l-1.185 3.91h-2.211l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549-1.125-3.475c-.119-.355-.342-1.191-.671-2.508h-.04a97.65 97.65 0 0 1-.632 2.508l-1.105 3.475h3.573zM64.663 26.599c0 1.632-.441 2.923-1.323 3.87-.79.842-1.771 1.264-2.942 1.264-1.264 0-2.172-.455-2.725-1.363h-.04v5.055h-2.132V25.078c0-1.026-.027-2.079-.079-3.158h1.875l.119 1.52h.04c.711-1.145 1.79-1.717 3.238-1.717 1.132 0 2.077.447 2.833 1.342.757.895 1.136 2.073 1.136 3.534zm-2.172.079c0-.935-.21-1.705-.632-2.311-.461-.631-1.08-.947-1.856-.947-.526 0-1.004.175-1.431.523a2.423 2.423 0 0 0-.839 1.372c-.066.264-.099.48-.099.651v1.6c0 .697.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.311 1.875-.928.448-.619.672-1.436.672-2.449zM75.7 26.599c0 1.632-.441 2.923-1.324 3.87-.789.842-1.77 1.264-2.941 1.264-1.264 0-2.172-.455-2.725-1.363h-.039v5.055h-2.132V25.078c0-1.026-.027-2.079-.079-3.158h1.875l.119 1.52h.04c.711-1.145 1.789-1.717 3.238-1.717 1.131 0 2.076.447 2.834 1.342.755.895 1.134 2.073 1.134 3.534zm-2.172.079c0-.935-.211-1.705-.633-2.311-.461-.631-1.078-.947-1.855-.947-.527 0-1.004.175-1.432.523s-.707.807-.839 1.372c-.065.264-.099.48-.099.651v1.6c0 .697.214 1.287.641 1.768.428.48.984.721 1.67.721.803 0 1.428-.311 1.875-.928.448-.619.672-1.436.672-2.449zM88.04 27.783c0 1.133-.394 2.053-1.182 2.764-.867.777-2.075 1.166-3.625 1.166-1.432 0-2.581-.277-3.449-.83l.494-1.777c.935.566 1.962.85 3.081.85.804 0 1.429-.182 1.877-.543.447-.363.671-.848.671-1.455 0-.539-.185-.994-.553-1.363s-.98-.713-1.836-1.029c-2.33-.869-3.495-2.143-3.495-3.816 0-1.094.408-1.991 1.225-2.69.815-.699 1.901-1.048 3.258-1.048 1.211 0 2.218.211 3.021.632l-.533 1.738c-.75-.408-1.599-.612-2.547-.612-.75 0-1.336.185-1.757.553a1.58 1.58 0 0 0-.533 1.204c0 .526.204.961.612 1.304.355.315 1 .658 1.935 1.026 1.146.461 1.987 1.001 2.527 1.618.54.617.809 1.387.809 2.308zM95.088 23.519h-2.35v4.659c0 1.186.415 1.777 1.244 1.777.382 0 .697-.033.948-.098l.059 1.619c-.421.156-.974.236-1.658.236-.843 0-1.501-.258-1.975-.77-.474-.514-.711-1.377-.711-2.588v-4.837h-1.401V21.92h1.401v-1.758l2.093-.632v2.39h2.35v1.599zM105.691 26.639c0 1.475-.422 2.686-1.264 3.633-.882.975-2.054 1.461-3.515 1.461-1.409 0-2.53-.467-3.366-1.402-.836-.934-1.254-2.113-1.254-3.533 0-1.488.431-2.705 1.293-3.653s2.024-1.421 3.485-1.421c1.408 0 2.54.467 3.396 1.401.817.907 1.225 2.078 1.225 3.514zm-2.212.068c0-.885-.19-1.643-.572-2.277-.447-.766-1.086-1.148-1.915-1.148-.856 0-1.508.383-1.955 1.148-.382.635-.572 1.406-.572 2.317 0 .885.19 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.815 0 1.454-.389 1.915-1.168.394-.646.591-1.411.591-2.296zM112.621 23.795a3.69 3.69 0 0 0-.671-.059c-.751 0-1.33.283-1.738.849-.355.501-.533 1.132-.533 1.896v5.035h-2.132l.02-6.575c0-1.106-.026-2.112-.079-3.021h1.856l.079 1.836h.059c.224-.632.579-1.139 1.066-1.521a2.572 2.572 0 0 1 1.54-.513c.197 0 .375.013.533.039v2.034zM122.157 26.264c0 .381-.026.703-.079.967h-6.396c.025.947.335 1.672.928 2.172.539.447 1.237.672 2.093.672.947 0 1.81-.152 2.587-.455l.335 1.48c-.908.396-1.981.594-3.218.594-1.488 0-2.656-.438-3.505-1.314-.849-.875-1.273-2.049-1.273-3.523 0-1.447.395-2.652 1.185-3.613.829-1.027 1.948-1.54 3.356-1.54 1.382 0 2.429.513 3.14 1.54.564.815.847 1.821.847 3.02zm-2.033-.553c.013-.633-.126-1.179-.415-1.64-.368-.593-.935-.888-1.698-.888-.697 0-1.264.289-1.697.868-.355.461-.566 1.014-.632 1.659h4.442z"/></g><g fill="#FFF"><path d="M47.867 8.808c0 .602-.178 1.083-.533 1.445-.459.472-1.129.708-2.008.708a2.9 2.9 0 0 1-.602-.048v2.532h-1.048V6.994a9.703 9.703 0 0 1 1.711-.136c.83 0 1.455.178 1.877.534.402.349.603.821.603 1.416zm-1.048.048c0-.382-.122-.674-.366-.878-.245-.204-.586-.306-1.023-.306-.29 0-.525.02-.705.058v2.348c.147.039.351.058.608.058.463 0 .827-.113 1.091-.339.264-.226.395-.54.395-.941zM53.727 11.048c0 .725-.207 1.319-.621 1.785-.434.479-1.009.718-1.727.718-.692 0-1.243-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.712-.698c.692 0 1.248.229 1.669.688.399.446.601 1.022.601 1.726zm-1.087.035c0-.435-.094-.808-.281-1.119-.22-.376-.533-.564-.94-.564-.421 0-.741.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .714-.191.94-.574.194-.318.291-.694.291-1.128zM59.769 11.02c0 .795-.22 1.429-.659 1.901-.388.42-.863.631-1.426.631-.673 0-1.168-.278-1.484-.834h-.02l-.058.728h-.893c.025-.381.038-.805.038-1.271V6.567h1.048v2.852h.02c.311-.524.812-.786 1.504-.786a1.72 1.72 0 0 1 1.392.655c.358.437.538 1.014.538 1.732zm-1.067.038c0-.459-.104-.834-.311-1.125a1.076 1.076 0 0 0-.922-.476c-.259 0-.491.084-.698.252s-.346.391-.417.669a1.43 1.43 0 0 0-.039.33v.824c0 .324.108.602.325.834s.486.349.81.349c.395 0 .702-.148.922-.446.22-.296.33-.7.33-1.211zM62.485 7.324a.603.603 0 0 1-.184.456.661.661 0 0 1-.476.175.611.611 0 0 1-.621-.63c0-.181.062-.33.185-.446s.274-.175.456-.175a.64.64 0 0 1 .456.175.582.582 0 0 1 .184.445zm-.116 6.12h-1.048V8.73h1.048v4.714zM68.111 10.864c0 .188-.014.346-.039.475H64.93c.013.466.164.821.455 1.067.266.22.608.33 1.028.33.466 0 .89-.074 1.271-.223l.164.728c-.446.194-.973.291-1.581.291-.73 0-1.305-.215-1.722-.645s-.625-1.007-.625-1.731c0-.711.193-1.303.582-1.775.407-.504.956-.756 1.648-.756.679 0 1.193.252 1.542.756.28.4.419.895.419 1.483zm-1-.271a1.427 1.427 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.997.997 0 0 0-.835.427 1.577 1.577 0 0 0-.31.815h2.182zM72.126 9.652a1.74 1.74 0 0 0-.33-.029c-.368 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474h-1.048l.01-3.23c0-.543-.013-1.038-.038-1.484h.911l.039.902h.029c.109-.311.284-.56.523-.747.233-.168.485-.252.757-.252.097 0 .185.006.262.019v.999zM76.83 13.444h-3.841v-.611l1.882-2.473c.116-.155.329-.411.64-.767v-.019h-2.338V8.73h3.608v.65l-1.843 2.435c-.207.265-.42.521-.64.766v.02h2.531v.843zM87.365 8.73l-1.475 4.714h-.96l-.611-2.047a15.32 15.32 0 0 1-.379-1.523h-.019a11.15 11.15 0 0 1-.379 1.523l-.649 2.047h-.971L80.536 8.73h1.077l.533 2.241c.129.53.235 1.035.32 1.513h.019c.078-.394.207-.896.389-1.503l.669-2.25h.854l.641 2.202c.155.537.281 1.054.378 1.552h.029c.071-.485.178-1.002.32-1.552l.572-2.202h1.028z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/pt-BR/android.png b/browser/themes/shared/app-marketplace-icons/pt-BR/android.png
new file mode 100644
index 0000000000..951cd7457f
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/pt-BR/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg b/browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg
new file mode 100644
index 0000000000..6e27d3f95e
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/pt-BR/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.717 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909h-2.211l4.284-13.308h2.646l4.305 13.308zm-3.889-5.549-1.125-3.475c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.734 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.771 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.039v5.055H66.61V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.756.896 1.134 2.074 1.134 3.535zm-2.171.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.447-.619.672-1.435.672-2.449zM88.111 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.16 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.764 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.817.907 1.226 2.078 1.226 3.513zm-2.213.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.394-.645.591-1.412.591-2.296zM112.693 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.229 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.562.815.846 1.823.846 3.02zm-2.034-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M48.045 11.561c0 .53-.197.97-.592 1.319-.452.407-1.229.611-2.327.611-.505 0-.964-.026-1.378-.078V6.982c.438-.09.98-.136 1.626-.136.8 0 1.404.146 1.814.437.409.291.614.692.614 1.203 0 .31-.095.593-.283.849a1.662 1.662 0 0 1-.793.567v.029c.368.09.672.265.911.523a1.6 1.6 0 0 1 .408 1.107zm-1.29-2.968c0-.64-.425-.96-1.273-.96-.297 0-.524.02-.686.059v1.92h.646c.405 0 .726-.094.96-.281a.898.898 0 0 0 .353-.738zm.195 2.939c0-.388-.151-.682-.454-.882-.271-.181-.631-.272-1.081-.272h-.618v2.28c.129.026.341.039.638.039.443 0 .795-.087 1.052-.262.308-.202.463-.502.463-.903zM53.167 13.433h-.941l-.077-.543h-.029c-.323.433-.782.65-1.377.65-.446 0-.806-.143-1.077-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c-.001.471.023.846.067 1.124zm-1.086-1.62v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.73.73 0 0 0 .511.184c.231 0 .445-.073.642-.218a.889.889 0 0 0 .38-.742zM56.096 7.312a.603.603 0 0 1-.184.456.661.661 0 0 1-.476.175.611.611 0 0 1-.621-.63c0-.181.062-.331.185-.447s.274-.175.456-.175a.64.64 0 0 1 .456.175.586.586 0 0 1 .184.446zm-.116 6.121h-1.048V8.719h1.048v4.714zM61.684 13.433H60.5l-.611-.989c-.136-.22-.284-.482-.446-.786h-.02a16.39 16.39 0 0 1-.445.786l-.582.989h-1.145l1.609-2.406-1.552-2.309h1.164l.592.941c.116.181.262.43.437.747h.029c.142-.278.284-.534.427-.766l.553-.922h1.145l-1.562 2.27 1.591 2.445zM66.514 13.433h-.941l-.077-.543h-.029c-.323.433-.782.65-1.377.65-.446 0-.806-.143-1.077-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-1.087-1.62v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.73.73 0 0 0 .511.184c.231 0 .445-.073.642-.218a.889.889 0 0 0 .38-.742zM70.771 9.641a1.74 1.74 0 0 0-.33-.029c-.367 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474h-1.047l.01-3.23c0-.543-.013-1.038-.038-1.484h.912l.039.902h.029c.109-.311.283-.56.523-.747.232-.168.484-.252.756-.252.098 0 .186.006.262.019v.999zM79.037 13.433h-1.049v-2.7c0-.832-.316-1.248-.949-1.248a.95.95 0 0 0-.758.343 1.217 1.217 0 0 0-.291.808v2.796h-1.047v-3.366c0-.414-.014-.863-.039-1.349h.922l.049.737h.029c.121-.229.303-.418.543-.569.283-.176.602-.265.949-.265.441 0 .807.142 1.098.427.361.349.543.87.543 1.562v2.824zM84.41 13.433h-.941l-.076-.543h-.029c-.324.433-.783.65-1.377.65-.447 0-.807-.143-1.078-.427a1.337 1.337 0 0 1-.367-.96c0-.576.24-1.015.723-1.319.48-.304 1.158-.453 2.031-.446V10.3c0-.621-.326-.931-.977-.931-.465 0-.875.117-1.23.349l-.213-.688c.439-.271.979-.407 1.617-.407 1.234 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-1.086-1.62v-.727c-1.158-.02-1.736.297-1.736.95 0 .246.068.43.203.553a.728.728 0 0 0 .51.184c.232 0 .445-.073.643-.218a.898.898 0 0 0 .38-.742z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/pt-PT/android.png b/browser/themes/shared/app-marketplace-icons/pt-PT/android.png
new file mode 100644
index 0000000000..951cd7457f
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/pt-PT/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg b/browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg
new file mode 100644
index 0000000000..685deb4e01
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/pt-PT/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.717 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909h-2.211l4.284-13.308h2.646l4.305 13.308zm-3.889-5.549-1.125-3.475c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.734 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.771 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.039v5.055H66.61V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.756.896 1.134 2.074 1.134 3.535zm-2.171.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.447-.619.672-1.435.672-2.449zM88.111 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.16 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.764 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.817.907 1.226 2.078 1.226 3.513zm-2.213.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.394-.645.591-1.412.591-2.296zM112.693 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.229 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.562.815.846 1.823.846 3.02zm-2.034-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M49.123 10.009c0 1.177-.353 2.063-1.058 2.658-.653.549-1.581.824-2.783.824-.596 0-1.106-.026-1.533-.078V6.982c.557-.09 1.157-.136 1.805-.136 1.145 0 2.008.249 2.59.747.651.563.979 1.368.979 2.416zm-1.106.029c0-.763-.202-1.348-.606-1.756-.404-.407-.994-.611-1.771-.611-.33 0-.611.022-.844.068v4.889c.129.02.365.029.708.029.802 0 1.421-.223 1.857-.669s.656-1.096.656-1.95zM54.554 10.853c0 .188-.014.346-.039.475h-3.143c.013.466.164.821.455 1.067.266.22.608.33 1.028.33.466 0 .89-.074 1.271-.223l.164.728c-.446.194-.973.291-1.581.291-.73 0-1.305-.215-1.722-.645s-.625-1.007-.625-1.731c0-.711.193-1.303.582-1.775.407-.504.956-.756 1.648-.756.679 0 1.193.252 1.542.756.281.4.42.895.42 1.483zm-1-.271a1.427 1.427 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.997.997 0 0 0-.835.427 1.577 1.577 0 0 0-.31.815h2.182zM58.957 12.079c0 .438-.161.79-.484 1.055s-.77.397-1.339.397c-.537 0-.992-.107-1.367-.32l.223-.776c.362.22.747.33 1.154.33.537 0 .805-.197.805-.592a.58.58 0 0 0-.174-.432c-.117-.113-.324-.225-.621-.334-.841-.311-1.261-.763-1.261-1.358a1.3 1.3 0 0 1 .465-1.019c.311-.271.722-.407 1.232-.407.466 0 .863.095 1.193.285l-.224.752a1.848 1.848 0 0 0-.96-.271c-.22 0-.392.052-.515.155a.498.498 0 0 0-.184.397c0 .161.064.293.193.396.11.097.323.203.641.319.815.31 1.223.784 1.223 1.423zM63.885 8.845l-.203.795a2.062 2.062 0 0 0-.912-.194c-.459 0-.823.154-1.092.461-.268.307-.402.697-.402 1.169 0 .498.141.892.422 1.183s.639.437 1.072.437c.323 0 .64-.064.95-.194l.146.786c-.343.162-.775.243-1.3.243-.718 0-1.29-.218-1.717-.655s-.64-1.02-.64-1.751c0-.73.229-1.331.688-1.799s1.076-.703 1.853-.703c.44-.001.819.073 1.135.222zM68.851 13.433h-.941l-.077-.543h-.029c-.323.433-.782.65-1.377.65-.446 0-.806-.143-1.077-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-1.087-1.62v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.73.73 0 0 0 .511.184c.231 0 .445-.073.642-.218a.889.889 0 0 0 .38-.742zM73.109 9.641a1.74 1.74 0 0 0-.33-.029c-.369 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474h-1.049l.01-3.23c0-.543-.012-1.038-.037-1.484h.91l.039.902h.029a1.6 1.6 0 0 1 .523-.747c.234-.168.486-.252.758-.252.096 0 .184.006.262.019v.999zM76.939 9.641a1.74 1.74 0 0 0-.33-.029c-.367 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474h-1.047l.01-3.23c0-.543-.014-1.038-.039-1.484h.912l.039.902h.029c.109-.311.283-.56.523-.747.232-.168.484-.252.756-.252.098 0 .186.006.262.019v.999zM82.16 10.853c0 .188-.014.346-.039.475h-3.143c.012.466.164.821.455 1.067.266.22.607.33 1.027.33.467 0 .891-.074 1.271-.223l.164.728c-.445.194-.973.291-1.58.291-.73 0-1.305-.215-1.723-.645-.416-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.408-.504.957-.756 1.648-.756.68 0 1.193.252 1.543.756.28.4.42.895.42 1.483zm-1-.271a1.435 1.435 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.998.998 0 0 0-.836.427 1.567 1.567 0 0 0-.309.815h2.182zM87.814 8.719c-.027.382-.039.828-.039 1.339v2.696c0 1.015-.227 1.727-.68 2.134-.414.375-.996.562-1.746.562-.652 0-1.18-.123-1.58-.369l.242-.805c.395.239.84.359 1.338.359.926 0 1.387-.498 1.387-1.494v-.456h-.02c-.291.479-.752.718-1.387.718a1.765 1.765 0 0 1-1.406-.65c-.369-.433-.553-.983-.553-1.649 0-.756.213-1.368.641-1.833.395-.433.875-.65 1.445-.65.641 0 1.1.249 1.377.747h.02l.039-.65h.922zm-1.087 2.697v-.834c0-.317-.098-.588-.297-.815-.197-.227-.459-.339-.783-.339-.357 0-.652.148-.883.446-.23.298-.346.695-.346 1.193 0 .453.107.818.322 1.096.221.304.523.456.906.456.232 0 .443-.069.627-.208.186-.139.318-.328.395-.567.039-.118.059-.261.059-.428zM93.168 13.433h-.941l-.078-.543h-.029c-.322.433-.781.65-1.377.65-.445 0-.805-.143-1.076-.427a1.339 1.339 0 0 1-.369-.96c0-.576.24-1.015.723-1.319.482-.304 1.16-.453 2.033-.446V10.3c0-.621-.326-.931-.979-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.232 0 1.85.65 1.85 1.95v1.736c0 .471.023.846.068 1.124zm-1.088-1.62v-.727c-1.156-.02-1.734.297-1.734.95 0 .246.066.43.201.553a.733.733 0 0 0 .512.184c.23 0 .445-.073.641-.218a.893.893 0 0 0 .38-.742zM97.426 9.641a1.74 1.74 0 0 0-.33-.029c-.369 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474h-1.049l.01-3.23c0-.543-.012-1.038-.037-1.484h.91l.039.902h.029a1.6 1.6 0 0 1 .523-.747c.234-.168.486-.252.758-.252.096 0 .184.006.262.019v.999zM105.689 13.433h-1.047v-2.7c0-.832-.316-1.248-.951-1.248-.311 0-.562.114-.756.343s-.291.499-.291.808v2.796h-1.049v-3.366c0-.414-.012-.863-.037-1.349h.92l.049.737h.029a1.53 1.53 0 0 1 .543-.569c.285-.176.602-.265.951-.265.439 0 .805.142 1.096.427.363.349.543.87.543 1.562v2.824zM111.064 13.433h-.941l-.078-.543h-.029c-.322.433-.781.65-1.377.65-.445 0-.805-.143-1.076-.427a1.339 1.339 0 0 1-.369-.96c0-.576.24-1.015.723-1.319.482-.304 1.16-.453 2.033-.446V10.3c0-.621-.326-.931-.979-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.232 0 1.85.65 1.85 1.95v1.736c0 .471.024.846.068 1.124zm-1.087-1.62v-.727c-1.156-.02-1.734.297-1.734.95 0 .246.066.43.201.553a.733.733 0 0 0 .512.184c.23 0 .445-.073.641-.218a.893.893 0 0 0 .38-.742z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/ro/android.png b/browser/themes/shared/app-marketplace-icons/ro/android.png
new file mode 100644
index 0000000000..ee3b5be037
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ro/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ro/ios.svg b/browser/themes/shared/app-marketplace-icons/ro/ios.svg
new file mode 100644
index 0000000000..a573bdd50d
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ro/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M49.05 10.009c0 1.177-.353 2.063-1.058 2.658-.653.549-1.581.824-2.783.824-.596 0-1.106-.026-1.533-.078V6.982c.557-.09 1.157-.136 1.805-.136 1.145 0 2.008.249 2.59.747.652.563.979 1.368.979 2.416zm-1.105.029c0-.763-.202-1.348-.606-1.756-.404-.407-.994-.611-1.771-.611-.33 0-.611.022-.844.068v4.889c.129.02.365.029.708.029.802 0 1.421-.223 1.857-.669s.656-1.096.656-1.95zM54.482 10.853c0 .188-.014.346-.039.475H51.3c.013.466.164.821.455 1.067.266.22.608.33 1.028.33.466 0 .89-.074 1.271-.223l.164.728c-.446.194-.973.291-1.581.291-.73 0-1.305-.215-1.722-.645s-.625-1.007-.625-1.731c0-.711.193-1.303.582-1.775.407-.504.956-.756 1.648-.756.679 0 1.193.252 1.542.756.28.4.42.895.42 1.483zm-1-.271a1.427 1.427 0 0 0-.203-.805c-.182-.292-.459-.437-.834-.437a.997.997 0 0 0-.835.427 1.577 1.577 0 0 0-.31.815h2.182zM58.884 12.079c0 .438-.161.79-.484 1.055s-.77.397-1.339.397c-.537 0-.992-.107-1.367-.32l.223-.776c.362.22.747.33 1.154.33.537 0 .805-.197.805-.592a.58.58 0 0 0-.174-.432c-.117-.113-.324-.225-.621-.334-.841-.311-1.261-.763-1.261-1.358a1.3 1.3 0 0 1 .465-1.019c.311-.271.722-.407 1.232-.407.466 0 .863.095 1.193.285l-.223.752a1.848 1.848 0 0 0-.96-.271c-.22 0-.392.052-.515.155a.498.498 0 0 0-.184.397c0 .161.064.293.193.396.11.097.323.203.641.319.815.31 1.222.784 1.222 1.423zM63.813 8.845l-.203.796a2.062 2.062 0 0 0-.912-.194c-.459 0-.823.154-1.092.461-.268.307-.402.697-.402 1.169 0 .498.141.892.422 1.183s.639.437 1.072.437c.323 0 .64-.064.95-.194l.146.786c-.343.162-.775.243-1.3.243-.718 0-1.29-.218-1.717-.655s-.64-1.02-.64-1.751c0-.73.229-1.331.688-1.799s1.076-.703 1.853-.703c.44-.002.819.072 1.135.221zM67.847 13.433l-.077-.543h-.029c-.317.433-.778.65-1.382.65-.214 0-.409-.036-.584-.107a1.444 1.444 0 0 1-.458-.291 1.301 1.301 0 0 1-.302-.437 1.408 1.408 0 0 1-.106-.553c0-.588.24-1.03.72-1.324.48-.294 1.162-.441 2.045-.441V10.3c0-.621-.328-.931-.982-.931a2.21 2.21 0 0 0-1.234.349l-.213-.688c.434-.271.974-.407 1.621-.407 1.237 0 1.855.65 1.855 1.95v1.736c0 .485.022.86.068 1.125h-.942zm.301-6.615c0 .355-.104.642-.314.858-.211.217-.5.325-.868.325-.376 0-.667-.105-.873-.315-.207-.21-.311-.5-.311-.868h.553c.059.42.265.63.621.63.4 0 .617-.21.649-.63h.543zm-.446 4.268c-.588 0-1.026.074-1.313.223-.288.149-.432.392-.432.728 0 .246.067.43.203.553a.739.739 0 0 0 .515.184 1.084 1.084 0 0 0 .713-.272c.094-.084.169-.186.228-.306s.087-.247.087-.383v-.727zM73.037 9.641a1.74 1.74 0 0 0-.33-.029c-.369 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474h-1.049l.01-3.23c0-.543-.012-1.038-.037-1.484h.91l.039.902h.029a1.6 1.6 0 0 1 .523-.747c.234-.168.486-.252.758-.252.096 0 .184.006.262.019v.999zM77.74 8.845l-.203.795a2.059 2.059 0 0 0-.912-.194c-.459 0-.822.154-1.092.461-.268.307-.402.697-.402 1.169 0 .498.141.892.422 1.183s.639.437 1.072.437c.324 0 .641-.064.951-.194l.145.786c-.342.162-.775.243-1.299.243-.719 0-1.291-.218-1.717-.655-.428-.437-.641-1.02-.641-1.751 0-.73.23-1.331.689-1.799s1.076-.703 1.852-.703c.44-.001.819.073 1.135.222zM82.707 13.433h-.941l-.076-.543h-.03c-.324.433-.783.65-1.377.65-.447 0-.807-.143-1.078-.427a1.337 1.337 0 0 1-.367-.96c0-.576.24-1.015.723-1.319.48-.304 1.158-.453 2.031-.446V10.3c0-.621-.326-.931-.977-.931-.465 0-.875.117-1.23.349l-.213-.688c.439-.271.979-.407 1.617-.407 1.234 0 1.85.65 1.85 1.95v1.736c0 .471.023.846.068 1.124zm-1.086-1.62v-.727c-1.158-.02-1.736.297-1.736.95 0 .246.068.43.203.553a.728.728 0 0 0 .51.184c.232 0 .445-.073.643-.218a.898.898 0 0 0 .38-.742zM86.85 9.504h-1.154v2.29c0 .582.203.873.611.873.188 0 .342-.016.465-.049l.029.795c-.207.078-.479.117-.814.117-.414 0-.738-.126-.971-.378-.232-.252-.35-.676-.35-1.271V9.504h-.688v-.785h.688v-.864l1.029-.31v1.173h1.154v.786zm-.03 5.074c0 .537-.354.805-1.059.805-.283 0-.516-.058-.697-.175l.154-.456c.162.097.34.146.535.146.258 0 .387-.097.387-.291 0-.11-.064-.196-.193-.257s-.316-.105-.562-.131l.445-.815h.602l-.291.495c.188.025.348.1.48.223a.594.594 0 0 1 .199.456zM89.467 7.312a.599.599 0 0 1-.184.456.66.66 0 0 1-.475.175.598.598 0 0 1-.441-.179c-.121-.12-.18-.27-.18-.451s.061-.33.184-.446.275-.175.457-.175c.18 0 .332.059.455.175s.184.264.184.445zm-.115 6.121h-1.049V8.719h1.049v4.714zM98.236 13.433h-.932l-.049-.757h-.029c-.297.576-.801.864-1.512.864-.57 0-1.041-.223-1.416-.669s-.562-1.025-.562-1.736c0-.763.203-1.381.609-1.853.395-.44.881-.66 1.455-.66.635 0 1.078.213 1.33.64h.02V6.556h1.047v5.607c0 .459.014.882.039 1.27zm-1.086-1.988v-.786a1.184 1.184 0 0 0-.41-.965 1.027 1.027 0 0 0-.701-.257c-.389 0-.695.155-.92.466s-.336.708-.336 1.193c0 .466.107.844.322 1.135.227.31.531.465.914.465.344 0 .621-.129.828-.388.202-.239.303-.527.303-.863zM103.939 10.853c0 .188-.014.346-.039.475h-3.143c.014.466.164.821.455 1.067.266.22.609.33 1.029.33.465 0 .889-.074 1.271-.223l.164.728c-.447.194-.973.291-1.582.291-.73 0-1.305-.215-1.721-.645-.418-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.406-.504.955-.756 1.648-.756.678 0 1.193.252 1.541.756.282.4.42.895.42 1.483zm-1-.271a1.411 1.411 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.995.995 0 0 0-.834.427 1.586 1.586 0 0 0-.311.815h2.182zM112.795 11.018c0 .802-.217 1.436-.65 1.901a1.9 1.9 0 0 1-1.445.621c-.621 0-1.066-.223-1.338-.669h-.02v2.483h-1.049v-5.083c0-.504-.012-1.022-.037-1.552h.92l.059.747h.02c.35-.562.879-.844 1.592-.844.555 0 1.02.22 1.391.66.371.439.557 1.018.557 1.736zm-1.066.039c0-.459-.104-.837-.311-1.135a1.073 1.073 0 0 0-.912-.466c-.26 0-.494.086-.703.257a1.182 1.182 0 0 0-.412.674 1.34 1.34 0 0 0-.049.32v.786c0 .343.105.632.314.868.211.236.484.354.82.354.395 0 .701-.152.922-.456.219-.303.331-.704.331-1.202zM118.229 10.853c0 .188-.014.346-.039.475h-3.143c.012.466.164.821.455 1.067.266.22.607.33 1.027.33.467 0 .891-.074 1.271-.223l.164.728c-.445.194-.973.291-1.58.291-.73 0-1.305-.215-1.723-.645-.416-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.408-.504.957-.756 1.648-.756.68 0 1.193.252 1.543.756.279.4.42.895.42 1.483zm-1-.271a1.435 1.435 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.998.998 0 0 0-.836.427 1.567 1.567 0 0 0-.309.815h2.182z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/ru/android.png b/browser/themes/shared/app-marketplace-icons/ru/android.png
new file mode 100644
index 0000000000..427d8701b4
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ru/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ru/ios.svg b/browser/themes/shared/app-marketplace-icons/ru/ios.svg
new file mode 100644
index 0000000000..c7494a14d7
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ru/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M43.424 7.273c.227-.136.483-.25.771-.344a3.267 3.267 0 0 1 1.014-.141c.627 0 1.121.149 1.483.446s.543.698.543 1.203c0 .401-.121.737-.363 1.009s-.552.453-.927.543v.029c.207.033.403.089.587.17.185.081.347.189.485.325a1.471 1.471 0 0 1 .451 1.078c0 .362-.073.666-.219.912s-.336.446-.572.602c-.235.155-.499.267-.79.334s-.582.102-.873.102c-.311 0-.618-.033-.922-.097s-.585-.171-.844-.32l.262-.805c.168.084.385.165.65.243.265.078.533.116.805.116.446 0 .791-.1 1.033-.3a.994.994 0 0 0 .364-.805.987.987 0 0 0-.146-.558 1.064 1.064 0 0 0-.379-.345 1.655 1.655 0 0 0-.519-.174 3.43 3.43 0 0 0-.567-.049h-.437V9.65h.437c.2 0 .386-.025.558-.078.171-.051.32-.124.446-.218s.225-.206.296-.335a.903.903 0 0 0 .106-.437c0-.291-.104-.519-.311-.684-.207-.165-.485-.248-.834-.248-.239 0-.479.039-.718.116a5.295 5.295 0 0 0-.641.252l-.229-.745zM51.755 13.433l-.077-.543h-.029c-.316.433-.775.65-1.377.65-.214 0-.407-.036-.582-.107s-.327-.168-.456-.291a1.285 1.285 0 0 1-.301-.437 1.408 1.408 0 0 1-.106-.553c0-.588.239-1.03.718-1.324.479-.294 1.157-.441 2.037-.441V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.433-.271.972-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c0 .485.023.86.068 1.125h-.942zm-.145-2.347c-.585 0-1.021.074-1.307.223-.286.149-.429.392-.429.728 0 .246.067.43.202.553a.731.731 0 0 0 .512.184 1.05 1.05 0 0 0 .708-.272.988.988 0 0 0 .228-.306.866.866 0 0 0 .086-.383v-.727zM57.683 8.719v.863h-1.96v3.851h-1.047V8.719h3.007zM63.677 11.018c0 .375-.052.718-.155 1.028a2.39 2.39 0 0 1-.432.795 1.932 1.932 0 0 1-1.508.699c-.621 0-1.067-.223-1.339-.669h-.02v2.483h-1.048v-5.083a38.698 38.698 0 0 0-.038-1.553h.921l.059.747h.02c.349-.562.879-.844 1.591-.844.277 0 .535.058.771.174.236.117.441.28.616.49.175.21.312.462.412.757.1.295.15.62.15.976zm-1.066.039c0-.233-.028-.448-.083-.645s-.136-.365-.242-.504-.236-.249-.388-.33a1.067 1.067 0 0 0-.51-.121c-.148 0-.294.033-.437.097s-.267.152-.373.262c-.107.11-.192.243-.257.398-.065.155-.098.32-.098.495v.786c0 .174.027.336.083.485.055.149.132.278.232.388s.22.196.359.257c.139.062.292.092.46.092.395 0 .702-.15.922-.451s.332-.705.332-1.209zM69.305 8.719l-1.194 3.269c-.284.776-.561 1.411-.829 1.906-.269.495-.525.855-.771 1.082-.362.323-.747.521-1.155.591l-.252-.882c.271-.071.53-.21.776-.417.245-.207.442-.465.592-.776a.594.594 0 0 0 .077-.213.88.88 0 0 0-.058-.223L64.783 8.72h1.154l.893 2.629c.046.123.091.262.136.417.046.155.094.327.146.514h.02a6.41 6.41 0 0 0 .106-.393c.039-.158.091-.341.155-.548l.796-2.619h1.116zM71.119 10.678h.484c.355 0 .631-.064.824-.194s.291-.288.291-.476a.54.54 0 0 0-.248-.465c-.164-.116-.393-.175-.684-.175-.188 0-.377.031-.566.092a2.98 2.98 0 0 0-.529.228l-.271-.678a2.9 2.9 0 0 1 .811-.305 4.01 4.01 0 0 1 .809-.083c.215 0 .43.021.646.063.215.042.408.113.576.213s.307.231.412.393c.107.162.16.362.16.602 0 .149-.029.28-.088.393a1.017 1.017 0 0 1-.232.3 1.254 1.254 0 0 1-.324.213 1.743 1.743 0 0 1-.363.122v.029c.154.02.305.059.451.117.145.058.275.134.393.228.115.094.209.207.281.339.07.133.105.283.105.451 0 .278-.066.511-.203.698a1.46 1.46 0 0 1-.52.446 2.51 2.51 0 0 1-.693.238 3.938 3.938 0 0 1-1.599-.019 2.71 2.71 0 0 1-.768-.286l.273-.689c.168.091.359.167.576.228s.438.092.664.092c.355 0 .629-.069.82-.208.189-.139.285-.312.285-.519 0-.136-.031-.25-.096-.344s-.156-.17-.271-.228a1.33 1.33 0 0 0-.408-.121 3.444 3.444 0 0 0-.504-.034h-.494v-.661zM76.715 8.719v1.668c0 .382-.006.725-.02 1.028-.014.304-.029.624-.049.96l.02.019.363-.723c.121-.236.242-.477.365-.723l1.164-2.231h1.357v4.714h-.99v-1.668c0-.349.01-.698.025-1.047.016-.35.033-.702.053-1.058h-.049a6.95 6.95 0 0 1-.33.757c-.109.213-.219.433-.328.66-.201.388-.4.776-.598 1.164-.197.388-.406.786-.625 1.193h-1.357V8.719h.999zM85.445 8.719v.863H84.01v3.851h-1.03V9.582h-1.426v-.863h3.891zM90.789 10.853c0 .09-.004.176-.01.257a1.753 1.753 0 0 1-.029.218h-3.143c.014.446.154.791.422 1.033.268.242.623.364 1.062.364.459 0 .883-.074 1.271-.223l.164.728c-.447.194-.973.291-1.582.291-.367 0-.697-.057-.988-.17a2.044 2.044 0 0 1-.738-.48 2.12 2.12 0 0 1-.461-.747c-.105-.291-.158-.617-.158-.979s.053-.697.158-1.004c.107-.307.258-.574.451-.8.195-.227.43-.404.703-.534.275-.129.582-.194.918-.194a2 2 0 0 1 .811.16c.242.106.449.258.619.456.172.197.303.434.393.708.092.274.137.58.137.916zm-1-.271c0-.369-.088-.668-.266-.897s-.435-.345-.771-.345c-.305 0-.562.116-.775.349s-.336.53-.369.893h2.181zM95.01 8.758c.188-.032.426-.058.717-.078s.588-.029.893-.029c.193 0 .412.012.654.034s.475.074.693.155c.221.081.404.202.553.364s.225.381.225.659a.916.916 0 0 1-.287.679 1.155 1.155 0 0 1-.301.208c-.113.055-.23.096-.354.121l.01.029c.342.058.621.181.834.369s.32.446.32.776-.092.592-.271.786c-.182.194-.404.34-.67.437a3.277 3.277 0 0 1-.84.185 9.444 9.444 0 0 1-.789.039c-.26 0-.514-.006-.762-.02-.25-.013-.457-.026-.625-.039V8.758zm1.008 1.882h.533c.162 0 .316-.011.461-.034.146-.022.273-.058.383-.106a.647.647 0 0 0 .258-.194.477.477 0 0 0 .092-.296.5.5 0 0 0-.268-.47c-.178-.1-.457-.15-.838-.15-.109 0-.205.003-.287.01l-.334.029v1.211zm0 2.085c.129.013.238.022.324.029a3.925 3.925 0 0 0 .743-.019 1.45 1.45 0 0 0 .408-.111.75.75 0 0 0 .295-.222.58.58 0 0 0 .113-.371c0-.27-.121-.456-.359-.559-.24-.103-.562-.154-.971-.154h-.553v1.407z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/si/android.png b/browser/themes/shared/app-marketplace-icons/si/android.png
new file mode 100644
index 0000000000..397e9ff7c4
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/si/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/sk/android.png b/browser/themes/shared/app-marketplace-icons/sk/android.png
new file mode 100644
index 0000000000..6efaf531f7
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/sk/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/sk/ios.svg b/browser/themes/shared/app-marketplace-icons/sk/ios.svg
new file mode 100644
index 0000000000..bbb4c21551
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/sk/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M47.42 11.6c0 .557-.193 1.009-.58 1.358-.426.381-1.02.572-1.781.572-.703 0-1.269-.136-1.694-.408l.242-.873c.46.278.964.417 1.515.417.395 0 .701-.089.922-.268a.87.87 0 0 0 .329-.714.91.91 0 0 0-.271-.67c-.181-.181-.481-.35-.901-.505-1.145-.427-1.717-1.052-1.717-1.875 0-.538.2-.978.601-1.321.401-.343.935-.515 1.601-.515.595 0 1.09.104 1.484.311l-.262.854a2.573 2.573 0 0 0-1.252-.301c-.368 0-.656.091-.863.271a.779.779 0 0 0-.262.592.8.8 0 0 0 .301.64c.175.155.491.324.951.504.562.227.976.492 1.241.795.264.305.396.683.396 1.136zM51.397 9.504h-1.154v2.29c0 .582.204.873.611.873.188 0 .343-.016.466-.049l.028.795c-.207.078-.479.117-.814.117-.414 0-.737-.126-.97-.378-.233-.252-.35-.676-.35-1.271V9.504h-.688v-.785h.688v-.864l1.028-.31v1.173h1.154v.786zM54.015 7.312a.603.603 0 0 1-.184.456.661.661 0 0 1-.476.175.611.611 0 0 1-.621-.63c0-.181.062-.33.185-.446s.274-.175.456-.175a.64.64 0 0 1 .456.175.582.582 0 0 1 .184.445zm-.116 6.121h-1.048V8.719h1.048v4.714zM59.292 13.433h-.941l-.077-.543h-.029c-.323.433-.782.65-1.377.65-.446 0-.806-.143-1.077-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c-.001.471.023.846.067 1.124zm-1.086-1.62v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.73.73 0 0 0 .511.184c.231 0 .445-.073.642-.218a.889.889 0 0 0 .38-.742zM65.151 13.433h-1.048v-2.68c0-.845-.316-1.268-.95-1.268-.485 0-.818.245-.999.735a1.283 1.283 0 0 0-.049.377v2.835h-1.048V6.556h1.048v2.841h.02c.33-.517.802-.775 1.416-.775.434 0 .792.142 1.077.427.355.355.533.883.533 1.581v2.803zM71.088 13.433h-1.049v-2.7c0-.832-.316-1.248-.949-1.248a.944.944 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.737h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.441 0 .807.142 1.098.427.361.349.543.87.543 1.562v2.824zM77.004 13.433h-.92l-.059-.718h-.02c-.33.55-.828.825-1.494.825-.465 0-.838-.146-1.115-.437-.33-.356-.494-.893-.494-1.61V8.719h1.047v2.6c0 .906.311 1.358.932 1.358.465 0 .789-.226.969-.679.045-.116.068-.249.068-.398V8.719h1.047v3.356c0 .446.014.899.039 1.358zM81.205 9.504h-1.154v2.29c0 .582.205.873.611.873.188 0 .344-.016.467-.049l.027.795c-.207.078-.479.117-.814.117-.414 0-.736-.126-.969-.378-.234-.252-.35-.676-.35-1.271V9.504h-.689v-.785h.689v-.864l1.027-.31v1.173h1.154v.786zm-.475-1.726c.084-.064.162-.157.238-.276a.786.786 0 0 0 .037-.733.923.923 0 0 0-.178-.252l.717-.136a.77.77 0 0 1 .223.262.791.791 0 0 1 .107.407c0 .168-.033.317-.098.446s-.143.241-.232.335-.183.169-.28.224a1.841 1.841 0 0 1-.252.121l-.282-.398zM89.625 13.433h-1.049v-2.7c0-.832-.316-1.248-.949-1.248a.95.95 0 0 0-.758.343 1.217 1.217 0 0 0-.291.808v2.796h-1.047v-3.366c0-.414-.014-.863-.039-1.349h.922l.049.737h.029c.121-.229.303-.418.543-.569.283-.176.602-.265.949-.265.441 0 .807.142 1.098.427.361.349.543.87.543 1.562v2.824zM94.998 13.433h-.941l-.077-.543h-.029c-.324.433-.783.65-1.377.65-.447 0-.807-.143-1.078-.427a1.337 1.337 0 0 1-.367-.96c0-.576.24-1.015.723-1.319.48-.304 1.158-.453 2.031-.446V10.3c0-.621-.326-.931-.977-.931-.465 0-.875.117-1.23.349l-.213-.688c.439-.271.979-.407 1.617-.407 1.234 0 1.85.65 1.85 1.95v1.736c0 .471.023.846.068 1.124zm-1.086-1.62v-.727c-1.158-.02-1.736.297-1.736.95 0 .246.068.43.203.553a.728.728 0 0 0 .51.184c.232 0 .445-.073.643-.218a.898.898 0 0 0 .38-.742z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/sl/android.png b/browser/themes/shared/app-marketplace-icons/sl/android.png
new file mode 100644
index 0000000000..817e823f25
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/sl/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/sl/ios.svg b/browser/themes/shared/app-marketplace-icons/sl/ios.svg
new file mode 100644
index 0000000000..854a63d4f1
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/sl/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M47.867 8.796c0 .602-.178 1.083-.533 1.445-.459.472-1.129.708-2.008.708a2.9 2.9 0 0 1-.602-.048v2.532h-1.048V6.982a9.703 9.703 0 0 1 1.711-.136c.83 0 1.455.178 1.877.534.402.349.603.822.603 1.416zm-1.048.049c0-.382-.122-.674-.366-.878-.245-.204-.586-.306-1.023-.306-.29 0-.525.02-.705.058v2.348c.147.039.351.058.608.058.463 0 .827-.113 1.091-.339.263-.226.395-.54.395-.941zM51.912 9.641a1.74 1.74 0 0 0-.33-.029c-.368 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474h-1.048l.01-3.23c0-.543-.013-1.038-.038-1.484h.911l.039.902h.029c.109-.311.284-.56.523-.747.233-.168.485-.252.757-.252.097 0 .185.006.262.019v.999zM57.13 10.853c0 .188-.014.346-.039.475h-3.143c.013.466.164.821.455 1.067.266.22.608.33 1.028.33.466 0 .89-.074 1.271-.223l.164.728c-.446.194-.973.291-1.581.291-.73 0-1.305-.215-1.722-.645s-.625-1.007-.625-1.731c0-.711.193-1.303.582-1.775.407-.504.956-.756 1.648-.756.679 0 1.193.252 1.542.756.281.4.42.895.42 1.483zm-1-.271a1.427 1.427 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.997.997 0 0 0-.835.427 1.577 1.577 0 0 0-.31.815h2.182zM62.747 13.433h-1.048v-2.7c0-.832-.316-1.248-.95-1.248a.946.946 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.737h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.44 0 .806.142 1.097.427.362.349.543.87.543 1.562v2.824zM68.897 11.037c0 .725-.207 1.319-.621 1.785-.434.479-1.009.718-1.727.718-.692 0-1.243-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.712-.698c.692 0 1.248.229 1.669.688.4.446.601 1.022.601 1.726zm-1.087.034c0-.435-.094-.808-.281-1.119-.22-.376-.533-.564-.94-.564-.421 0-.741.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .714-.191.94-.574.194-.317.291-.693.291-1.128zM73.318 12.079c0 .438-.16.79-.484 1.055-.322.265-.77.397-1.338.397-.537 0-.992-.107-1.367-.32l.223-.776c.361.22.746.33 1.154.33.537 0 .805-.197.805-.592a.584.584 0 0 0-.174-.432c-.117-.113-.324-.225-.621-.334-.842-.311-1.262-.763-1.262-1.358 0-.407.156-.747.465-1.019.311-.271.723-.407 1.232-.407.467 0 .863.095 1.193.285l-.222.752a1.854 1.854 0 0 0-.961-.271c-.219 0-.391.052-.514.155a.495.495 0 0 0-.184.397c0 .161.064.293.193.396.109.097.322.203.641.319.815.31 1.221.784 1.221 1.423zM78.877 7.312a.599.599 0 0 1-.184.456.66.66 0 0 1-.475.175.598.598 0 0 1-.441-.179c-.121-.12-.18-.27-.18-.451s.061-.33.184-.446.275-.175.457-.175c.18 0 .332.059.455.175s.184.264.184.445zm-.115 6.121h-1.049V8.719h1.049v4.714zM83.988 13.433h-3.84v-.611l1.881-2.473c.117-.155.33-.411.641-.767v-.019h-2.338v-.844h3.607v.65l-1.842 2.435c-.207.265-.42.521-.641.766v.02h2.531v.843z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/sq/android.png b/browser/themes/shared/app-marketplace-icons/sq/android.png
new file mode 100644
index 0000000000..f3340e74aa
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/sq/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/sr/android.png b/browser/themes/shared/app-marketplace-icons/sr/android.png
new file mode 100644
index 0000000000..b91d2c0749
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/sr/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/sv-SE/android.png b/browser/themes/shared/app-marketplace-icons/sv-SE/android.png
new file mode 100644
index 0000000000..b6e1693169
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/sv-SE/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg b/browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg
new file mode 100644
index 0000000000..243486903e
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/sv-SE/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M48.604 13.433h-1.048v-2.949h-2.832v2.949h-1.048V6.896h1.048v2.667h2.832V6.896h1.048v6.537zM54.036 13.433h-.944l-.077-.543h-.029c-.323.433-.782.65-1.376.65-.445 0-.804-.143-1.075-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.481-.304 1.159-.453 2.032-.446V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.215-.689c.438-.271.979-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c0 .472.024.847.069 1.125zm-2.203-5.907c0 .155-.05.285-.148.388-.1.104-.223.155-.37.155s-.272-.053-.375-.16c-.103-.107-.154-.234-.154-.383s.053-.276.159-.383a.517.517 0 0 1 .38-.16c.146 0 .269.054.365.16a.552.552 0 0 1 .143.383zm1.116 4.287v-.727c-1.157-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.731.731 0 0 0 .512.184c.231 0 .444-.073.641-.218a.889.889 0 0 0 .38-.742zm.699-4.287c0 .155-.05.285-.149.388a.503.503 0 0 1-.38.155.484.484 0 0 1-.37-.16c-.099-.107-.149-.234-.149-.383a.535.535 0 0 1 .538-.543.47.47 0 0 1 .365.16.554.554 0 0 1 .145.383zM62.552 13.433h-1.028v-2.642c0-.871-.298-1.306-.893-1.306a.828.828 0 0 0-.684.324 1.182 1.182 0 0 0-.258.759v2.864h-1.027v-2.777c0-.355-.073-.639-.219-.852s-.36-.319-.645-.319a.848.848 0 0 0-.699.348 1.255 1.255 0 0 0-.271.793v2.806H55.8v-3.366c0-.414-.013-.863-.038-1.349h.901l.049.717h.029c.323-.542.802-.814 1.436-.814.641 0 1.073.294 1.3.882h.02c.148-.246.333-.443.553-.591.278-.194.598-.291.96-.291.421 0 .767.142 1.038.427.336.355.505.886.505 1.591v2.796zM66.762 9.504h-1.154v2.29c0 .582.204.873.611.873.188 0 .343-.016.466-.049l.028.795c-.207.078-.479.117-.814.117-.414 0-.737-.126-.97-.378-.233-.252-.35-.676-.35-1.271V9.504h-.688v-.785h.688v-.864l1.028-.31v1.173h1.154v.786zM71.748 13.433h-.941l-.078-.543H70.7c-.322.433-.781.65-1.377.65-.446 0-.805-.143-1.077-.427a1.338 1.338 0 0 1-.368-.96c0-.576.24-1.015.723-1.319.482-.304 1.16-.453 2.033-.446V10.3c0-.621-.326-.931-.979-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.618-.407 1.232 0 1.85.65 1.85 1.95v1.736c-.001.471.022.846.067 1.124zm-1.088-1.62v-.727c-1.156-.02-1.735.297-1.735.95 0 .246.067.43.202.553a.733.733 0 0 0 .512.184c.23 0 .445-.073.641-.218a.893.893 0 0 0 .38-.742zM77.508 7.312a.599.599 0 0 1-.184.456.66.66 0 0 1-.475.175.598.598 0 0 1-.441-.179c-.121-.12-.18-.27-.18-.451s.061-.33.184-.446.275-.175.457-.175c.18 0 .332.059.455.175s.184.264.184.445zm-.115 6.121h-1.049V8.719h1.049v4.714z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/sw/android.png b/browser/themes/shared/app-marketplace-icons/sw/android.png
new file mode 100644
index 0000000000..75cb4991fd
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/sw/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ta/android.png b/browser/themes/shared/app-marketplace-icons/ta/android.png
new file mode 100644
index 0000000000..6f5f900b22
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ta/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/te/android.png b/browser/themes/shared/app-marketplace-icons/te/android.png
new file mode 100644
index 0000000000..49a74c3082
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/te/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/th/android.png b/browser/themes/shared/app-marketplace-icons/th/android.png
new file mode 100644
index 0000000000..81443611e6
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/th/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/th/ios.svg b/browser/themes/shared/app-marketplace-icons/th/ios.svg
new file mode 100644
index 0000000000..ec16f437ca
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/th/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M47.549 13.438v-3.03c0-.212-.026-.41-.077-.591a1.28 1.28 0 0 0-.241-.469 1.178 1.178 0 0 0-.414-.31 1.432 1.432 0 0 0-.597-.114c-.54 0-.951.178-1.232.532-.282.355-.424.851-.424 1.488 0 .352.041.647.123.887s.188.432.318.578c.131.146.274.25.433.314.157.063.315.096.473.096a1.8 1.8 0 0 0 .333-.027c.094-.018.189-.045.286-.082l.146.619c-.104.049-.225.088-.364.119s-.285.045-.437.045a2.1 2.1 0 0 1-.792-.155 1.809 1.809 0 0 1-.668-.469c-.191-.209-.345-.473-.46-.792s-.173-.696-.173-1.133c0-.382.05-.737.15-1.065.1-.328.25-.611.45-.851.2-.239.452-.429.755-.568a2.52 2.52 0 0 1 1.065-.209c.369 0 .688.058.955.173s.487.273.66.473.302.431.387.692.127.537.127.828v3.021h-.782zM52.126 13.438v-3.285c0-.819-.361-1.229-1.083-1.229-.291 0-.564.053-.819.159-.255.106-.47.232-.646.378l-.21-.592c.091-.079.202-.156.332-.232a3.065 3.065 0 0 1 .91-.336c.167-.034.335-.05.505-.05.595 0 1.042.168 1.343.505.3.337.45.814.45 1.434v3.249h-.782zM54.101 12.401c.219.134.451.243.696.328.246.085.515.127.806.127.461 0 .829-.158 1.105-.473s.414-.801.414-1.456c0-.691-.132-1.198-.396-1.52s-.639-.482-1.124-.482c-.321 0-.598.041-.828.123-.23.082-.461.199-.691.35L53.9 8.77c.243-.158.518-.283.824-.377.306-.094.62-.141.941-.141.734 0 1.291.229 1.67.687s.569 1.097.569 1.916c0 .874-.202 1.538-.605 1.993-.403.455-.976.682-1.716.682-.346 0-.652-.042-.919-.127a2.938 2.938 0 0 1-.755-.364l.192-.638zM59.924 11.619c0 .431.085.745.255.942.17.197.446.295.828.295.151 0 .302-.027.45-.082a1.76 1.76 0 0 0 .424-.228 1.93 1.93 0 0 0 .609-.729V8.342h.782v5.096h-.736l-.046-.746a2.024 2.024 0 0 1-.655.609c-.261.152-.598.228-1.01.228-.559 0-.979-.162-1.261-.487-.282-.324-.423-.796-.423-1.415V8.342h.782v3.277zM63.182 7.105c-.133 0-.233.028-.3.083-.066.056-.101.151-.101.287v.194h-.864v-.3c0-.291.084-.517.25-.678.167-.161.421-.241.76-.241h.883v.655h-.628zM65.32 13.438v-5.59c0-.279-.044-.521-.132-.728s-.189-.38-.305-.522a1.635 1.635 0 0 0-.582-.468l-.018-.164c.097-.17.22-.32.368-.45s.315-.24.501-.328c.185-.088.385-.153.601-.195.215-.042.438-.063.669-.063.369 0 .667.022.892.067s.428.103.609.175l-.118.686c-.176-.097-.381-.167-.614-.209s-.466-.064-.696-.064a2.99 2.99 0 0 0-.796.1c-.24.067-.414.17-.523.31.304.164.534.42.691.769.158.349.236.732.236 1.151v5.524h-.783zM71.018 13.438l-.674-2.312c-.17-.558-.479-.843-.928-.855l-1.138.938v2.229h-.782V8.342h.782v2.002l2.421-2.002h1.056l-1.784 1.475c.328.048.581.185.76.409.179.225.32.504.424.837l.7 2.375h-.837zM76.067 13.438v-2.457h-1.273c-.432 0-.771.083-1.02.25-.249.167-.373.423-.373.769 0 .297.088.518.264.66s.397.214.664.214c.128 0 .263-.014.405-.041s.269-.065.378-.114l.127.646a3.137 3.137 0 0 1-.992.163c-.23 0-.444-.032-.641-.095-.197-.064-.369-.158-.515-.282s-.261-.282-.346-.473a1.633 1.633 0 0 1-.128-.669c0-.534.188-.951.564-1.251s.943-.45 1.702-.45h1.183v-.118c0-.4-.094-.714-.282-.942-.188-.228-.521-.341-1.001-.341-.346 0-.667.052-.965.155-.297.103-.555.23-.773.382l-.254-.555c.091-.079.207-.156.35-.232.143-.076.304-.144.482-.205s.372-.109.578-.146c.206-.037.422-.055.646-.055.655 0 1.153.174 1.493.523.34.349.51.817.51 1.406v3.258h-.783zM81.855 13.438v-3.03c0-.212-.026-.41-.077-.591a1.28 1.28 0 0 0-.241-.469 1.178 1.178 0 0 0-.414-.31 1.432 1.432 0 0 0-.597-.114c-.54 0-.951.178-1.232.532-.282.355-.424.851-.424 1.488 0 .352.041.647.123.887s.188.432.318.578c.131.146.274.25.433.314.157.063.315.096.473.096a1.8 1.8 0 0 0 .333-.027c.094-.018.189-.045.286-.082l.146.619c-.104.049-.225.088-.364.119s-.285.045-.437.045a2.1 2.1 0 0 1-.792-.155 1.809 1.809 0 0 1-.668-.469c-.191-.209-.345-.473-.46-.792s-.173-.696-.173-1.133c0-.382.05-.737.15-1.065.1-.328.25-.611.45-.851.2-.239.452-.429.755-.568a2.52 2.52 0 0 1 1.065-.209c.369 0 .688.058.955.173s.487.273.66.473.302.431.387.692.127.537.127.828v3.021h-.782zM84.385 13.438v-6.07c0-.37.062-.691.187-.964s.296-.507.515-.701h-2.248v-.655h3.249v.546a1.514 1.514 0 0 0-.679.597c-.16.264-.241.597-.241.998v6.25h-.783zM90.218 13.438v-3.03c0-.212-.026-.41-.077-.591a1.28 1.28 0 0 0-.241-.469 1.178 1.178 0 0 0-.414-.31 1.432 1.432 0 0 0-.597-.114c-.54 0-.951.178-1.232.532-.282.355-.424.851-.424 1.488 0 .352.041.647.123.887s.188.432.318.578c.131.146.274.25.433.314.157.063.315.096.473.096a1.8 1.8 0 0 0 .333-.027c.094-.018.189-.045.286-.082l.146.619c-.104.049-.225.088-.364.119s-.285.045-.437.045a2.1 2.1 0 0 1-.792-.155 1.809 1.809 0 0 1-.668-.469c-.191-.209-.345-.473-.46-.792s-.173-.696-.173-1.133c0-.382.05-.737.15-1.065.1-.328.25-.611.45-.851.2-.239.452-.429.755-.568a2.52 2.52 0 0 1 1.065-.209c.369 0 .688.058.955.173s.487.273.66.473.302.431.387.692.127.537.127.828v3.021h-.782zM89.672 7.651a.39.39 0 0 1-.392-.401v-.254a.283.283 0 0 0-.026-.141c-.019-.027-.064-.041-.137-.041h-.482v-.637h.746c.17 0 .305.036.405.109.1.073.149.188.149.346v.228c0 .048.011.086.032.114.022.026.066.04.133.04h1.229v.637h-1.657zM95.878 10.171c0-.437-.082-.753-.245-.951a.801.801 0 0 0-.646-.296c-.194 0-.378.029-.551.086s-.335.134-.486.228a2.165 2.165 0 0 0-.71.724v3.476h-.782V8.342h.736l.046.747a2.542 2.542 0 0 1 1.228-.765c.176-.048.36-.073.555-.073.268 0 .502.045.705.137.204.091.375.221.515.391s.244.372.313.605c.07.234.105.496.105.787v3.267h-.783v-3.267zM93.103 7.651v-.637h3.166v-.837h.737v1.474h-3.903zM96.614 5.731v-1.22h.737v1.22h-.737z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/tr/android.png b/browser/themes/shared/app-marketplace-icons/tr/android.png
new file mode 100644
index 0000000000..93d6731d93
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/tr/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/tr/ios.svg b/browser/themes/shared/app-marketplace-icons/tr/ios.svg
new file mode 100644
index 0000000000..ea44575d42
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/tr/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M50.644 18.893h-1.576l-.863-2.713h-3l-.822 2.713h-1.535l2.973-9.233h1.835l2.988 9.233zm-2.699-3.85-.781-2.411c-.082-.247-.237-.826-.466-1.74h-.027c-.091.393-.237.973-.438 1.74l-.767 2.411h2.479zM58.152 15.482c0 1.133-.306 2.027-.918 2.685-.548.585-1.229.877-2.042.877-.876 0-1.507-.314-1.891-.945h-.027v3.507h-1.479v-7.178c0-.713-.019-1.443-.055-2.192h1.301l.083 1.055h.027c.493-.794 1.242-1.191 2.247-1.191.786 0 1.44.311 1.966.932s.788 1.436.788 2.45zm-1.507.055c0-.648-.146-1.183-.438-1.603a1.516 1.516 0 0 0-1.288-.658c-.365 0-.697.121-.993.363-.297.242-.491.56-.583.952a1.972 1.972 0 0 0-.068.452v1.109c0 .484.148.894.445 1.227s.683.5 1.158.5c.557 0 .991-.215 1.301-.644.31-.429.466-.995.466-1.698zM65.878 15.482c0 1.133-.306 2.027-.918 2.685-.548.585-1.229.877-2.042.877-.876 0-1.507-.314-1.891-.945H61v3.507h-1.479v-7.178c0-.713-.019-1.443-.055-2.192h1.301l.083 1.055h.027c.493-.794 1.242-1.191 2.247-1.191.786 0 1.44.311 1.966.932s.788 1.436.788 2.45zm-1.507.055c0-.648-.146-1.183-.438-1.603a1.516 1.516 0 0 0-1.288-.658c-.365 0-.697.121-.993.363-.297.242-.491.56-.583.952a1.972 1.972 0 0 0-.068.452v1.109c0 .484.148.894.445 1.227s.683.5 1.158.5c.557 0 .991-.215 1.301-.644.311-.429.466-.995.466-1.698zM75.879 16.304c0 .785-.273 1.425-.82 1.918-.602.539-1.439.808-2.515.808-.993 0-1.791-.191-2.394-.575l.343-1.233c.648.394 1.361.59 2.138.59.558 0 .992-.126 1.303-.378.311-.251.466-.588.466-1.009 0-.375-.128-.69-.384-.946s-.681-.494-1.273-.714c-1.617-.604-2.426-1.486-2.426-2.648 0-.759.283-1.381.85-1.866.566-.484 1.32-.728 2.261-.728.84 0 1.539.146 2.096.438l-.369 1.206c-.521-.283-1.11-.425-1.768-.425-.521 0-.927.128-1.22.384a1.098 1.098 0 0 0-.369.835c0 .366.141.667.425.904.246.22.693.457 1.342.713.795.319 1.379.694 1.754 1.123.372.429.56.964.56 1.603zM80.674 13.344h-1.63v3.233c0 .822.287 1.233.862 1.233.266 0 .484-.023.658-.068l.041 1.123c-.293.109-.676.164-1.151.164-.584 0-1.041-.178-1.369-.534-.329-.356-.493-.954-.493-1.795v-3.356h-.974v-1.109h.974v-1.22l1.452-.438v1.657h1.63v1.11zM87.963 15.509c0 1.022-.293 1.863-.877 2.521-.612.676-1.425 1.014-2.438 1.014-.978 0-1.756-.324-2.336-.973s-.87-1.466-.87-2.452c0-1.032.299-1.877.897-2.534.598-.658 1.404-.986 2.418-.986.978 0 1.763.324 2.356.973.567.629.85 1.442.85 2.437zm-1.534.048c0-.613-.133-1.141-.397-1.58-.311-.531-.754-.797-1.329-.797-.594 0-1.046.266-1.356.797-.265.439-.397.976-.397 1.607 0 .614.133 1.141.397 1.58.319.531.768.797 1.343.797.566 0 1.009-.271 1.329-.811.272-.448.41-.98.41-1.593zM92.895 13.537a2.558 2.558 0 0 0-.466-.041c-.521 0-.922.196-1.205.589-.247.347-.37.785-.37 1.315v3.493h-1.479l.014-4.562c0-.767-.019-1.466-.055-2.096h1.288l.055 1.274h.041c.155-.438.401-.79.739-1.056a1.793 1.793 0 0 1 1.069-.355c.137 0 .26.009.369.027v1.412zM99.415 15.249c0 .266-.018.489-.055.672h-4.438c.019.657.233 1.16.644 1.507.375.311.858.466 1.452.466.658 0 1.256-.105 1.795-.315l.233 1.027c-.631.274-1.375.411-2.233.411-1.032 0-1.843-.304-2.432-.911s-.884-1.422-.884-2.445c0-1.005.274-1.84.822-2.507.575-.713 1.352-1.068 2.329-1.068.959 0 1.685.355 2.178 1.068.393.565.589 1.263.589 2.095zm-1.41-.383c.009-.438-.087-.817-.288-1.138-.256-.411-.648-.616-1.179-.616-.483 0-.876.201-1.178.603a2.2 2.2 0 0 0-.438 1.151h3.083zM102.319 9.413c-.394 1.379-.858 2.512-1.397 3.397l-.918.096c.401-1.096.689-2.214.863-3.356l1.452-.137zM108.347 18.893h-1.314l-.069-1.068h-.041c-.42.812-1.132 1.219-2.137 1.219-.804 0-1.471-.314-2-.945-.53-.63-.795-1.447-.795-2.452 0-1.077.288-1.95.863-2.616.557-.621 1.242-.932 2.055-.932.896 0 1.521.301 1.877.904h.027V9.18h1.479v7.918c0 .649.019 1.247.055 1.795zm-1.535-2.809v-1.109c0-.192-.014-.348-.041-.466a1.678 1.678 0 0 0-.536-.897 1.448 1.448 0 0 0-.991-.363c-.55 0-.983.22-1.3.658-.316.438-.475 1-.475 1.685 0 .657.151 1.192.454 1.603.321.438.752.658 1.293.658.486 0 .876-.183 1.17-.548.285-.339.426-.745.426-1.221zM115.142 18.893h-1.328l-.11-.768h-.041c-.456.612-1.104.918-1.945.918-.63 0-1.137-.2-1.521-.603-.347-.365-.521-.817-.521-1.356 0-.812.34-1.434 1.021-1.863.681-.429 1.638-.639 2.87-.63v-.123c0-.877-.46-1.315-1.38-1.315-.657 0-1.235.164-1.736.493l-.302-.973c.62-.384 1.382-.575 2.285-.575 1.741 0 2.612.918 2.612 2.754v2.452c0 .666.032 1.196.096 1.589zm-1.535-2.288v-1.027c-1.635-.027-2.452.42-2.452 1.343 0 .347.096.607.286.78.19.174.432.261.722.261.327 0 .629-.103.906-.309.277-.205.447-.468.511-.787.019-.074.027-.16.027-.261zM122.649 18.893h-1.479v-3.812c0-1.176-.447-1.764-1.343-1.764-.438 0-.794.162-1.068.485s-.411.704-.411 1.142v3.949h-1.479v-4.754c0-.584-.019-1.22-.055-1.904h1.302l.068 1.041h.041c.173-.323.429-.592.767-.804a2.5 2.5 0 0 1 1.343-.374c.621 0 1.138.201 1.548.603.512.493.768 1.229.768 2.206v3.986z"/></g><g fill="#FFF"><path d="M45.137 23.253a.541.541 0 0 1-.15.388.511.511 0 0 1-.383.155.499.499 0 0 1-.374-.159.537.537 0 0 1-.15-.384.538.538 0 0 1 .533-.543c.155 0 .282.054.379.159a.558.558 0 0 1 .145.384zm-.01 7.508H44.08v-6.538h1.048v6.538zM51.122 30.761h-1.048v-2.7c0-.832-.316-1.248-.95-1.248a.947.947 0 0 0-.757.344 1.216 1.216 0 0 0-.291.809v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.348h.921l.049.736h.029c.122-.229.304-.418.543-.568.284-.177.602-.266.95-.266.44 0 .806.143 1.097.428.362.349.543.869.543 1.561v2.822zM57.155 30.761h-.931l-.049-.757h-.029c-.297.576-.802.863-1.513.863-.569 0-1.041-.223-1.416-.669s-.562-1.024-.562-1.736c0-.763.203-1.381.61-1.853.395-.439.88-.66 1.455-.66.634 0 1.077.214 1.329.641h.02v-2.707h1.048v5.607c0 .459.012.883.038 1.271zm-1.086-1.989v-.786a1.193 1.193 0 0 0-.409-.965 1.024 1.024 0 0 0-.701-.258c-.39 0-.696.156-.921.467-.224.311-.336.707-.336 1.192 0 .466.107.845.322 1.136.227.31.532.465.915.465.344 0 .62-.129.828-.388.201-.239.302-.527.302-.863zM60.143 24.641a.599.599 0 0 1-.184.455.661.661 0 0 1-.476.175.613.613 0 0 1-.621-.63c0-.182.062-.33.185-.447a.642.642 0 0 1 .456-.174c.181 0 .333.059.456.174a.588.588 0 0 1 .184.447zm-.116 6.12h-1.048v-4.714h1.048v4.714zM64.381 26.969a1.74 1.74 0 0 0-.33-.029c-.368 0-.652.139-.854.416-.174.246-.262.557-.262.932v2.474h-1.048l.01-3.229c0-.544-.013-1.039-.038-1.484h.911l.039.902h.029c.109-.311.284-.561.523-.748.233-.168.485-.252.757-.252.097 0 .185.007.262.02v.998zM66.883 24.641a.599.599 0 0 1-.184.455.661.661 0 0 1-.476.175.613.613 0 0 1-.621-.63c0-.182.062-.33.185-.447a.642.642 0 0 1 .456-.174c.181 0 .333.059.456.174a.588.588 0 0 1 .184.447zm-.116 6.12h-1.048v-4.714h1.048v4.714zM72.723 30.761h-1.049v-2.7c0-.832-.316-1.248-.949-1.248a.95.95 0 0 0-.758.344 1.216 1.216 0 0 0-.291.809v2.796h-1.047v-3.366c0-.414-.013-.863-.038-1.348h.921l.049.736h.029a1.49 1.49 0 0 1 .543-.568 1.76 1.76 0 0 1 .949-.266c.441 0 .807.143 1.098.428.361.349.543.869.543 1.561v2.822z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/uk/android.png b/browser/themes/shared/app-marketplace-icons/uk/android.png
new file mode 100644
index 0000000000..5c113c3082
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/uk/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/ur/android.png b/browser/themes/shared/app-marketplace-icons/ur/android.png
new file mode 100644
index 0000000000..2e8e12539b
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/ur/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/uz/android.png b/browser/themes/shared/app-marketplace-icons/uz/android.png
new file mode 100644
index 0000000000..2cc63078d0
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/uz/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/vi/android.png b/browser/themes/shared/app-marketplace-icons/vi/android.png
new file mode 100644
index 0000000000..c9db5debfb
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/vi/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/vi/ios.svg b/browser/themes/shared/app-marketplace-icons/vi/ios.svg
new file mode 100644
index 0000000000..37b674202c
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/vi/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M53.645 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zM64.662 26.588c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM75.699 26.588c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zM88.039 27.772c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zM95.088 23.508h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zM105.691 26.627c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zM112.621 23.783a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zM122.156 26.252a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441z"/></g><g fill="#FFF"><path d="M47.809 7.778h-1.872v5.655h-1.048V7.778h-1.862v-.882h4.782v.882zM51.073 13.433l-.077-.543h-.029c-.316.433-.775.65-1.377.65-.214 0-.407-.036-.582-.107s-.327-.168-.456-.291a1.285 1.285 0 0 1-.301-.437 1.408 1.408 0 0 1-.106-.553c0-.588.239-1.03.718-1.324.479-.294 1.157-.441 2.037-.441V10.3c0-.621-.326-.931-.978-.931-.465 0-.875.117-1.229.349l-.213-.688c.433-.271.972-.407 1.617-.407 1.233 0 1.85.65 1.85 1.95v1.736c0 .485.023.86.068 1.125h-.942zm-.146-2.347c-.585 0-1.021.074-1.307.223-.286.149-.429.392-.429.728 0 .246.067.43.202.553a.731.731 0 0 0 .512.184 1.05 1.05 0 0 0 .708-.272.988.988 0 0 0 .228-.306.866.866 0 0 0 .086-.383v-.727zm-1.095-2.91c.025-.11.069-.204.131-.281s.123-.15.185-.218.114-.134.16-.199a.4.4 0 0 0 .067-.233c0-.097-.03-.175-.092-.233s-.138-.087-.228-.087c-.104 0-.193.034-.268.102s-.137.144-.188.228l-.369-.224a1.43 1.43 0 0 1 .384-.485c.164-.136.376-.204.635-.204a.91.91 0 0 1 .616.213.697.697 0 0 1 .247.553.718.718 0 0 1-.087.364c-.059.1-.126.192-.204.276a8.06 8.06 0 0 1-.242.252 1.175 1.175 0 0 0-.214.301l-.533-.125zM54.649 7.312a.603.603 0 0 1-.184.456.661.661 0 0 1-.476.175.611.611 0 0 1-.621-.63c0-.181.062-.33.185-.446s.274-.175.456-.175a.64.64 0 0 1 .456.175.586.586 0 0 1 .184.445zm-.116 6.121h-1.048V8.719h1.048v4.714zM62.612 8.719l-1.785 4.714h-1.019l-1.727-4.714h1.125l.806 2.493c.136.414.249.812.339 1.193h.029c.078-.343.191-.74.34-1.193l.795-2.493h1.097zM67.399 10.853c0 .09-.004.176-.01.257a2.234 2.234 0 0 1-.029.218h-3.143c.013.446.153.791.422 1.033.268.242.622.364 1.062.364.459 0 .883-.074 1.271-.223l.164.728c-.446.194-.973.291-1.581.291-.368 0-.698-.057-.989-.17-.291-.113-.537-.273-.737-.48s-.354-.456-.461-.747c-.106-.291-.159-.617-.159-.979s.053-.697.159-1.004c.107-.307.258-.574.451-.8.194-.227.429-.404.703-.534.275-.129.581-.194.917-.194.298 0 .567.053.811.16.242.106.449.258.62.456.172.197.303.434.393.708.09.274.136.58.136.916zm-1.61-4.123.844 1.416h-.737l-.476-.892h-.02l-.475.892h-.718l.824-1.416h.758zm.61 3.852c0-.369-.089-.668-.267-.897s-.434-.345-.77-.345c-.305 0-.562.116-.776.349-.213.233-.336.53-.368.893h2.181zm.282-4.695.63 1.338h-.572l-.94-1.338h.882zM73.529 9.504h-1.154v2.29c0 .582.203.873.611.873.188 0 .342-.016.465-.049l.029.795c-.207.078-.479.117-.814.117-.414 0-.738-.126-.971-.378-.232-.252-.35-.676-.35-1.271V9.504h-.688v-.785h.688v-.864l1.029-.31v1.173h1.154v.786zM77.225 9.641a1.74 1.74 0 0 0-.33-.029c-.369 0-.652.139-.854.417-.174.246-.262.556-.262.931v2.474H74.73l.01-3.23c0-.543-.012-1.038-.037-1.484h.91l.039.902h.029a1.6 1.6 0 0 1 .523-.747c.234-.168.486-.252.758-.252.096 0 .184.006.262.019v.999zM82.174 10.853c0 .09-.004.176-.01.257a1.753 1.753 0 0 1-.029.218h-3.143c.014.446.154.791.422 1.033.268.242.623.364 1.062.364.459 0 .883-.074 1.271-.223l.164.728c-.447.194-.973.291-1.582.291-.367 0-.697-.057-.988-.17a2.044 2.044 0 0 1-.738-.48 2.12 2.12 0 0 1-.461-.747c-.105-.291-.158-.617-.158-.979s.053-.697.158-1.004c.107-.307.258-.574.451-.8.195-.227.43-.404.703-.534.275-.129.582-.194.918-.194a2 2 0 0 1 .811.16c.242.106.449.258.619.456.172.197.303.434.393.708.092.274.137.58.137.916zm-.727-2.707h-.729l-.533-.873h-.02l-.523.873h-.719l.922-1.406h.67l.932 1.406zm-.273 2.436c0-.369-.088-.668-.266-.897s-.435-.345-.771-.345c-.305 0-.562.116-.775.349s-.336.53-.369.893h2.181zM87.498 13.433h-1.047v-2.7c0-.832-.316-1.248-.951-1.248-.311 0-.562.114-.756.343s-.291.499-.291.808v2.796h-1.049v-3.366c0-.414-.012-.863-.037-1.349h.92l.049.737h.029a1.53 1.53 0 0 1 .543-.569c.285-.176.602-.265.951-.265.439 0 .805.142 1.096.427.363.349.543.87.543 1.562v2.824z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/zh-CN/android.png b/browser/themes/shared/app-marketplace-icons/zh-CN/android.png
new file mode 100644
index 0000000000..02c6d7345c
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/zh-CN/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg b/browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg
new file mode 100644
index 0000000000..d997375067
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/zh-CN/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M54.006 17.03H52l-1.1-3.455h-3.821l-1.047 3.455h-1.955l3.787-11.761h2.338l3.804 11.761zm-3.438-4.903-.995-3.071c-.104-.314-.302-1.053-.593-2.216h-.035c-.117.5-.303 1.239-.559 2.216l-.977 3.071h3.159zM63.742 12.685c0 1.443-.389 2.583-1.168 3.42-.699.745-1.564 1.117-2.602 1.117-1.115 0-1.918-.401-2.406-1.204h-.035v4.467h-1.885v-9.144c0-.908-.023-1.838-.07-2.792h1.658l.105 1.344h.034c.629-1.012 1.582-1.519 2.861-1.519 1.002 0 1.836.396 2.506 1.187.668.792 1.002 1.833 1.002 3.124zm-1.918.07c0-.826-.188-1.506-.559-2.042-.408-.558-.955-.837-1.641-.837-.465 0-.887.154-1.266.462s-.625.712-.742 1.213a2.414 2.414 0 0 0-.086.576v1.414c0 .617.188 1.137.566 1.562.379.425.869.637 1.475.637.709 0 1.262-.273 1.658-.82.396-.548.595-1.269.595-2.165zM73.497 12.685c0 1.443-.39 2.583-1.169 3.42-.698.745-1.564 1.117-2.601 1.117-1.116 0-1.919-.401-2.407-1.204h-.035v4.467H65.4v-9.144c0-.908-.023-1.838-.069-2.792h1.657l.104 1.344h.035c.628-1.012 1.582-1.519 2.861-1.519 1.001 0 1.835.396 2.505 1.187.669.792 1.004 1.833 1.004 3.124zm-1.919.07c0-.826-.187-1.506-.559-2.042-.407-.558-.954-.837-1.641-.837-.465 0-.887.154-1.265.462a2.134 2.134 0 0 0-.742 1.213 2.423 2.423 0 0 0-.087.576v1.414c0 .617.188 1.137.567 1.562.378.425.869.637 1.474.637.71 0 1.263-.273 1.658-.82s.595-1.269.595-2.165zM86.759 13.732c0 1-.349 1.814-1.045 2.443-.766.687-1.834 1.029-3.203 1.029-1.266 0-2.281-.244-3.048-.733l.436-1.57c.826.5 1.734.75 2.724.75.71 0 1.263-.16 1.658-.481.396-.32.594-.749.594-1.285 0-.478-.163-.879-.488-1.206-.326-.326-.867-.629-1.623-.909-2.06-.769-3.089-1.894-3.089-3.374 0-.967.36-1.759 1.082-2.377.721-.618 1.681-.926 2.879-.926 1.07 0 1.96.186 2.67.558l-.471 1.536c-.663-.36-1.414-.541-2.251-.541-.663 0-1.181.163-1.554.489a1.4 1.4 0 0 0-.471 1.064c0 .465.181.849.541 1.152.314.279.884.582 1.71.907 1.012.407 1.757.884 2.233 1.431.477.549.716 1.229.716 2.043zM92.988 9.963h-2.077v4.118c0 1.047.367 1.571 1.1 1.571.338 0 .616-.029.838-.087l.053 1.431c-.373.139-.861.209-1.466.209-.745 0-1.326-.227-1.745-.68-.419-.454-.629-1.216-.629-2.286V9.963h-1.238V8.55h1.238V6.997l1.85-.558V8.55h2.077v1.413zM102.358 12.72c0 1.303-.373 2.373-1.117 3.211-.779.861-1.814 1.291-3.105 1.291-1.245 0-2.237-.413-2.976-1.239-.739-.826-1.108-1.867-1.108-3.124 0-1.314.381-2.391 1.144-3.229.762-.837 1.788-1.256 3.079-1.256 1.245 0 2.245.413 3.002 1.239.72.804 1.081 1.839 1.081 3.107zm-1.955.061c0-.782-.168-1.453-.506-2.012-.396-.677-.96-1.015-1.692-1.015-.757 0-1.332.338-1.728 1.015-.338.56-.506 1.242-.506 2.047 0 .782.168 1.453.506 2.013.407.677.978 1.015 1.71 1.015.722 0 1.285-.344 1.692-1.033.35-.571.524-1.248.524-2.03zM108.482 10.208a3.208 3.208 0 0 0-.593-.052c-.663 0-1.176.25-1.536.75-.313.442-.471 1.001-.471 1.675v4.45h-1.885l.018-5.811c0-.978-.023-1.867-.07-2.67h1.641l.07 1.623h.052a2.89 2.89 0 0 1 .942-1.343 2.276 2.276 0 0 1 1.361-.454c.175 0 .331.012.471.035v1.797zM116.91 12.389c0 .337-.023.623-.069.855h-5.653c.022.837.296 1.478.819 1.919.478.396 1.094.593 1.85.593.838 0 1.6-.133 2.286-.401l.297 1.309c-.803.349-1.751.523-2.845.523-1.314 0-2.347-.387-3.097-1.161-.751-.773-1.126-1.812-1.126-3.115 0-1.279.35-2.344 1.047-3.193.733-.907 1.722-1.361 2.967-1.361 1.222 0 2.146.454 2.774 1.361.5.722.75 1.612.75 2.671zm-1.797-.489c.012-.558-.11-1.041-.366-1.448-.326-.523-.826-.785-1.501-.785-.616 0-1.117.256-1.501.768-.313.408-.5.896-.558 1.466h3.926z"/></g><g fill="#FFF"><path d="M56.827 23.984h-6.221v10.89h-1.451v-10.89h-5.132V22.63h12.804v1.354zm-.28 5.99-1.056 1.056a74.118 74.118 0 0 0-4.67-4.075l1.007-.957a86.165 86.165 0 0 1 4.719 3.976zM65.919 28.488h-4.207c-.286.506-.522.908-.71 1.205h1.205v-.875h1.304v.875h2.095v1.154h-2.095v.941l2.244-.198-.231 1.155-2.013.182v1.881h-1.304v-1.783l-3.498.363-.148-1.287c1.342-.065 2.558-.137 3.646-.214v-1.04h-.99c-.803 0-1.43.072-1.881.215l-.363-1.205c.363-.043.616-.172.759-.387.144-.215.341-.542.595-.982h-1.535v-1.154h2.129c.132-.275.247-.562.347-.858l1.237.362-.231.496h3.646v1.154zm5.858 3.416c-.177 1.298-.363 2.105-.562 2.426-.198.318-.498.479-.899.479s-.83-.204-1.287-.611a6.61 6.61 0 0 1-1.18-1.386c-.671.671-1.534 1.37-2.59 2.096l-1.007-.99c1.199-.737 2.188-1.528 2.97-2.376-.274-.814-.473-1.817-.594-3.012-.121-1.193-.182-1.905-.182-2.137h-7.771v-1.171h3.333v-.94h-2.524V23.11h2.524v-1.336h1.32v1.336h2.376v1.172h-2.376v.94h3.068l-.065-3.465h1.304c0 1.397.021 2.552.065 3.465h3.845v1.171H67.75v.166c0 .22.038.762.115 1.625s.182 1.576.313 2.137c.562-.836 1.028-1.837 1.402-3.004l1.205.463c-.583 1.66-1.26 2.992-2.029 3.992.176.342.426.68.75 1.016s.536.503.636.503c.099 0 .184-.157.256-.47a8.25 8.25 0 0 0 .156-1.246l1.223.329zm-.528-7.756-1.04.826a22.488 22.488 0 0 0-1.897-2.047l.974-.809a41.05 41.05 0 0 1 1.963 2.03z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/zh-TW/android.png b/browser/themes/shared/app-marketplace-icons/zh-TW/android.png
new file mode 100644
index 0000000000..d292082e96
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/zh-TW/android.png
diff --git a/browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg b/browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg
new file mode 100644
index 0000000000..b5956135de
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/zh-TW/ios.svg
@@ -0,0 +1,2 @@
+<!-- may be protected as a trademark in some jurisdictions -->
+<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><g fill="#FFF"><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zM26.928 10.306c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"/></g><g fill="#FFF"><path d="M54.006 17.03H52l-1.1-3.455h-3.821l-1.047 3.455h-1.955l3.787-11.761h2.338l3.804 11.761zm-3.438-4.903-.995-3.071c-.104-.314-.302-1.053-.593-2.216h-.035c-.117.5-.303 1.239-.559 2.216l-.977 3.071h3.159zM63.742 12.685c0 1.443-.389 2.583-1.168 3.42-.699.745-1.564 1.117-2.602 1.117-1.115 0-1.918-.401-2.406-1.204h-.035v4.467h-1.885v-9.144c0-.908-.023-1.838-.07-2.792h1.658l.105 1.344h.034c.629-1.012 1.582-1.519 2.861-1.519 1.002 0 1.836.396 2.506 1.187.668.792 1.002 1.833 1.002 3.124zm-1.918.07c0-.826-.188-1.506-.559-2.042-.408-.558-.955-.837-1.641-.837-.465 0-.887.154-1.266.462s-.625.712-.742 1.213a2.414 2.414 0 0 0-.086.576v1.414c0 .617.188 1.137.566 1.562.379.425.869.637 1.475.637.709 0 1.262-.273 1.658-.82.396-.548.595-1.269.595-2.165zM73.497 12.685c0 1.443-.39 2.583-1.169 3.42-.698.745-1.564 1.117-2.601 1.117-1.116 0-1.919-.401-2.407-1.204h-.035v4.467H65.4v-9.144c0-.908-.023-1.838-.069-2.792h1.657l.104 1.344h.035c.628-1.012 1.582-1.519 2.861-1.519 1.001 0 1.835.396 2.505 1.187.669.792 1.004 1.833 1.004 3.124zm-1.919.07c0-.826-.187-1.506-.559-2.042-.407-.558-.954-.837-1.641-.837-.465 0-.887.154-1.265.462a2.134 2.134 0 0 0-.742 1.213 2.423 2.423 0 0 0-.087.576v1.414c0 .617.188 1.137.567 1.562.378.425.869.637 1.474.637.71 0 1.263-.273 1.658-.82s.595-1.269.595-2.165zM86.759 13.732c0 1-.349 1.814-1.045 2.443-.766.687-1.834 1.029-3.203 1.029-1.266 0-2.281-.244-3.048-.733l.436-1.57c.826.5 1.734.75 2.724.75.71 0 1.263-.16 1.658-.481.396-.32.594-.749.594-1.285 0-.478-.163-.879-.488-1.206-.326-.326-.867-.629-1.623-.909-2.06-.769-3.089-1.894-3.089-3.374 0-.967.36-1.759 1.082-2.377.721-.618 1.681-.926 2.879-.926 1.07 0 1.96.186 2.67.558l-.471 1.536c-.663-.36-1.414-.541-2.251-.541-.663 0-1.181.163-1.554.489a1.4 1.4 0 0 0-.471 1.064c0 .465.181.849.541 1.152.314.279.884.582 1.71.907 1.012.407 1.757.884 2.233 1.431.477.549.716 1.229.716 2.043zM92.988 9.963h-2.077v4.118c0 1.047.367 1.571 1.1 1.571.338 0 .616-.029.838-.087l.053 1.431c-.373.139-.861.209-1.466.209-.745 0-1.326-.227-1.745-.68-.419-.454-.629-1.216-.629-2.286V9.963h-1.238V8.55h1.238V6.997l1.85-.558V8.55h2.077v1.413zM102.358 12.72c0 1.303-.373 2.373-1.117 3.211-.779.861-1.814 1.291-3.105 1.291-1.245 0-2.237-.413-2.976-1.239-.739-.826-1.108-1.867-1.108-3.124 0-1.314.381-2.391 1.144-3.229.762-.837 1.788-1.256 3.079-1.256 1.245 0 2.245.413 3.002 1.239.72.804 1.081 1.839 1.081 3.107zm-1.955.061c0-.782-.168-1.453-.506-2.012-.396-.677-.96-1.015-1.692-1.015-.757 0-1.332.338-1.728 1.015-.338.56-.506 1.242-.506 2.047 0 .782.168 1.453.506 2.013.407.677.978 1.015 1.71 1.015.722 0 1.285-.344 1.692-1.033.35-.571.524-1.248.524-2.03zM108.482 10.208a3.208 3.208 0 0 0-.593-.052c-.663 0-1.176.25-1.536.75-.313.442-.471 1.001-.471 1.675v4.45h-1.885l.018-5.811c0-.978-.023-1.867-.07-2.67h1.641l.07 1.623h.052a2.89 2.89 0 0 1 .942-1.343 2.276 2.276 0 0 1 1.361-.454c.175 0 .331.012.471.035v1.797zM116.91 12.389c0 .337-.023.623-.069.855h-5.653c.022.837.296 1.478.819 1.919.478.396 1.094.593 1.85.593.838 0 1.6-.133 2.286-.401l.297 1.309c-.803.349-1.751.523-2.845.523-1.314 0-2.347-.387-3.097-1.161-.751-.773-1.126-1.812-1.126-3.115 0-1.279.35-2.344 1.047-3.193.733-.907 1.722-1.361 2.967-1.361 1.222 0 2.146.454 2.774 1.361.5.722.75 1.612.75 2.671zm-1.797-.489c.012-.558-.11-1.041-.366-1.448-.326-.523-.826-.785-1.501-.785-.616 0-1.117.256-1.501.768-.313.408-.5.896-.558 1.466h3.926z"/></g><g fill="#FFF"><path d="M49.143 35.291V24.205h-4.979v-1.096l12.345.015-.015 1.081H50.3l-.015 11.086h-1.142zm5.454-3.689a8.46 8.46 0 0 0-.912-1.068c-.32-.315-.642-.6-.963-.852s-.635-.472-.941-.66a38.356 38.356 0 0 0-.845-.504l.504-.844c.475.178.906.391 1.297.637.391.248.769.523 1.134.83.267.228.528.475.785.741s.514.548.771.845l-.83.875zM68.394 21.927a17.43 17.43 0 0 0 .029 1.038l.667-.639c.494.179.928.431 1.297.756.371.326.715.697 1.031 1.112a1.61 1.61 0 0 1-.283.341c-.107.099-.217.203-.326.311h1.008v1.053h-3.274c.078.85.165 1.65.259 2.4.094.752.186 1.492.275 2.224.346-.622.592-1.237.74-1.845s.252-1.297.311-2.068l1.053.312a10.829 10.829 0 0 1-.533 2.749 9.665 9.665 0 0 1-1.17 2.35c.127.355.293.711.496 1.066.201.355.457.662.764.919.049.03.094.015.133-.044.049-.148.088-.314.119-.497.029-.183.045-.362.051-.54.006-.179.008-.352.008-.52s-.006-.311-.016-.43l1.082.385c-.029.455-.076.9-.141 1.334a2.844 2.844 0 0 1-.438 1.172c-.188.217-.439.335-.756.355-.178-.01-.346-.055-.504-.134s-.303-.178-.438-.296a2.69 2.69 0 0 1-.361-.393 10.404 10.404 0 0 1-.297-.408 4.55 4.55 0 0 1-.259-.459 9.806 9.806 0 0 0-.245-.46 3.902 3.902 0 0 1-.459.474c-.188.169-.388.344-.601.527-.213.183-.438.362-.674.541-.237.178-.47.346-.697.504l-.874-.846c.306-.178.568-.338.785-.481.218-.144.371-.255.46-.333h-2.683v1.793h-1.171v-1.793h-3.883v-1.008h3.897l.015-.563h-2.756v-3.823h2.756v-.489h-3.363v-.964l3.363-.014v-.683H59.16v-1.067h3.572l-.015-.711h-2.994v-.992h2.994l.015-1.201h1.126v1.201h3.053l.015.992h-3.053l-.015.711h3.468l-.059-2.919h1.127zm-5.602 7.053-1.689-.014v.474h1.675l.014-.46zm-.015 1.35h-1.675v.637h1.675v-.637zm4.772 2.312c.06-.05.158-.15.296-.304a6.32 6.32 0 0 0 .386-.467c-.129-.405-.237-.85-.326-1.334s-.165-.985-.229-1.504a40.138 40.138 0 0 1-.163-1.571c-.045-.528-.087-1.04-.126-1.534h-3.482v.668h3.319l.015.963h-3.334v.504l2.756-.016v3.839h-2.756v.563h3.631l.013.193zm-1.956-3.675h-1.689v.474h1.689v-.474zm0 1.347-1.689.016v.637h1.689v-.653zm4.966-5.468a4.904 4.904 0 0 0-.928-1.052 4.788 4.788 0 0 0-1.222-.741c.02.346.032.67.037.971.005.302.018.576.037.822h2.076z"/></g></svg>
diff --git a/browser/themes/shared/app-marketplace-icons/zu/android.png b/browser/themes/shared/app-marketplace-icons/zu/android.png
new file mode 100644
index 0000000000..3526174e04
--- /dev/null
+++ b/browser/themes/shared/app-marketplace-icons/zu/android.png
diff --git a/browser/themes/shared/autocomplete.css b/browser/themes/shared/autocomplete.css
new file mode 100644
index 0000000000..f7c0721635
--- /dev/null
+++ b/browser/themes/shared/autocomplete.css
@@ -0,0 +1,167 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* General popup rules */
+
+#PopupAutoComplete > richlistbox > richlistitem {
+  min-height: 20px;
+  border: 0;
+  border-radius: 0;
+  padding: 0 1px;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
+  margin-inline: 4px 0;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem > .ac-title {
+  font: icon;
+  margin-inline-start: 4px;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLearnMore"] {
+  padding-bottom: 2px;
+  padding-inline-start: 21px;
+}
+
+#PopupAutoComplete > richlistbox {
+  padding: 0;
+}
+
+/* Popup states */
+
+.autocomplete-richlistitem:hover {
+  background-color: var(--arrowpanel-dimmed);
+}
+
+.autocomplete-richlistitem[selected] {
+  background-color: SelectedItem;
+  color: SelectedItemText;
+}
+
+/* Autocomplete richlistitem support for a two-line label display */
+
+#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  margin: 0;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon,
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="possible-username"] > .ac-site-icon,
+#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .ac-site-icon {
+  display: block;
+  margin-inline: 4px;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="possible-username"] > .ac-site-icon {
+  visibility: hidden;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper {
+  /* The text should flex while the icon should not */
+  flex: 1;
+  /* width/min-width are needed to get the text-overflow: ellipsis to work for the children */
+  min-width: 0;
+  width: 0;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper > .label-row {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave,
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLearnMore"] > .ac-title,
+#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper > .line2-label {
+  padding-top: 2px !important;
+  opacity: .6;
+}
+
+/* Login form autocompletion (with and without origin showing) and generated passwords */
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon,
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
+  fill: GrayText;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLogins"] > .two-line-wrapper > .ac-site-icon {
+  fill: GrayText;
+  list-style-image: url(chrome://browser/skin/import.svg);
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"][selected] > .two-line-wrapper > .ac-site-icon,
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLogins"][selected] > .two-line-wrapper > .ac-site-icon,
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"][selected] > .two-line-wrapper > .ac-site-icon,
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
+  fill: SelectedItemText;
+}
+
+/* Login form autocompletion */
+#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper {
+  padding: 4px;
+  padding-inline-start: 0;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"]:not([collapsed="true"]) {
+  /* Workaround bug 451997 and/or bug 492645 */
+  display: block;
+}
+
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .line2-label > span {
+  /* The font-family is only adjusted on the inner span so that the
+     line-height of .line2-label matches that of .line1-label */
+  font-family: monospace;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave > span {
+  /* The font-* properties are only adjusted on the inner span so that the
+     line-height of .generated-password-autosave matches that of .line1-label */
+  font-style: italic;
+  font-size: 0.85em;
+  white-space: normal;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] + richlistitem[originaltype="generatedPassword"],
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] + richlistitem[originaltype="generatedPassword"] {
+  /* Separator between logins and generated passwords. This uses --panel-separator-color from default
+   * themes since autocomplete doesn't yet switch to dark. */
+  border-top: 1px solid hsla(210,4%,10%,.14);
+}
+
+/* Insecure field warning */
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
+  background-color: var(--arrowpanel-dimmed);
+  border-bottom: 1px solid var(--panel-separator-color);
+  padding-block: 4px;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
+  background-color: var(--arrowpanel-dimmed-further);
+  color: -moz-DialogText;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
+  color: var(--grey-60);
+  font-size: 1em;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title .ac-emphasize-text-title {
+  font-weight: 600;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
+  color: inherit;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
+  list-style-image: url(chrome://global/skin/icons/security-broken.svg);
+  -moz-context-properties: fill;
+  fill: var(--grey-60);
+}
diff --git a/browser/themes/shared/blockedSite.css b/browser/themes/shared/blockedSite.css
new file mode 100644
index 0000000000..568ae6c2c8
--- /dev/null
+++ b/browser/themes/shared/blockedSite.css
@@ -0,0 +1,71 @@
+/* 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/. */
+
+@import url("chrome://global/skin/error-pages.css");
+
+@media not (prefers-contrast) {
+  :root {
+    --in-content-page-background: #A4000F;
+    --in-content-page-color: white;
+    --in-content-text-color: white;
+    --in-content-primary-button-text-color: black;
+    --in-content-button-background: transparent;
+    --in-content-button-background-hover: #5a0002;
+    --in-content-button-background-active: #3e0200;
+    --in-content-primary-button-background: white;
+    --in-content-primary-button-background-hover: rgba(255, 255, 255, 0.8);
+    --in-content-primary-button-background-active: rgba(255, 255, 255, 0.7);
+  }
+}
+
+.title {
+  background-image: url("chrome://global/skin/icons/blocked.svg");
+}
+
+.button-container button {
+  border: 1px solid white;
+  margin-inline-end: 0;
+  margin-top: 1.5em;
+}
+
+#advisory_provider {
+  text-decoration: underline;
+}
+
+#errorDescriptionContainer {
+  position: absolute;
+  margin: 48px auto;
+}
+
+.error-description {
+  min-width: var(--in-content-container-min-width);
+  max-width: var(--in-content-container-max-width);
+  color: black;
+  background-color: white;
+}
+
+.error-description > p:first-child {
+  padding: 3.5em 3.5em 1em;
+}
+
+.error-description > p:last-child {
+  padding: 0 3.5em 3.5em;
+}
+
+.error-description #ignore_warning_link,
+.error-description a:is(:link, :visited) {
+  cursor: pointer;
+  text-decoration: underline;
+  color: black;
+}
+
+a:not(:link) {
+  color: black;
+  text-decoration: none;
+  cursor: auto;
+}
+
+.sitename {
+  font-weight: bold;
+}
diff --git a/browser/themes/shared/browser-custom-colors.css b/browser/themes/shared/browser-custom-colors.css
new file mode 100644
index 0000000000..ef472da578
--- /dev/null
+++ b/browser/themes/shared/browser-custom-colors.css
@@ -0,0 +1,64 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+@media not (prefers-contrast) {
+  :root:not(:-moz-lwtheme) {
+    --button-primary-bgcolor: rgb(0,97,224);
+    --button-primary-hover-bgcolor: rgb(2,80,187);
+    --button-primary-active-bgcolor: rgb(5,62,148);
+    --button-primary-color: rgb(251,251,254);
+    --button-bgcolor: rgba(207,207,216,.33);
+    --button-hover-bgcolor: rgba(207,207,216,.66);
+    --button-active-bgcolor: rgb(207,207,216);
+    --button-color: rgb(21,20,26);
+
+    --focus-outline-color: var(--button-primary-bgcolor);
+
+    --checkbox-border-color: var(--input-border-color);
+    --checkbox-unchecked-bgcolor: var(--button-bgcolor);
+    --checkbox-unchecked-hover-bgcolor: var(--button-hover-bgcolor);
+    --checkbox-unchecked-active-bgcolor: var(--button-active-bgcolor);
+    --checkbox-checked-border-color: transparent;
+    --checkbox-checked-bgcolor: var(--button-primary-bgcolor);
+    --checkbox-checked-color: var(--button-primary-color);
+    --checkbox-checked-hover-bgcolor: var(--button-primary-hover-bgcolor);
+    --checkbox-checked-active-bgcolor: var(--button-primary-active-bgcolor);
+
+    --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent);
+    --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent);
+    --panel-disabled-color: color-mix(in srgb, currentColor 40%, transparent);
+    --panel-shortcut-color: rgb(91,91,102);
+
+    --input-color: rgb(21,20,26);
+    --input-bgcolor: rgb(255,255,255);
+    --input-border-color: color-mix(in srgb, currentColor 41%, transparent);
+
+    --tab-selected-bgcolor: rgb(255,255,255);
+    --tab-icon-overlay-stroke: rgb(255,255,255);
+    --tab-icon-overlay-fill: rgb(91,91,102);
+    --toolbar-color: rgb(21,20,26);
+    --toolbar-non-lwt-bgcolor: #f9f9fb;
+    --toolbar-non-lwt-textcolor: rgb(21, 20, 26);
+    --toolbarbutton-icon-fill: rgb(91,91,102);
+    --toolbarbutton-icon-fill-attention: rgb(0,97,224);
+
+    --urlbar-popup-action-color: rgb(91,91,102);
+    --urlbar-popup-url-color: rgb(0,97,224);
+    --urlbar-icon-fill-opacity: 0.72;
+
+    --autocomplete-popup-separator-color: rgb(240,240,244);
+    --toolbar-field-border-color: transparent;
+    --arrowpanel-border-color: rgb(240,240,244);
+    --chrome-content-separator-color: rgb(204,204,204);
+
+    --toolbar-field-background-color: rgb(240,240,244);
+    --toolbar-field-color: rgb(21,20,26);
+
+    --autocomplete-popup-highlight-background: #e0e0e6;
+    --autocomplete-popup-highlight-color: rgb(21,20,26);
+    --autocomplete-popup-hover-background: rgb(240,240,244);
+  }
+}
diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
new file mode 100644
index 0000000000..b5d7f54d7e
--- /dev/null
+++ b/browser/themes/shared/browser-shared.css
@@ -0,0 +1,897 @@
+/* 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/. */
+
+@import url("chrome://browser/skin/downloads/indicator.css");
+@import url("chrome://browser/skin/addons/extension-controlled.css");
+@import url("chrome://browser/skin/addons/unified-extensions.css");
+@import url("chrome://browser/skin/toolbarbuttons.css");
+@import url("chrome://browser/skin/toolbarbutton-icons.css");
+@import url("chrome://browser/skin/menupanel.css");
+@import url("chrome://browser/skin/urlbar-searchbar.css");
+@import url("chrome://browser/skin/identity-block/identity-block.css");
+@import url("chrome://browser/skin/notification-icons.css");
+@import url("chrome://browser/skin/addon-notification.css");
+@import url("chrome://browser/skin/identity-credential-notification.css");
+@import url("chrome://browser/skin/urlbarView.css");
+@import url("chrome://browser/skin/translation/infobar.css");
+@import url("chrome://browser/skin/autocomplete.css");
+@import url("chrome://browser/skin/places/editBookmarkPanel.css");
+@import url("chrome://browser/skin/sidebar.css");
+@import url("chrome://browser/skin/tabs.css");
+@import url("chrome://browser/skin/fullscreen/warning.css");
+@import url("chrome://browser/skin/ctrlTab.css");
+@import url("chrome://browser/skin/customizableui/customizeMode.css");
+@import url("chrome://browser/skin/UITour.css");
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
+  --toolbar-color: var(--toolbar-non-lwt-textcolor);
+  --toolbarbutton-border-radius: 4px;
+
+  --tabs-navbar-shadow-size: 1px;
+
+  --panel-shortcut-color: inherit;
+  --panelui-subview-transition-duration: 150ms;
+
+  --short-notification-background: #0250BB;
+  --short-notification-gradient: #9059FF;
+
+  --button-bgcolor: color-mix(in srgb, currentColor 13%, transparent);
+  --button-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent);
+  --button-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent);
+  --button-color: currentColor;
+  --button-primary-bgcolor: AccentColor;
+  --button-primary-hover-bgcolor: color-mix(in srgb, black 10%, AccentColor);
+  --button-primary-active-bgcolor: color-mix(in srgb, black 20%, AccentColor);
+  --button-primary-color: AccentColorText;
+
+  --buttons-destructive-bgcolor: #e22850;
+  --buttons-destructive-hover-bgcolor: #c50042;
+  --buttons-destructive-active-bgcolor: #810220;
+  --buttons-destructive-color: #fbfbfe;
+
+  --checkbox-unchecked-bgcolor: var(--button-bgcolor);
+  --checkbox-unchecked-hover-bgcolor: var(--button-hover-bgcolor);
+  --checkbox-unchecked-active-bgcolor: var(--button-active-bgcolor);
+  --checkbox-checked-border-color: transparent;
+  --checkbox-checked-bgcolor: var(--button-primary-bgcolor);
+  --checkbox-checked-color: var(--button-primary-color);
+  --checkbox-checked-hover-bgcolor: var(--button-primary-hover-bgcolor);
+  --checkbox-checked-active-bgcolor: var(--button-primary-active-bgcolor);
+
+  --autocomplete-popup-hover-background: var(--arrowpanel-dimmed);
+  --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 14%, transparent);
+
+  --identity-box-margin-inline: 4px;
+  --urlbar-box-bgcolor: var(--button-bgcolor);
+  --urlbar-box-focus-bgcolor: var(--button-bgcolor);
+  --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor);
+  --urlbar-box-active-bgcolor: var(--button-active-bgcolor);
+  --urlbar-box-text-color: inherit;
+  --urlbar-box-hover-text-color: var(--urlbar-box-text-color);
+  --urlbar-min-height: 32px;
+  --urlbar-icon-fill-opacity: 0.9;
+  --urlbar-icon-padding: 6px; /* (32px - 2px border - 2px padding - 16px icon) / 2 */
+  /* This should be used for icons and chiclets inside the input field. It makes
+     the gap around them more uniform when they are close to the field edges */
+  --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px);
+  --urlbar-popup-url-color: -moz-nativehyperlinktext;
+
+  --lwt-additional-images: none;
+  --lwt-background-alignment: right top;
+  --lwt-background-tiling: no-repeat;
+  --lwt-brighttext-url-color: #00ddff;
+
+  --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67);
+
+  -moz-box-layout: flex;
+}
+
+:root:-moz-lwtheme {
+  --checkbox-border-color: color-mix(in srgb, currentColor 41%, transparent);
+}
+
+@media (prefers-contrast) {
+  :root {
+    --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 86%, transparent);
+    --urlbar-icon-fill-opacity: 1;
+    --checkbox-checked-border-color: var(--checkbox-checked-bgcolor);
+  }
+}
+
+:root[uidensity=compact] {
+  --urlbar-min-height: 26px;
+  --urlbar-icon-padding: 3px; /* (26px - 2px border - 2px padding - 16px icon) / 2 */
+}
+
+:root[uidensity=touch] {
+  --urlbar-min-height: 34px;
+  --urlbar-icon-padding: 7px; /* (34px - 2px border - 2px padding - 16px icon) / 2 */
+}
+
+:root:-moz-lwtheme {
+  --toolbar-bgcolor: rgba(255,255,255,.4);
+  --toolbar-color: var(--lwt-text-color, inherit);
+
+  color: var(--lwt-text-color);
+}
+
+@media not (prefers-contrast) {
+  :root:-moz-lwtheme {
+    --focus-outline-color: #0061E0;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:-moz-lwtheme {
+      --focus-outline-color: #00DDFF;
+    }
+  }
+}
+
+/* Increase the contrast of urlbar boxes in dark mode.
+   In practice these are bumped-up --button(-hover)-bgcolor rules */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --urlbar-box-bgcolor: color-mix(in srgb, currentColor 16%, transparent);
+    --urlbar-box-focus-bgcolor: color-mix(in srgb, currentColor 16%, transparent);
+    --urlbar-box-hover-bgcolor: color-mix(in srgb, currentColor 22%, transparent);
+  }
+}
+
+@media (min-resolution: 1.5dppx) {
+  :root {
+    --tabs-navbar-shadow-size: 0.5px;
+  }
+}
+
+@media (min-resolution: 3dppx) {
+  :root {
+    --tabs-navbar-shadow-size: 0.33px;
+  }
+}
+
+/* Set link color with proper contrast for WebExt themes */
+
+toolbar .text-link:-moz-lwtheme,
+panel .text-link:-moz-lwtheme {
+  color: #0060df;
+}
+
+toolbar[brighttext] .text-link:-moz-lwtheme,
+:root[lwt-popup-brighttext] panel .text-link {
+  color: var(--lwt-brighttext-url-color);
+}
+
+toolbar .text-link:-moz-lwtheme:not(:hover),
+panel .text-link:-moz-lwtheme:not(:hover) {
+  text-decoration: none;
+}
+
+/* Toolbar / content area border */
+
+#navigator-toolbox {
+  border-bottom: 1px solid var(--chrome-content-separator-color);
+}
+
+:root[customizing] #navigator-toolbox {
+  border-bottom-style: none;
+}
+
+/* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */
+#nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child,
+#nav-bar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
+  padding-inline-start: var(--toolbar-start-end-padding);
+}
+
+:root[sessionrestored] #nav-bar:-moz-lwtheme {
+  transition: var(--ext-theme-background-transition);
+}
+
+/* Bookmark toolbar */
+
+#PersonalToolbar {
+  overflow: clip;
+  max-height: 4em;
+  padding-inline: 6px;
+}
+
+:root[uidensity=compact] #PersonalToolbar {
+  padding-inline: 2px;
+}
+
+:root[sessionrestored] #PersonalToolbar:not(.instant) {
+  transition: min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition);
+}
+
+#PersonalToolbar[collapsed=true] {
+  min-height: 0;
+  max-height: 0;
+}
+
+:root[sessionrestored] #PersonalToolbar:not(.instant)[collapsed=true] {
+  transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
+}
+
+#PersonalToolbar[collapsed=false]:not([initialized]) > #personal-toolbar-empty {
+  visibility: hidden;
+}
+
+/*
+ * Make the empty bookmarks toolbar message take up no horizontal space.
+ * This avoids two issues:
+ * 1) drag/drop of urls/bookmarks to the toolbar not working, because they land
+ *    on the personal-toolbar-empty element.
+ * 2) buttons in the toolbar moving horizontally while the window opens,
+ *    because the element is first shown at full width and then completely
+ *    hidden.
+ * TODO(emilio): The comment above was never quite true (the message did take
+ * horizontal space, see bug 1812636). Figure out how much of this rule is
+ * really needed.
+ */
+#PersonalToolbar[collapsed=false] > #personal-toolbar-empty[nowidth] > #personal-toolbar-empty-description {
+  margin-inline: 0;
+  min-width: 0;
+  white-space: nowrap;
+  position: relative;
+  z-index: 1;
+}
+
+#PersonalToolbar[collapsed=true].instant {
+  visibility: collapse;
+}
+
+#PersonalToolbar[customizing] {
+  outline: 1px dashed;
+  outline-offset: -3px;
+}
+
+#PersonalToolbar[customizing]:empty {
+  /* Avoid the toolbar having no height when there's no items in it */
+  min-height: 22px;
+}
+
+#PlacesToolbarDropIndicator {
+  list-style-image: url(chrome://browser/skin/toolbar-drag-indicator.svg);
+  pointer-events: none;
+}
+
+/* rules for menupopup drop indicators */
+menupopup::part(drop-indicator-container) {
+  /* TODO(emilio): When menupopups get ported to modern flex layout we can
+   * probably simplify this substantially, by making the indicator position:
+   * absolute or so (which was never properly supported in XUL). The container
+   * should become completely unnecessary then. */
+  -moz-box-flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+menupopup::part(drop-indicator-bar) {
+  position: relative;
+  /* these two margins must together compensate the indicator's height */
+  margin-block: -1px;
+}
+
+menupopup::part(drop-indicator) {
+  list-style-image: none;
+  height: 2px;
+  margin-inline-end: -4em;
+  background-color: SelectedItem;
+  pointer-events: none;
+}
+
+/* Back / Forward context menu */
+
+.unified-nav-back,
+.unified-nav-forward {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
+.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/back.svg") !important;
+}
+
+.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
+.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/forward.svg") !important;
+}
+
+/* Find bar */
+
+.browserContainer > findbar {
+  background-color: var(--toolbar-non-lwt-bgcolor);
+  color: var(--toolbar-non-lwt-textcolor);
+  text-shadow: none;
+}
+
+:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme {
+  background-color: var(--lwt-accent-color);
+  background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
+  border-top-color: var(--chrome-content-separator-color);
+  color: var(--toolbar-color);
+}
+
+:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme:-moz-window-inactive {
+  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
+}
+
+/* Private browsing indicator */
+
+.private-browsing-indicator {
+  background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-position: center;
+  width: 24px;
+  margin-inline: 7px;
+  position: relative;
+  /* Need to ensure this gets positioned on top of the position:relative #navigator-toolbox
+   * in case the dark/light themes give that item a background. */
+  z-index: 1;
+}
+
+/* New Private Browsing Indicator */
+
+#private-browsing-indicator-with-label {
+  -moz-box-align: center;
+  margin-inline: 7px;
+}
+
+.private-browsing-indicator-icon {
+  list-style-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
+  width: 16px;
+  height: 16px;
+}
+
+:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator,
+:root[privatebrowsingnewindicator] .private-browsing-indicator,
+:root:not([privatebrowsingnewindicator]) #private-browsing-indicator-with-label,
+:root:not([privatebrowsingmode=temporary]) #private-browsing-indicator-with-label {
+  display: none;
+}
+
+/* End private browsing indicator */
+
+/* Override theme colors since the picker uses extra colors that
+   themes cannot set */
+#DateTimePickerPanel {
+  --arrowpanel-background: Field;
+  --arrowpanel-color: FieldText;
+  --arrowpanel-border-color: ThreeDShadow;
+}
+
+#DateTimePickerPanel[side="top"],
+#DateTimePickerPanel[side="bottom"] {
+  margin-inline: 0;
+}
+
+#widget-overflow .webextension-popup-browser {
+  background: #fff;
+
+  /* height set via JS can be lower than the stack min-height,
+     ensure the browser takes up at least that min-height */
+  min-height: 100%;
+}
+
+#addon-progress-notification-progressmeter {
+  margin: 2px 4px;
+}
+
+/* Contextual Feature Recommendation popup-notification */
+
+#cfr-notification-header {
+  width: 100%;
+  display: block;
+  text-align: center;
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+}
+
+#cfr-notification-header-stack {
+  width: 100%;
+}
+
+#cfr-notification-header-label {
+  margin: 9px;
+  font-weight: 600;
+}
+
+#cfr-notification-header-link {
+  margin: 7px;
+  color: inherit;
+  cursor: default;
+  justify-self: end;
+}
+
+#cfr-notification-header-image {
+  width: 19px;
+  height: 19px;
+  padding: 2px;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.6;
+  list-style-image: url(chrome://global/skin/icons/help.svg);
+}
+
+#cfr-notification-header-image:hover {
+  background-color: hsla(0,0%,70%,.2);
+  border-radius: 2px;
+}
+
+#contextual-feature-recommendation-notification {
+  width: 400px;
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] {
+  background: radial-gradient(circle farthest-side at top right, var(--short-notification-gradient), var(--short-notification-background));
+  width: unset;
+  max-width: 700px;
+  overflow-wrap: break-word;
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"]:-moz-locale-dir(rtl) {
+  background: radial-gradient(circle farthest-side at top left, var(--short-notification-gradient), var(--short-notification-background));
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-body-container,
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-footer-container,
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] #cfr-notification-header-link {
+  display: none;
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] #cfr-notification-header {
+  box-shadow: none;
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] description {
+  font-weight: 400;
+  margin: unset;
+  margin-inline: 12px;
+  transform: translateY(50%);
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button-container,
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-header-container {
+  display: inline-flex;
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button-container {
+  float: inline-end;
+  background-color: transparent;
+  flex-direction: row-reverse;
+  /* Override proton-doorhanger default styles that increase the size of the button */
+  margin: 0;
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button {
+  background-color: rgba(216, 216, 216, 0.2);
+  color: white;
+  border: none;
+  border-radius: 2px;
+  margin: 4px;
+  padding: 3px 12px;
+  flex: 1;
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button:after {
+  content: url(chrome://global/skin/icons/arrow-left-12.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  transform: translateY(2px);
+  float: inline-end;
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"]:-moz-locale-dir(ltr) .popup-notification-primary-button:after {
+  content: url(chrome://global/skin/icons/arrow-right-12.svg);
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button:hover {
+  background-color: rgba(216, 216, 216, 0.4);
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button:active {
+  background-color: rgba(216, 216, 216, 0.5);
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-secondary-button {
+  margin: 3px;
+  border: none;
+  border-radius: 2px;
+  background-image: url(chrome://global/skin/icons/close.svg);
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 10px;
+  -moz-context-properties: fill;
+  fill: white;
+  height: 22px;
+  width: 22px;
+  padding: 0;
+  align-self: center;
+  flex: none;
+  font-size: 0;
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-secondary-button:hover {
+  background-color: rgba(216, 216, 216, 0.4);
+}
+
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-header-container {
+  color: white;
+  max-width: unset;
+}
+
+#contextual-feature-recommendation-notification[data-notification-bucket="CFR_SOCIAL_TRACKING_PROTECTION"] {
+  width: 386px;
+}
+
+#contextual-feature-recommendation-notification .popup-notification-icon {
+  margin-inline-end: 4px;
+}
+
+#contextual-feature-recommendation-notification .cfr-doorhanger-large-icon {
+  width: 64px;
+  height: 64px;
+  margin-inline-end: 12px;
+}
+
+#contextual-feature-recommendation-notification .popup-notification-body-container {
+  width: 100%;
+  padding-bottom: 2px;
+}
+
+#contextual-feature-recommendation-notification popupnotificationcontent {
+  margin-top: 0;
+}
+
+#contextual-feature-recommendation-notification description {
+  margin-bottom: 0;
+}
+
+#cfr-notification-footer-text-and-addon-info {
+  display: block;
+  padding: 10px var(--arrowpanel-padding);
+}
+
+#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] #cfr-notification-feature-steps,
+#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] .popup-notification-footer-container {
+  display: none;
+}
+
+/*
+ * `icon_and_message` CFR doorhanger with: icon, title and subtitle.
+ * No panel header is shown
+ */
+#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] #cfr-notification-header {
+  display: none;
+}
+
+#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] .popup-notification-description {
+  font-weight: 600;
+  margin-bottom: 15px;
+}
+
+#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] popupnotificationcontent {
+  display: block; /* This forces the subtitle content to wrap */
+}
+
+
+#cfr-notification-feature-steps {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+}
+
+#cfr-notification-feature-steps li {
+  margin-inline-start: 10px;
+  position: relative;
+  display: list-item;
+}
+
+#cfr-notification-feature-steps li:not(:last-child) {
+  margin-bottom: 5px;
+}
+
+#cfr-notification-footer-text,
+#cfr-notification-footer-users,
+#cfr-notification-footer-learn-more-link {
+  margin: 0;
+}
+
+#cfr-notification-footer-addon-info {
+  align-items: center;
+  display: flex;
+  margin-block: 10px 6px;
+}
+
+#cfr-notification-footer-filled-stars,
+#cfr-notification-footer-empty-stars {
+  -moz-context-properties: fill, fill-opacity;
+  background-image: url(chrome://browser/skin/bookmark.svg);
+  fill: currentColor;
+  fill-opacity: 0.7;
+  height: 16px;
+}
+
+#cfr-notification-footer-filled-stars:-moz-locale-dir(rtl),
+#cfr-notification-footer-empty-stars {
+  background-position-x: right;
+}
+
+#cfr-notification-footer-filled-stars,
+#cfr-notification-footer-empty-stars:-moz-locale-dir(rtl) {
+  background-position-x: left;
+}
+
+#cfr-notification-footer-empty-stars[tooltiptext] {
+  margin-inline-end: 6px;
+  opacity: 0.3;
+}
+
+#cfr-notification-footer-users {
+  opacity: 0.7;
+}
+
+#cfr-notification-footer-spacer {
+  flex-grow: 1;
+}
+
+#content-mask {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+/* nhnt11: Workaround to insert a linebreak after the DoH doorhanger's title.
+ * The title uses the inline html|b that usually contains the hostname for
+ * permission prompts to achieve bold formatting. This is always the 2nd child.
+ */
+.popup-notification-description[popupid="doh-first-time"] > html|b:first-of-type {
+  display: block;
+  margin-bottom: 4px; /* matches the margin-bottom on description elements */
+}
+
+/* Password Manager Doorhanger */
+
+.ac-dropmarker {
+  appearance: none;
+  justify-self: end;
+  margin-inline-end: 8px;
+  align-self: center;
+}
+
+.ac-dropmarker::part(icon) {
+  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  -moz-context-properties: fill;
+  fill: var(--input-color, -moz-DialogText);
+}
+
+.ac-has-end-icon {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+/* ENABLE DEVTOOLS POPUP */
+@media (-moz-platform: macos), (-moz-platform: windows) {
+  #enable-devtools-popup {
+    font-size: 1.18em;
+  }
+}
+
+#sharing-tabs-warning-panel > hbox[type="window"] > vbox > label > #sharing-warning-screen-panel-header,
+#sharing-tabs-warning-panel > hbox[type="screen"] > vbox > label > #sharing-warning-window-panel-header {
+  display: none;
+}
+
+#sharing-tabs-warning-panel {
+  max-width: 400px;
+}
+
+#sharing-warning-proceed-to-tab {
+  appearance: none;
+  border-style: none;
+  margin: 0;
+  background-color: rgb(0,96,223);
+  color: rgb(255,255,255);
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+
+#sharing-warning-proceed-to-tab:hover {
+  background-color: rgb(0,62,170);
+}
+
+.webRTC-selectDevice-selector-container {
+  display: flex;
+  align-items: center;
+}
+
+.webRTC-selectDevice-selector-container > menulist {
+  flex: 1;
+  min-width: 0;
+}
+
+popupnotificationcontent {
+  margin-block-start: 8px;
+}
+
+/**
+ * Our OS integration code toggles whether system colors should return light or
+ * dark values based on the luminosity of the toolbar background. Because themes
+ * can style panels to have a different background color than the toolbar, we
+ * need specific overrides for system colors used in light or dark themes.
+ */
+.popup-notification-body:-moz-lwtheme {
+  color-scheme: light;
+}
+
+:root[lwt-popup-brighttext] .popup-notification-body {
+  color-scheme: dark;
+}
+
+.popup-notification-body menulist {
+  margin: 0;
+}
+
+.popup-notification-checkbox {
+  margin-block: 12px 0;
+}
+
+.popup-notification-body-container {
+  padding-block-end: 0;
+}
+
+#webRTC-selectCamera-label,
+#webRTC-selectMicrophone-label {
+  display: none;
+}
+
+.webRTC-selectDevice-icon {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-inline-end: 8px;
+  /* Setting width explicitly so it's still visible if the device label is very long */
+  width: 16px;
+}
+
+#webRTC-selectCamera-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
+}
+
+#webRTC-selectMicrophone-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
+}
+
+#webRTC-selectSpeaker-icon {
+  list-style-image: url("chrome://global/skin/media/audio.svg");
+}
+
+.popup-notification-body :is(description, label:not(.learnMore), checkbox, input) {
+  margin-inline: 0;
+}
+
+.popup-notification-body input {
+  padding: 8px;
+  border-radius: 4px;
+  border: 0;
+  outline: 1px solid var(--input-border-color, ThreeDShadow);
+  outline-offset: -1px;
+  background-color: var(--input-bgcolor, Field);
+  color: var(--input-color, FieldText);
+}
+
+.popup-notification-body input.ac-has-end-icon {
+  --input-padding-from-arrow-side: calc(8px + 16px + 8px); /* spacing from the end + arrow element width + extra spacing) */
+  padding-inline-end: var(--input-padding-from-arrow-side);
+}
+
+/* Avoid overlapping the text on the arrow icon when switching input text direction */
+.popup-notification-body:-moz-locale-dir(rtl) input.ac-has-end-icon:dir(ltr) {
+  padding-left: var(--input-padding-from-arrow-side);
+  padding-right: 8px;
+}
+.popup-notification-body:-moz-locale-dir(ltr) input.ac-has-end-icon:dir(rtl) {
+  padding-right: var(--input-padding-from-arrow-side);
+  padding-left: 8px;
+}
+
+.popup-notification-body input:focus-visible {
+  outline: 2px solid var(--focus-outline-color);
+}
+
+/**
+ * There's already a margin-block-start of 8px on popupnotificationcontent,
+ * so the first label only needs 8px of margin-block-start to match the
+ * spec.
+ */
+.password-notification-label:first-of-type {
+  margin-block-start: 8px;
+}
+
+.password-notification-label:not(:first-of-type) {
+  margin-block-start: 16px;
+}
+
+#password-notification-visibilityToggle {
+  margin-block-start: 14px;
+}
+
+#password-notification-visibilityToggle > .checkbox-label-box > .checkbox-label {
+  opacity: 0.7;
+}
+
+.popup-notification-description > b {
+  font-weight: inherit;
+}
+
+.popup-notification-description {
+  font-weight: 600;
+  margin-top: 0;
+}
+
+#tab-notification-deck {
+  display: block;
+}
+
+.relay-integration-header {
+  display: flex;
+  align-items: center;
+  font-size: 2em;
+}
+
+.relay-integration-header > div {
+  width: 32px;
+  height: 32px;
+  background-image: url("chrome://browser/content/logos/relay.svg");
+  background-repeat: no-repeat;
+}
+
+.relay-integration-header > span:first-of-type {
+  font-weight: bold;
+  margin-inline-start: 8px;
+}
+
+.relay-integration-header > span:last-of-type {
+  font-weight: normal;
+  white-space: pre;
+}
+
+.popup-notification-description[popupid="relay-integration-offer-notification"] > html|div:first-of-type {
+  font-weight: normal;
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto auto auto auto;
+}
+
+#relay-integration-reuse-masks-notification > popupnotificationcontent > div {
+  font-weight: normal;
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto auto auto auto;
+}
+
+.reusable-relay-masks {
+  display: flex;
+  flex-direction: column;
+}
+
+.reusable-relay-masks > button {
+  padding: 4px;
+  margin: 4px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.reusable-relay-masks > button > span:first-child {
+  margin-inline-end: 20px;
+}
+
+.reusable-relay-masks > button > span:last-child {
+  opacity: 0.6;
+}
diff --git a/browser/themes/shared/contextmenu.css b/browser/themes/shared/contextmenu.css
new file mode 100644
index 0000000000..b0ace28d12
--- /dev/null
+++ b/browser/themes/shared/contextmenu.css
@@ -0,0 +1,59 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+#context-navigation > .menuitem-iconic {
+  -moz-box-flex: 1;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+}
+
+#context-navigation > .menuitem-iconic > .menu-iconic-left {
+  appearance: none;
+}
+
+#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
+  width: 1.25em;
+  height: auto;
+  margin: 7px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#context-back {
+  list-style-image: url("chrome://browser/skin/back.svg");
+}
+
+#context-forward {
+  list-style-image: url("chrome://browser/skin/forward.svg");
+}
+
+#context-reload {
+  list-style-image: url("chrome://global/skin/icons/reload.svg");
+}
+
+#context-stop {
+  list-style-image: url("chrome://global/skin/icons/close.svg");
+}
+
+#context-bookmarkpage {
+  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
+}
+
+#context-bookmarkpage[starred=true] {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+
+#context-back:-moz-locale-dir(rtl),
+#context-forward:-moz-locale-dir(rtl),
+#context-reload:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+#context-media-eme-learnmore {
+  list-style-image: url("chrome://browser/skin/drm-icon.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
diff --git a/browser/themes/shared/controlcenter/3rdpartycookies.svg b/browser/themes/shared/controlcenter/3rdpartycookies.svg
new file mode 100644
index 0000000000..4477d1b43e
--- /dev/null
+++ b/browser/themes/shared/controlcenter/3rdpartycookies.svg
@@ -0,0 +1,6 @@
+<!-- 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 viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M6.655.627C3.155 1.261.5 4.318.5 8a7.5 7.5 0 0 0 15 0l-.237-.246c-.406.11-.83.173-1.263.207l0 .639-.4.4-1.2 0-.4-.4 0-.781A6.498 6.498 0 0 1 7 1.5c0-.199.012-.395.032-.589zM2.4 9 2 8.6l0-1.2.4-.4 1.2 0 .4.4 0 1.2-.4.4zM6 12.6l-.4.4-1.2 0-.4-.4 0-1.2.4-.4 1.2 0 .4.4zm0-8-.4.4-1.2 0-.4-.4 0-1.2.4-.4 1.2 0 .4.4zm3 4-.4.4-1.2 0-.4-.4 0-1.2.4-.4 1.2 0 .4.4zm3 4-.4.4-1.2 0-.4-.4 0-1.2.4-.4 1.2 0 .4.4z"/>
+</svg>
diff --git a/browser/themes/shared/controlcenter/cryptominers.svg b/browser/themes/shared/controlcenter/cryptominers.svg
new file mode 100644
index 0000000000..9486ae76de
--- /dev/null
+++ b/browser/themes/shared/controlcenter/cryptominers.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M12 2 9.25 2l0-.875a.625.625 0 0 0-1.25 0L8 2 5.414 2a.997.997 0 0 0-.707.293L3.293 3.707A1 1 0 0 0 3 4.414L3 5a1 1 0 0 0 1 1l4 0 0 8.875a.625.625 0 0 0 1.25 0L9.25 6 12 6a1 1 0 0 0 1-1l0-2a1 1 0 0 0-1-1z"/>
+</svg>
diff --git a/browser/themes/shared/controlcenter/dashboard.svg b/browser/themes/shared/controlcenter/dashboard.svg
new file mode 100644
index 0000000000..e2908d9485
--- /dev/null
+++ b/browser/themes/shared/controlcenter/dashboard.svg
@@ -0,0 +1,4 @@
+<!-- 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 data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M15 12H4a2 2 0 0 1-2-2V3a1 1 0 0 0-2 0v7a4 4 0 0 0 4 4h11a1 1 0 0 0 0-2z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M4 11a1 1 0 0 0 1-1V8a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1zM7 11a1 1 0 0 0 1-1V4a1 1 0 0 0-2 0v6a1 1 0 0 0 1 1zM10 11a1 1 0 0 0 1-1V6a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1zM13 11a1 1 0 0 0 1-1V7a1 1 0 0 0-2 0v3a1 1 0 0 0 1 1z"/></svg>
diff --git a/browser/themes/shared/controlcenter/etp-milestone.svg b/browser/themes/shared/controlcenter/etp-milestone.svg
new file mode 100644
index 0000000000..c9dd70954a
--- /dev/null
+++ b/browser/themes/shared/controlcenter/etp-milestone.svg
@@ -0,0 +1,4 @@
+<!-- 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="32" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M31.617 10.435V5.009a1.74 1.74 0 00-1.443-1.74L16.296.87a1.687 1.687 0 00-.592 0L1.87 3.288a1.74 1.74 0 00-1.444 1.74v5.425c-.043 2.87-.07 4.948.052 6.244.748 8.295 2.496 12.078 5.47 16.147a16.165 16.165 0 009.704 6.287c.113.013.227.013.34 0 .112.014.226.014.338 0a16.409 16.409 0 009.757-6.313c2.974-4.07 4.722-7.826 5.47-16.156.13-1.287.104-3.365.06-6.226z" fill="context-fill"/><path d="M15.704.87L1.87 3.287a1.74 1.74 0 00-1.444 1.74v5.425c-.043 2.87-.07 4.948.052 6.244.748 8.295 2.496 12.078 5.47 16.147a16.165 16.165 0 009.704 6.287c.113.013.227.013.34 0V.87a1.74 1.74 0 00-.288 0z" opacity=".5" fill="context-stroke"/><path d="M12.878 11.635c-1.4.174-2.295 2.191-2.052 4.122.122.982.713 1.452.87 3.217 0 .174 0 .322.043.47a16.66 16.66 0 003.044-.166 5.009 5.009 0 01-.053-.87c.219-1.13.347-2.275.383-3.425-.226-1.757-.983-3.505-2.235-3.348zm2.052 8.487c-.84.135-1.688.202-2.539.2h-.548c.025.398.083.794.174 1.182.14.566.618 1.557 1.687 1.418a1.452 1.452 0 001.374-1.809c-.035-.348-.095-.67-.148-.991zm4.2-5.879c-1.252-.156-2.008 1.592-2.234 3.34.036 1.15.164 2.296.382 3.426.008.29-.01.581-.052.87 1.002.146 2.015.202 3.026.164v-.47c.174-1.738.765-2.234.87-3.216.295-1.922-.6-3.94-1.992-4.114zm-2.208 9.47a1.452 1.452 0 001.339 1.809c1.07.139 1.548-.87 1.687-1.418a7.07 7.07 0 00.174-1.174H19.6c-.845 0-1.688-.066-2.522-.2-.06.322-.121.644-.156.983z" fill="#FBFBFE"/></svg>
diff --git a/browser/themes/shared/controlcenter/hero-message-background.svg b/browser/themes/shared/controlcenter/hero-message-background.svg
new file mode 100644
index 0000000000..d54f1cbc4a
--- /dev/null
+++ b/browser/themes/shared/controlcenter/hero-message-background.svg
@@ -0,0 +1,4 @@
+<!-- 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="163" height="120" fill="context-fill" xmlns="http://www.w3.org/2000/svg"><defs/><defs><linearGradient x1="-23.704%" y1="116.44%" x2="93.24%" y2="15.294%" id="a"><stop offset="0%"/><stop stop-color="#fff" offset="100%"/></linearGradient></defs><mask id="b"><path fill="url(#a)" d="M0 0h163v120H0z"/></mask><path d="M25.808 95.468a.426.426 0 01.36 0 .52.52 0 01.275.326c1.015 2.024 2.68 5.116 4.131 6.713.341.372.07 1.026-.39.972a8.237 8.237 0 01-1.73-.402c.879 1.55 1.85 3.107 2.783 4.28 1.718-2.462 3.441-5.294 5.04-8.114a20.436 20.436 0 01-4.309 1.001c-1.144.146-1.817-1.495-.972-2.421 3.612-3.977 7.76-11.674 10.286-16.717.102-.355.35-.65.682-.81.284-.134.613-.134.898 0 .332.16.58.455.681.81 2.526 5.043 6.675 12.74 10.287 16.717.84.926.171 2.567-.973 2.421a20.436 20.436 0 01-4.309-1.001c2.628 4.635 5.593 9.306 8.316 12.306 1.065 1.172.217 3.25-1.23 3.065a28.237 28.237 0 01-3.048-.553 104.238 104.238 0 003.87 5.939c3.008-3.664 6.18-8.726 9.032-13.754a25.262 25.262 0 01-5.32 1.237c-1.41.18-2.238-1.847-1.2-2.989 4.459-4.908 9.578-14.408 12.697-20.63.125-.44.433-.804.844-1 .35-.168.757-.168 1.108 0 .411.196.718.56.844 1 3.117 6.222 8.237 15.724 12.695 20.63 1.038 1.14.212 3.17-1.2 2.99a25.252 25.252 0 01-5.318-1.238c2.014 3.554 4.19 7.124 6.354 10.206 1.243-2.014 2.414-4.236 3.266-5.937a.751.751 0 01.396-.468.598.598 0 01.52 0 .747.747 0 01.395.468 85.217 85.217 0 002.93 5.384c2.357-3.709 4.615-7.976 6.218-11.177.1-.356.35-.65.682-.811.284-.134.613-.134.897 0 .333.16.58.455.682.811a151.554 151.554 0 003.97 7.439c2.2-2.858 4.475-6.523 6.54-10.167a20.492 20.492 0 01-4.31 1.002c-1.143.146-1.817-1.495-.972-2.421 3.613-3.977 7.761-11.674 10.288-16.717.101-.356.35-.65.682-.81.284-.136.613-.136.897 0 .332.16.58.454.682.81 2.525 5.043 6.675 12.74 10.286 16.717.842.926.172 2.567-.972 2.421a20.514 20.514 0 01-4.31-1.002c2.139 3.77 4.5 7.564 6.772 10.463A67.07 67.07 0 00150 67.202C150 30.087 120.006 0 82.993 0 45.98 0 16 30.085 16 67.2a67.068 67.068 0 007.89 31.665 58.848 58.848 0 001.643-3.076.52.52 0 01.275-.321z" fill-opacity=".15" mask="url(#b)"/><path d="M49.37 43.344c0 4.74-3.822 8.63-8.536 8.63H6.528c-3.597 0-6.513-2.978-6.513-6.598 0-3.62 2.916-6.596 6.513-6.596.53.002 1.057.07 1.57.2a6.807 6.807 0 011.284-5.767 6.727 6.727 0 015.296-2.563 6.695 6.695 0 013.817 1.191c1.438-5.56 6.761-9.179 12.429-8.45 5.667.73 9.912 5.58 9.911 11.325 4.714-.002 8.534 3.889 8.534 8.628zm103.79-19.978c-.795 0-1.588.096-2.36.288a10.268 10.268 0 00-4.186-10.761 10.138 10.138 0 00-11.491.01C132.954 4.525 124.93-.93 116.39.17c-8.541 1.099-14.939 8.41-14.938 17.068-7.065.067-12.757 5.845-12.757 12.949s5.692 12.882 12.757 12.949h51.713c5.388-.058 9.726-4.467 9.726-9.885s-4.338-9.827-9.726-9.885h-.005z" transform="translate(0 22)" mask="url(#b)" fill-opacity=".2"/><path d="M107.998 44.892c.013-2.062-1.43-3.834-3.418-4.199L83.5 37l-21.08 3.693c-1.988.365-3.43 2.137-3.418 4.199-.013 5.058.018 14.086.372 18.06 1.032 11.567 3.086 17.294 7.865 23.92C73.732 95.879 83.5 97 83.5 97s9.765-1.122 16.262-10.127c4.779-6.629 6.834-12.357 7.865-23.92.353-3.972.385-13.003.372-18.061zm-5.252 17.607c-1.021 11.447-3.05 16.024-6.932 21.416-4.327 6-10.438 7.648-12.306 8.024-1.845-.382-8.023-2.061-12.322-8.024-3.883-5.383-5.91-9.964-6.932-21.416-.24-2.692-.368-8.866-.353-16.992L83.5 42.07l19.6 3.436c.015 8.124-.113 14.298-.353 16.992z" fill="#fff"/><path d="M71.306 62.31c.93 10.77 2.67 13.95 5.429 17.906A12.913 12.913 0 0083 85V50l-12 2.173c.052 4.775.155 8.396.306 10.137z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/controlcenter/mcb-disabled.svg b/browser/themes/shared/controlcenter/mcb-disabled.svg
new file mode 100644
index 0000000000..b9396a8e2a
--- /dev/null
+++ b/browser/themes/shared/controlcenter/mcb-disabled.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M18.75 9.977h-.727L6 22h12.75A2.25 2.25 0 0 0 21 19.75v-7.523a2.25 2.25 0 0 0-2.25-2.25zm-9.75 0V7a3 3 0 0 1 6 0v1.5l2.838-2.838A5.994 5.994 0 0 0 6 7v2.977h-.75A2.25 2.25 0 0 0 3 12.227v7.523a2.224 2.224 0 0 0 .105.645L13.523 9.977z"/>
+  <path d="M2.5 23a1.5 1.5 0 0 1-1.061-2.561l19-19A1.5 1.5 0 0 1 22.56 3.56l-19 19A1.5 1.5 0 0 1 2.5 23z" fill="#ff0039" fill-opacity="1"/>
+</svg>
diff --git a/browser/themes/shared/controlcenter/panel.css b/browser/themes/shared/controlcenter/panel.css
new file mode 100644
index 0000000000..2c24550951
--- /dev/null
+++ b/browser/themes/shared/controlcenter/panel.css
@@ -0,0 +1,825 @@
+/* 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/. */
+
+/* Hide all conditional elements by default. */
+:is([when-connection],[when-customroot],[when-mixedcontent],[when-ciphers],[when-httpsonlystatus]) {
+  display: none;
+}
+
+#identity-popup,
+#permission-popup,
+#protections-popup {
+  --popup-width: 30.81em;
+  /* Set default fill for icons in the identity popup.
+     Individual icons can override this. */
+  fill: currentColor;
+  --horizontal-padding: calc(var(--arrowpanel-menuitem-padding-inline) * 2);
+  --vertical-section-padding: 0.9em;
+  --height-offset: 0px;
+  font: menu;
+}
+
+#protections-popup[toast] {
+  --popup-width: 27.12em;
+}
+
+#protections-popup[infoMessageShowing] {
+  --height-offset: 260px;
+}
+
+/* This is used by screenshots tests to hide intermittently different
+ * identity popup shadows (see bug 1425253). */
+#identity-popup.no-shadow,
+#permission-popup.no-shadow {
+  -moz-window-shadow: none;
+}
+
+/* Show the right elements for the right connection states. */
+#identity-popup[customroot=true] [when-customroot=true],
+#identity-popup[connection=not-secure] [when-connection~=not-secure],
+#identity-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden],
+#identity-popup[connection=secure-ev] [when-connection~=secure-ev],
+#identity-popup[connection=secure] [when-connection~=secure],
+#identity-popup[connection=chrome] [when-connection~=chrome],
+#identity-popup[connection=file] [when-connection~=file],
+#identity-popup[connection=extension] [when-connection~=extension],
+#identity-popup[connection=cert-error-page] [when-connection~=cert-error-page],
+#identity-popup[connection=net-error-page] [when-connection~=net-error-page],
+#identity-popup[connection=https-only-error-page] [when-connection~=https-only-error-page],
+/* Show weak cipher messages when needed. */
+#identity-popup[ciphers=weak] [when-ciphers~=weak],
+/* Show mixed content warnings when needed */
+#identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded],
+#identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded],
+#identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked],
+/* Show the right elements when there is mixed passive content loaded and active blocked. */
+#identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded],
+/* HTTPS-Only Mode */
+#identity-popup[httpsonlystatus=exception] [when-httpsonlystatus~=exception],
+#identity-popup[httpsonlystatus=upgraded] [when-httpsonlystatus~=upgraded],
+#identity-popup[httpsonlystatus=failed-top] [when-httpsonlystatus~=failed-top],
+#identity-popup[httpsonlystatus=failed-sub] [when-httpsonlystatus~=failed-sub],
+/* Show 'disable MCB' button always when there is mixed active content blocked. */
+#identity-popup-securityView-extended-info[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] {
+  display: revert;
+}
+
+/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */
+#identity-popup-securityView-extended-info:is([mixedcontent],[ciphers]) > description[when-connection=not-secure],
+/* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */
+#identity-popup-securityView-extended-info[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] {
+  display: none;
+}
+
+/* Make sure hidden elements don't accidentally become visible from one of the
+   above selectors (see Bug 1194258) */
+#identity-popup [hidden] {
+  display: none !important;
+}
+
+#identity-popup-mainView,
+#permission-popup-mainView,
+#protections-popup-mainView {
+  min-width: var(--popup-width);
+  max-width: var(--popup-width);
+}
+
+#protections-popup[toast] #protections-popup-mainView > :not(#protections-popup-mainView-panel-header-section),
+#protections-popup[toast] #protections-popup-mainView-panel-header-section > :not(#protections-popup-mainView-panel-header),
+#protections-popup[toast] #protections-popup-mainView-panel-header > :is(.panel-info-button, #protections-popup-main-header-label) {
+  /* Hide all elements in the panel except for the toast descriptions */
+  display: none;
+}
+
+#protections-popup[toast] #protections-popup-mainView-panel-header {
+  min-height: unset; /* revert panelUI-shared.css */
+}
+
+#identity-popup-security-description > description {
+  font-weight: 600;
+  margin-top: 0.5em;
+}
+
+#identity-popup-security-httpsonlymode {
+  margin-top: 1em;
+}
+
+#identity-popup-security-httpsonlymode-menulist {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 11em;
+  margin: 0.5em 0;
+}
+
+#identity-popup-security-httpsonlymode-info {
+  font-size: 0.85em;
+  color: var(--panel-description-color);
+}
+
+#identity-popup-security-httpsonlymode-info > description {
+  margin-bottom: 0.5em;
+}
+
+#permission-popup-permissions-content {
+  padding-inline: 1.25em;
+  min-width: 0;
+}
+
+/* CONTENT */
+
+:where(#protections-popup, #identity-popup) :is(description, label) {
+  margin: 0;
+}
+
+#protections-popup .panel-header > h1 > span,
+#permission-popup .panel-header > h1 > span,
+#identity-popup .panel-header > h1 > span {
+  /* This is needed for the overflow-wrap to work correctly when the domain name is really long. */
+  max-width: calc(var(--popup-width) - 2 * var(--arrowpanel-menuitem-margin-inline));
+  overflow-wrap: break-word;
+}
+
+#protections-popup .panel-header > h1 > span {
+  /* The protections popup panel header text needs a different calculation because it contains an info button.
+   * icon-full-width and icon-margin are included twice to compensate for the margin-inline-start of the text,
+   * used to center it even if the header includes a info button. See .panel-header-with-info-button */
+  max-width: calc(var(--popup-width)
+                  - var(--arrowpanel-menuitem-margin-inline) * 2
+                  - var(--arrowpanel-header-info-icon-full-width) * 2
+                  - var(--arrowpanel-header-info-icon-margin-inline-end) * 2);
+}
+
+#identity-popup .panel-header > .subviewbutton-back + h1 > span {
+  /* Same idea as above, but in the identity popup when there's a back button. */
+  max-width: calc(var(--popup-width)
+                  - var(--arrowpanel-menuitem-margin-inline) * 2
+                  - var(--arrowpanel-header-back-icon-full-width) * 2);
+}
+
+#protections-popup:not([infoMessageShowing]) #protections-popup-mainView-panel-header-section + toolbarseparator {
+  display: none;
+}
+
+#protections-popup-mainView-panel-header-section {
+  /* Don't display the info message on top of the panel content while it fades in and out */
+  overflow: hidden;
+}
+
+#permission-popup-permissions-content > description,
+#protections-popup-content > description {
+  color: var(--panel-description-color);
+}
+
+/* This element needs the pre-wrap because we add newlines to it in the code. */
+#identity-popup-content-supplemental {
+  white-space: pre-wrap;
+}
+
+/* SECURITY */
+
+#identity-popup[mixedcontent~=active-loaded] .identity-popup-connection-not-secure,
+#identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure {
+  font-weight: bold;
+}
+
+#identity-popup-mainView > .panel-subview-body {
+  padding-bottom: var(--panel-subview-body-padding-block);
+}
+
+#identity-popup-mainView[footerVisible="true"] > .panel-subview-body {
+  padding-bottom: 0;
+}
+
+.identity-popup-section {
+  margin-inline: var(--arrowpanel-menuitem-margin-inline);
+  padding-inline: var(--arrowpanel-menuitem-padding-inline);
+}
+
+.identity-popup-section.indented {
+  /* Align with the text displayed following the lock icon, in the connection status button above.
+     16px is the icon size and 8px is the inline-start padding of the text. */
+  padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + 16px + 8px);
+}
+
+.identity-popup-security-connection {
+  list-style-image: url(chrome://global/skin/icons/security-broken.svg);
+  margin: var(--arrowpanel-menuitem-margin);
+  padding: var(--arrowpanel-menuitem-padding);
+  -moz-context-properties: fill;
+  min-height: 24px;
+}
+
+#identity-popup[connection=chrome] .identity-popup-security-connection {
+  list-style-image: url(chrome://branding/content/icon48.png);
+}
+
+#identity-popup[connection=file] .identity-popup-security-connection {
+  list-style-image: url(chrome://global/skin/icons/page-portrait.svg);
+}
+
+#identity-popup[connection^=secure] .identity-popup-security-connection {
+  list-style-image: url(chrome://global/skin/icons/security.svg);
+}
+
+/* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */
+#identity-popup[ciphers=weak] .identity-popup-security-connection,
+#identity-popup[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-connection {
+  list-style-image: url(chrome://global/skin/icons/security-warning.svg);
+  -moz-context-properties: fill, fill-opacity;
+}
+
+#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection,
+#identity-popup[connection=cert-error-page] .identity-popup-security-connection {
+  list-style-image: url(chrome://global/skin/icons/security-warning.svg);
+  fill: unset;
+}
+
+#identity-popup[connection=net-error-page] .identity-popup-security-connection {
+  list-style-image: url(chrome://global/skin/icons/info.svg);
+  fill: unset;
+}
+
+#identity-popup[mixedcontent~=active-loaded][isbroken] .identity-popup-security-connection {
+  list-style-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
+}
+
+#identity-popup[connection=extension] .identity-popup-security-connection {
+  list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
+}
+
+.identity-popup-security-connection-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.identity-popup-connection-secure.security-view,
+.identity-popup-connection-secure.upgraded,
+.identity-popup-connection-not-secure.security-view {
+  padding-inline-start: 8px;
+}
+
+#identity-popup-securityView-extended-info > button,
+#identity-popup-securityView-extended-info > hbox > .text-link,
+#identity-popup-content-verifier,
+#identity-popup-content-verifier ~ description,
+#identity-popup-content-owner-label {
+  margin-block: 0.5em;
+}
+
+#identity-popup-securityView-extended-info > .identity-popup-warning-box {
+  font-weight: 600;
+}
+
+#identity-popup-securityView-extended-info > button {
+  margin-inline: 0;
+}
+
+@media (-moz-platform: macos) {
+  #identity-popup-securityView-extended-info > button {
+    min-height: 30px;
+  }
+
+  #identity-popup-securityView-extended-info > button:focus-visible {
+    outline: var(--focus-outline);
+  }
+}
+
+/* CONTENT BLOCKING / TRACKING PROTECTION */
+
+#protections-popup-sendReportView-heading,
+#protections-popup-sendReportView-body,
+#protections-popup-siteNotWorkingView-body {
+  padding: var(--vertical-section-padding) var(--horizontal-padding);
+}
+
+.protections-popup-sendReportView-collection-section {
+  margin-bottom: 16px;
+}
+
+#protections-popup-sendReportView-collection-url {
+  appearance: none;
+  border: none;
+  margin: 4px 0;
+}
+
+#protections-popup-sendReportView-collection-comments {
+  height: 120px;
+}
+
+.protections-popup-sendReportView-collection-section label {
+  margin-bottom: 2px;
+}
+
+#protections-popup-sendReportView-report-error {
+  margin-bottom: 24px;
+  color: #d74345;
+}
+
+#protections-popup-not-blocking-section-why:hover,
+#protections-popup-show-report-stack:hover > .protections-popup-footer-button {
+  background-color: var(--panel-item-hover-bgcolor);
+}
+
+#protections-popup-show-report-stack:hover:active > .protections-popup-footer-button {
+  background-color: var(--panel-item-active-bgcolor);
+}
+
+/* This subview could get filled with a lot of trackers, set a maximum size
+ * and allow it to scroll vertically.*/
+#protections-popup-socialblockView,
+#protections-popup-cookiesView,
+#protections-popup-trackersView {
+  max-height: calc(600px + var(--height-offset));
+}
+
+#protections-popup-trackersView-list.empty {
+  -moz-box-align: center;
+  -moz-box-pack: center;
+}
+
+.protections-popup-empty-label {
+  color: var(--panel-description-color);
+}
+
+.protections-popup-trackersView-empty-image {
+  width: 48px;
+  height: 48px;
+  -moz-context-properties: fill;
+  margin-bottom: 16px;
+}
+
+#protections-popup-cookiesView .protections-popup-empty-label {
+  margin-inline-start: 24px;
+  margin-block: 2px 4px;
+}
+
+.protections-popup-cookiesView-list-header {
+  color: var(--panel-description-color);
+  margin: 5px 0;
+}
+
+#protections-popup-cookiesView-list > .protections-popup-cookiesView-list-section:only-of-type > .protections-popup-cookiesView-list-header {
+  display: none;
+}
+
+.protections-popup-list {
+  padding: 5px 16px !important; /* override panelUI-shared.css */
+}
+
+.protections-popup-list-item {
+  display: flex;
+  margin: 5px 0;
+}
+
+.protections-popup-list-host-label {
+  direction: ltr;
+  text-align: match-parent;
+}
+
+/* Special alignment for items which include a state label (e.g. "Allowed") */
+.protections-popup-list-item-with-state > label {
+  margin: auto 0;
+}
+.protections-popup-list-item-with-state {
+  justify-content: space-between;
+}
+
+/* Content Blocking categories */
+
+#protections-popup-no-trackers-found-description {
+  margin: 4.85em 7.25em;
+  font-size: 1.1em;
+  text-align: center;
+  color: var(--panel-description-color);
+}
+
+.protections-popup-section-header {
+  color: var(--panel-description-color);
+}
+
+:root[uidensity="compact"] .protections-popup-section-header {
+  margin-block: 4px;
+}
+
+#tracking-protection-container > tooltip {
+  max-width: var(--popup-width);
+}
+/*
+ * The category list is split into two sections: "Blocking" and "Not Blocking",
+ * with five different category items distributed between them at runtime.
+ * To achieve this, we use a grid layout with 12 rows: one row for each header
+ * label and five rows in each section for the items.
+ * Items with the "blocked" class are assigned rows 2-6, and those without
+ * are assigned rows 8-12, with the headers taking rows 1 and 7.
+ */
+
+#protections-popup-no-trackers-found-description:not([hidden]) ~ #protections-popup-content {
+  display: none;
+}
+
+#protections-popup-not-blocking-section-why {
+  border-radius: 2px;
+}
+
+#protections-popup-not-blocking-section-why:hover {
+  outline: 4px solid var(--panel-item-hover-bgcolor);
+}
+
+.trackers-icon {
+  list-style-image: url(chrome://browser/skin/canvas.svg);
+}
+
+.socialblock-icon {
+  list-style-image: url(chrome://browser/skin/thumb-down.svg);
+}
+
+.thirdpartycookies-icon {
+  list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg);
+}
+
+.cryptominers-icon {
+  list-style-image: url(chrome://browser/skin/controlcenter/cryptominers.svg);
+}
+
+.fingerprinters-icon {
+  list-style-image: url(chrome://browser/skin/fingerprint.svg);
+}
+
+/* PERMISSIONS */
+
+.permission-popup-permission-item {
+  min-height: 24px;
+}
+
+.protections-popup-category[uidisabled] {
+  display: none;
+}
+
+#permission-popup-storage-access-permission-list-header {
+  padding-inline-end: 8px;
+}
+
+.permission-popup-permission-item,
+#permission-popup-storage-access-permission-list-header {
+  margin-block: 0.25em;
+}
+
+#permission-popup-permission-reload-hint,
+#permission-popup-permission-empty-hint {
+  margin-top: 8px;
+}
+
+.permission-popup-permission-list-anchor[anchorfor="3rdPartyStorage"] > vbox:only-child {
+  display: none;
+}
+
+#permission-popup-storage-access-permission-list-hint {
+  margin-top: 0.25em;
+  color: var(--panel-description-color);
+}
+
+#permission-popup-storage-access-permission-list-hint,
+#permission-popup-storage-access-permission-learn-more {
+  /* Matches offset for items - 16px icon + 8px margin */
+  margin-inline-start: calc(16px + 8px);
+}
+
+.permission-popup-permission-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.permission-popup-permission-label,
+.permission-popup-permission-header-label {
+  margin-inline-start: 8px;
+}
+
+.permission-popup-permission-label-subitem {
+  /* Align label with other labels with icon. */
+  /* icon width + icon inline margin + label inline margin */
+  margin-inline-start: calc(16px + 3px + 10px);
+}
+
+.permission-popup-permission-state-label {
+  margin-inline-end: 5px;
+  text-align: end;
+}
+
+.permission-popup-permission-remove-button {
+  appearance: none;
+  margin: 0;
+  margin-inline-start: 2px;
+  border-width: 0;
+  min-width: 0;
+  padding: 2px;
+  padding-inline-end: 6px;
+  background-color: var(--button-bgcolor);
+  color: var(--button-color);
+  border-radius: 4px;
+}
+
+.permission-popup-permission-remove-button > .button-box > .button-icon {
+  margin: 0;
+  width: 12px;
+  height: 12px;
+  list-style-image: url(chrome://global/skin/icons/close.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.permission-popup-permission-remove-button > .button-box > .button-text {
+  display: none;
+}
+
+.permission-popup-permission-remove-button:not(:-moz-focusring):hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+.permission-popup-permission-remove-button:not(:-moz-focusring):hover:active {
+  background-color: var(--button-active-bgcolor)
+}
+
+#protections-popup[hasException] .protections-popup-tp-switch-on-header,
+#protections-popup:not([hasException]) .protections-popup-tp-switch-off-header {
+  display: none;
+}
+
+#protections-popup-cookie-banner-section[hasException] .protections-popup-cookie-banner-switch-on-header,
+#protections-popup-cookie-banner-section:not([hasException]) .protections-popup-cookie-banner-switch-off-header {
+  display: none;
+}
+
+#protections-popup-cookie-banner-section[uiDisabled],
+#protections-popup-cookie-banner-section-separator[uiDisabled]{
+  display: none;
+}
+
+#protections-popup-toast-panel-tp-on-desc,
+#protections-popup-toast-panel-tp-off-desc {
+  display: none;
+}
+
+#protections-popup:not([hasException])[toast] #protections-popup-toast-panel-tp-on-desc,
+#protections-popup[hasException][toast] #protections-popup-toast-panel-tp-off-desc {
+  display: revert;
+}
+
+.protections-popup-tp-switch-label-box,
+.protections-popup-tp-switch-box {
+  min-height: 40px;
+  -moz-box-pack: center;
+}
+
+/* This is needed in order to show a correct height if the 'Site not working?'
+   link is not displaying. */
+.protections-popup-switch-section[short] > .protections-popup-tp-switch-label-box,
+.protections-popup-switch-section[short] > .protections-popup-tp-switch-box {
+  min-height: 30px;
+}
+
+.protections-popup-switch-header {
+  font-weight: 600;
+}
+
+.protections-popup-tp-switch {
+  appearance: none;
+  box-sizing: border-box;
+  min-width: 30px;
+  border-radius: 10px;
+  background-color: var(--button-bgcolor);
+  border: 1px solid hsla(210,4%,10%,.14);
+  margin-block: 4px;
+  margin-inline-start: 1px;
+  padding: 2px;
+  padding-inline-end: 0;
+  transition: padding .2s ease;
+}
+
+.protections-popup-tp-switch::before {
+  position: relative;
+  display: block;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+  background: white;
+  outline: 1px solid var(--panel-separator-color);
+}
+
+.protections-popup-tp-switch[enabled] {
+  background-color: var(--button-primary-bgcolor);
+  border-color: var(--button-primary-hover-bgcolor);
+  /* Push the toggle to the right. */
+  padding-inline-start: 16px;
+}
+
+.protections-popup-tp-switch[enabled]:hover {
+  background-color: var(--button-primary-hover-bgcolor);
+  border-color: var(--button-primary-active-bgcolor);
+}
+
+.protections-popup-tp-switch[enabled]:hover:active {
+  background-color: var(--button-primary-active-bgcolor);
+  border-color: var(--button-primary-active-bgcolor);
+}
+
+.protections-popup-tp-switch:not([enabled]):hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+.protections-popup-tp-switch:not([enabled]):hover:active {
+  background-color: var(--button-active-bgcolor);
+}
+
+#protections-popup-siteNotWorkingView-body-issue-list {
+  padding-inline-start: 1em;
+}
+
+/* Protection popup footer categories */
+
+#protections-popup-trackers-blocked-counter-box {
+  margin: var(--arrowpanel-menuitem-margin);
+  padding: var(--arrowpanel-menuitem-padding);
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 200ms linear;
+  justify-self: end;
+}
+
+#protections-popup-trackers-blocked-counter-box[showing] {
+  visibility: visible;
+  opacity: 1;
+}
+
+#protections-popup-trackers-blocked-counter-description,
+#protections-popup-footer-protection-type-label {
+  color: var(--panel-description-color);
+}
+
+.protections-popup-description > description {
+  margin: 10px 16px;
+}
+
+#protections-popup:not([milestone]) #protections-popup-milestones,
+#protections-popup:not([milestone]) #protections-popup-milestones-separator {
+  display: none;
+}
+
+#protections-popup-milestones-content {
+  background-color: var(--panel-banner-item-background-color);
+}
+
+/* The padding-block for menuitems is set to 0 in compact mode which, with the
+ * shield icon being bigger than a usual menuitem, makes the item look crowded
+ * even for compact mode. */
+:root[uidensity="compact"] #protections-popup-milestones-content {
+  padding-block: 4px;
+}
+
+#protections-popup-milestones-content:hover {
+  background-color: var(--panel-banner-item-hover-bgcolor);
+}
+
+#protections-popup-milestones-content:hover:active {
+  background-color: var(--panel-banner-item-active-bgcolor);
+}
+
+#protections-popup-milestones-text {
+  font-weight: 600;
+}
+
+#protections-popup-milestones-illustration {
+  list-style-image: url(chrome://browser/skin/controlcenter/etp-milestone.svg);
+  -moz-context-properties: fill, stroke;
+  margin-inline-start: var(--horizontal-padding);
+  margin-inline-end: 4px;
+  height: 40px;
+  width: 32px;
+}
+
+#protections-popup[milestone] #protections-popup-milestones-illustration {
+  fill: #45278d;
+  stroke: #321c64;
+}
+
+#protections-popup[milestone="5000"] #protections-popup-milestones-illustration {
+  fill: #5a29cb;
+  stroke: #45278d;
+}
+
+#protections-popup[milestone="10000"] #protections-popup-milestones-illustration {
+  fill: #7641e5;
+  stroke: #5a29cb;
+}
+
+#protections-popup[milestone="25000"] #protections-popup-milestones-illustration {
+  fill: #e31587;
+  stroke: #c60084;
+}
+
+#protections-popup[milestone="50000"] #protections-popup-milestones-illustration {
+  fill: #ff298a;
+  stroke: #e31587;
+}
+
+#protections-popup[milestone="100000"] #protections-popup-milestones-illustration {
+  fill: #ffa436;
+  stroke: #e27f2e;
+}
+
+#protections-popup[milestone="500000"] #protections-popup-milestones-illustration {
+  fill: #ffd567;
+  stroke: #ffbd4f;
+}
+
+#protections-popup-tp-switch-breakage-link,
+#protections-popup-tp-switch-breakage-fixed-link {
+  text-decoration: underline;
+}
+
+.permission-popup-section {
+  padding-bottom: 12px;
+}
+
+#permission-popup-menulist {
+  padding-inline: 12px 6px;
+}
+
+.protections-popup-section-header,
+.protections-popup-switch-section,
+#protections-popup-siteNotWorkingView-header {
+  padding: var(--arrowpanel-menuitem-padding);
+  margin: var(--arrowpanel-menuitem-margin);
+}
+
+.identity-popup-expander:focus-visible,
+.permission-popup-permission-remove-button:focus-visible {
+  outline: var(--focus-outline);
+}
+
+@media (-moz-platform: linux) {
+  .identity-popup-expander > .button-box,
+  .permission-popup-permission-remove-button > .button-box {
+    appearance: none;
+  }
+}
+
+.protections-popup-tp-switch:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+#blocked-popup-indicator-item,
+#geo-access-indicator-item {
+  margin-top: -2px;
+  margin-inline-start: 16px;
+}
+
+#geo-access-indicator-item {
+  font-size: 0.8em;
+  color: var(--panel-description-color);
+}
+
+/** Shim-allow warning and indicator icons **/
+
+.protections-popup-shim-allow-hint {
+  padding: 0 2em;
+  margin-block-end: 10px;
+}
+
+.protections-popup-shim-allow-hint-icon,
+.protections-popup-list-host-shim-allow-indicator {
+  -moz-context-properties: fill;
+  background-image: url("chrome://global/skin/icons/info-filled.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+
+  fill: #0090ED;
+}
+
+.protections-popup-shim-allow-hint-icon {
+  width: 24px;
+  height: 24px;
+
+  background-size: contain;
+  margin-inline-end: 0.5em;
+}
+
+.protections-popup-list-host-shim-allow-indicator {
+  width: 16px;
+}
+
+:root[lwt-popup-brighttext] .protections-popup-shim-allow-hint-icon,
+:root[lwt-popup-brighttext] .protections-popup-list-host-shim-allow-indicator {
+  fill: #80EBFF;
+}
+
+.protections-popup-shim-allow-hint-icon {
+  margin-inline-end: 0.5em;
+}
+
+.protections-popup-list-host-shim-allow-indicator {
+  margin-inline-start: 0.5em;
+  min-width: 16px;
+}
diff --git a/browser/themes/shared/controlcenter/tracking-protection.svg b/browser/themes/shared/controlcenter/tracking-protection.svg
new file mode 100644
index 0000000000..341e44fa6d
--- /dev/null
+++ b/browser/themes/shared/controlcenter/tracking-protection.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M10 20c-.466 0-.934-.115-1.354-.332-2.15-1.121-4.122-2.933-5.552-5.102-.709-1.073-1.206-2.368-1.478-3.85L.909 6.872a3.058 3.058 0 0 1 1.554-3.247L8.565.363a3.029 3.029 0 0 1 2.867-.004l6.102 3.323a3.05 3.05 0 0 1 1.557 3.254l-.705 3.792c-.271 1.473-.769 2.762-1.475 3.832-1.429 2.169-3.401 3.982-5.555 5.106A2.94 2.94 0 0 1 10 20zM9.515 1.556 2.845 5.13l-.507 1.238.754 4.077c.235 1.282.658 2.391 1.255 3.295 1.292 1.96 3.065 3.592 4.992 4.597l1.324 0c1.93-1.008 3.704-2.643 4.995-4.602.595-.902 1.017-2.006 1.252-3.28l.753-4.087-.61-1.239-6.559-3.572-.979 0z"/>
+</svg>
diff --git a/browser/themes/shared/ctrlTab.css b/browser/themes/shared/ctrlTab.css
new file mode 100644
index 0000000000..0f78e09a52
--- /dev/null
+++ b/browser/themes/shared/ctrlTab.css
@@ -0,0 +1,123 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* Ctrl-Tab */
+
+#ctrlTab-panel {
+  appearance: none;
+  --panel-background: hsla(0,0%,40%,.85);
+  --panel-color: white;
+  --panel-border-color: transparent;
+  --panel-padding: 20px 10px 10px;
+}
+
+@media (-moz-platform: macos) {
+  #ctrlTab-panel {
+    -moz-window-shadow: none;
+  }
+}
+
+@media not (-moz-platform: macos) {
+  #ctrlTab-panel {
+    font-weight: bold;
+  }
+}
+
+.ctrlTab-preview,
+#ctrlTab-showAll {
+  appearance: none;
+  color: inherit;
+  /* remove the :-moz-focusring outline from button.css on Windows */
+  outline: none !important;
+  margin: 0;
+  text-shadow: 0 0 1px hsl(0,0%,12%), 0 0 2px hsl(0,0%,12%);
+  border: none;
+  background-color: transparent;
+}
+
+.ctrlTab-preview > .button-box {
+  display: none;
+}
+
+.ctrlTab-canvas > html|img,
+.ctrlTab-canvas > html|canvas {
+  min-width: inherit;
+  max-width: inherit;
+  min-height: inherit;
+  max-height: inherit;
+}
+
+.ctrlTab-favicon-container {
+  position: relative;
+  -moz-box-pack: end;
+}
+
+.ctrlTab-favicon[src] {
+  width: 42px;
+  height: 42px;
+  margin-top: -44px;
+  margin-bottom: 2px;
+  margin-inline-end: -6px;
+  padding: 5px;
+  background-color: #F9F9FA;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
+}
+
+.ctrlTab-canvas {
+  color-scheme: light;
+  background-color: Canvas;
+  color: CanvasText;
+  box-shadow: 1px 1px 2px hsl(0,0%,12%);
+  margin-bottom: 8px;
+}
+
+@media (-moz-content-prefers-color-scheme: dark) {
+  .ctrlTab-canvas {
+    /* Make the blank canvas match the default content background. */
+    color-scheme: dark;
+  }
+}
+
+.ctrlTab-preview:not([hidden]) .ctrlTab-canvas:empty::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: url("chrome://global/skin/icons/defaultFavicon.svg") center/20% no-repeat;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  filter: drop-shadow(0 0 2px hsla(0,0%,0%,0.5));
+}
+
+.ctrlTab-preview-inner,
+#ctrlTab-showAll {
+  padding: 8px;
+  border: 2px solid transparent;
+  border-radius: .5em;
+}
+
+.ctrlTab-preview-inner {
+  margin-top: -10px;
+}
+
+#ctrlTab-showAll {
+  background-color: rgba(255,255,255,.2);
+  margin-top: .5em;
+}
+
+.ctrlTab-preview:focus > .ctrlTab-preview-inner,
+#ctrlTab-showAll:focus {
+  background-color: rgba(0,0,0,.75);
+  text-shadow: none;
+  border-color: #45a1ff;
+}
+
+.ctrlTab-label {
+  -moz-box-flex: 1;
+  -moz-box-pack: center;
+  contain: inline-size;
+}
diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css
new file mode 100644
index 0000000000..60248d811c
--- /dev/null
+++ b/browser/themes/shared/customizableui/customizeMode.css
@@ -0,0 +1,631 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* Customization mode */
+
+:root {
+  --drag-drop-transition-duration: .3s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --drag-drop-transition-duration: 0s;
+  }
+}
+
+:root[customizing] .customization-target:not(#widget-overflow-fixed-list) {
+  min-width: 100px;
+}
+
+#customization-container {
+  background-color: var(--toolbar-non-lwt-bgcolor);
+  color: var(--toolbar-color);
+}
+
+#customization-container:-moz-lwtheme {
+  /* Ensure this displays on top of the non-lwt bgcolor, to make sure it's not
+   * semi-transparent */
+  background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
+}
+
+:root[lwtheme-image] #customization-container {
+  background-image: none;
+  color: var(--toolbar-non-lwt-textcolor);
+  text-shadow: none;
+}
+
+:root[lwtheme-image] #customization-palette .toolbarbutton-1 {
+  fill: currentColor;
+}
+
+#customization-palette {
+  padding: 5px 20px 20px;
+}
+
+#customization-header {
+  font-weight: 600;
+  font-size: 1.2em;
+  margin: 20px 20px 15px;
+}
+
+#customization-panel-container {
+  --customization-panel-padding: 20px;
+  padding: 0 var(--customization-panel-padding) 25px;
+}
+
+#customization-footer {
+  border-top: 1px solid rgba(0,0,0,.15);
+  padding: 10px;
+}
+
+@media (-moz-platform: macos),
+  (-moz-platform: windows) {
+  @media not (prefers-contrast) {
+    .customizationmode-button {
+      border: 1px solid #b1b1b1;
+      border-radius: 2px;
+      background-color: #fcfcfd;
+      appearance: none;
+    }
+
+    .customizationmode-checkbox,
+    .customizationmode-button {
+      margin: 6px 10px;
+      padding: 2px 5px;
+    }
+
+    .customizationmode-checkbox:not(:-moz-lwtheme, [disabled]),
+    .customizationmode-button {
+      color: rgb(71, 71, 71);
+    }
+
+    .customizationmode-checkbox[disabled]:-moz-lwtheme {
+      color: inherit;
+      opacity: 0.4;
+    }
+
+    #customization-reset-button,
+    #customization-undo-reset-button,
+    #customization-done-button {
+      min-width: 10em;
+    }
+
+    #customization-done-button {
+      color: #fff !important;
+      font-weight: 700;
+      border-color: #0060df;
+      background-color: #0a84ff;
+    }
+
+    .customizationmode-button > .box-inherit {
+      border-width: 0;
+      padding: 3px 0;
+    }
+
+    /* We use a smaller padding to ensure images don't have padding.
+     * We can't detect whether a button has an image. This button doesn't
+     * so it needs more padding, so we unfortunately hardcode the extra
+     * padding in here:
+     */
+    #customization-toolbar-visibility-button {
+      padding-inline-start: 8px;
+    }
+
+    .customizationmode-button[type=menu] > .box-inherit > .box-inherit > .button-text {
+      padding-inline-end: 10px;
+    }
+
+    .customizationmode-button > .button-icon {
+      margin-inline-start: 0;
+    }
+
+    .customizationmode-button:not([type=menu]) > .button-text {
+      margin-inline-end: 0;
+    }
+
+    .customizationmode-button > .box-inherit > .button-menu-dropmarker {
+      margin-inline-end: 0;
+      padding-inline-end: 0;
+      list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
+    }
+
+    .customizationmode-button:is(:active,:hover):not([disabled]),
+    .customizationmode-button[open],
+    .customizationmode-button[checked] {
+      background-color: #e1e1e5;
+    }
+
+    #customization-done-button:is(:active,:hover):not([disabled]) {
+      background-color: #0060df;
+    }
+
+    .customizationmode-button[disabled="true"] {
+      opacity: .5;
+    }
+  }
+}
+
+#customization-lwtheme-link {
+  display: flex;
+  align-items: center;
+}
+
+#widget-overflow-fixed-list > toolbarpaletteitem:not([notransition])[place="panel"],
+toolbarpaletteitem:not([notransition])[place="toolbar"] {
+  transition: border-width var(--drag-drop-transition-duration) ease-in-out;
+}
+
+toolbarpaletteitem[mousedown] {
+  cursor: -moz-grabbing;
+}
+
+toolbarpaletteitem:not([notransition])[place="palette"],
+toolbarpaletteitem:not([notransition])[place="panel"] {
+  transition: transform var(--drag-drop-transition-duration) ease-in-out;
+}
+
+#customization-palette {
+  transition: opacity .3s ease-in-out;
+  opacity: 0;
+}
+
+#customization-palette[showing="true"] {
+  opacity: 1;
+}
+
+#customization-palette #firefox-view-button[attention] {
+  background-position: center bottom 8%;
+}
+
+toolbarpaletteitem toolbarbutton[disabled] {
+  color: inherit !important;
+}
+
+#PersonalToolbar toolbarpaletteitem toolbarbutton[checked="true"],
+toolbar toolbarpaletteitem toolbarbutton[checked="true"]
+  > :where(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
+  background-color: revert !important;
+}
+
+toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
+toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
+toolbarpaletteitem > #search-container,
+toolbarpaletteitem > toolbaritem.toolbaritem-combined-buttons {
+  transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
+}
+
+toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
+toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  transform: scale(1.3);
+}
+
+toolbarpaletteitem[mousedown] > #search-container,
+toolbarpaletteitem[mousedown] > toolbaritem.toolbaritem-combined-buttons {
+  transform: scale(1.1);
+}
+
+toolbarpaletteitem[mousedown] > #search-container > #searchbar,
+toolbarpaletteitem[mousedown] > #urlbar-container > #urlbar > #urlbar-background
+{
+  outline: 1px solid color-mix(in srgb, currentColor 60%, transparent);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13);
+}
+
+/* Override the toolkit styling for items being dragged over. */
+toolbarpaletteitem[place="toolbar"] {
+  border-inline-width: 0;
+  margin-inline: 0;
+}
+#widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] {
+  border-block: 0 solid transparent;
+}
+
+#customization-palette:not([hidden]) {
+  margin-bottom: 20px;
+}
+
+
+toolbarpaletteitem[place="palette"]:-moz-focusring,
+toolbarpaletteitem[place="panel"]:-moz-focusring,
+toolbarpaletteitem[place="toolbar"]:-moz-focusring {
+  outline-width: 0;
+}
+
+toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
+toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
+toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
+  /* Delay adding the focusring back until after the transform transition completes. */
+  transition: outline-width .01s linear var(--drag-drop-transition-duration);
+  outline: var(--default-focusring);
+}
+
+toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
+  outline-offset: calc(-1 * var(--default-focusring-width) - 4px);
+}
+
+toolbarpaletteitem[place=palette]::after {
+  content: attr(title);
+  display: block;
+  text-align: center;
+}
+
+toolbarpaletteitem[place=palette] > toolbarspring {
+  width: 7em;
+  min-width: 7em;
+  outline: 1px solid;
+  outline-offset: -8px;
+  opacity: .6;
+  min-height: 37px;
+  max-height: 37px;
+}
+
+toolbarpaletteitem[place=toolbar] > toolbarspring {
+  outline: 1px solid;
+  outline-offset: -2px;
+  opacity: .6;
+  margin-block: 5px;
+}
+
+toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox {
+  visibility: hidden; /* Hide searchbar placeholder text in customize mode */
+}
+
+#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
+  opacity: 1; /* To ensure these buttons always look enabled in customize mode */
+}
+
+#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
+#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
+  display: none;
+}
+
+/* Squeeze together the multi-button toolbarpaletteitems: */
+#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-out-button,
+#wrapper-edit-controls[place="palette"] > #edit-controls > #cut-button,
+#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-button {
+  -moz-box-align: end;
+}
+#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-in-button,
+#wrapper-edit-controls[place="palette"] > #edit-controls > #paste-button,
+#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-dropmarker {
+  -moz-box-align: start;
+}
+#wrapper-edit-controls[place="palette"] > #edit-controls > #copy-button {
+  -moz-box-flex: 0;
+}
+
+#customization-uidensity-touch-spacer {
+  border-top: 1px solid var(--panel-separator-color);
+  margin: 6px calc(-1 * var(--arrowpanel-padding)) 9px;
+}
+
+#customization-uidensity-autotouchmode-checkbox {
+  margin-bottom: var(--arrowpanel-padding);
+}
+
+#customization-uidensity-menu {
+  font: menu;
+  margin-inline: 0;
+
+  /* Make the panel padding uniform across all platforms due to the
+     styling of the section headers and footer. */
+  --arrowpanel-padding: 8px;
+}
+
+.customization-uidensity-menuitem > .menu-iconic-left > .menu-iconic-icon {
+  width: 32px;
+  height: 32px;
+  margin: 5px;
+}
+
+.customization-uidensity-menuitem {
+  appearance: none;
+  color: inherit;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding-block: 0;
+  padding-inline: 0 5px;
+  margin: 2px 0;
+}
+
+#customization-uidensity-menuitem-normal {
+  list-style-image: url("chrome://browser/skin/customizableui/density-normal.svg");
+}
+
+#customization-uidensity-menuitem-compact {
+  list-style-image: url("chrome://browser/skin/customizableui/density-compact.svg");
+}
+
+#customization-uidensity-menuitem-touch {
+  list-style-image: url("chrome://browser/skin/customizableui/density-touch.svg");
+}
+
+.customization-uidensity-menuitem:is(:hover, :focus-visible) {
+  background-color: var(--button-hover-bgcolor);
+}
+
+.customization-uidensity-menuitem:is(:hover:active, [active="true"]) {
+  background-color: var(--button-active-bgcolor);
+}
+
+.customization-uidensity-menuitem > .menu-iconic-text {
+  text-align: start;
+}
+
+.customization-uidensity-menuitem > .menu-iconic-left > .menu-iconic-icon:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+#customization-uidensity-button > .box-inherit > .box-inherit > .button-icon:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+#customization-panelWrapper > .panel-arrowcontent {
+  color: var(--arrowpanel-color);
+  background: var(--arrowpanel-background);
+  background-clip: padding-box;
+  max-width: 29em;
+}
+
+@media (-moz-platform: macos) {
+  #customization-panelWrapper > .panel-arrowcontent {
+    /* Native styling adds more 'oompf' to the popup box-shadow, so simulate that
+     * as best as we can here: */
+    box-shadow: 0 0 1px hsla(0,0%,0%,.3), 0 4px 10px hsla(0,0%,0%,.3);
+    appearance: none;
+    border-radius: var(--arrowpanel-border-radius);
+  }
+}
+
+@media not (-moz-platform: macos) {
+  #customization-panelWrapper > .panel-arrowcontent {
+    border: 1px solid var(--arrowpanel-border-color);
+    margin: 0;
+    box-shadow: 0 0 4px hsla(0,0%,0%,.2);
+  }
+}
+
+#customization-panelWrapper > .panel-arrowbox {
+  display: block;
+  position: relative;
+  height: 10px;
+  margin-bottom: -1px;
+}
+
+/* In customize mode, the overflow button should look both 'disabled' and 'open'.
+ * So we make the button fully opaque but fill the icon semi-transparent. */
+#nav-bar[customizing] > .overflow-button > .toolbarbutton-icon {
+  background-color: var(--toolbarbutton-active-background);
+  opacity: 1;
+  fill-opacity: 0.4;
+}
+
+#customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
+  -moz-context-properties: fill, stroke;
+  fill: var(--arrowpanel-background);
+  stroke: var(--arrowpanel-border-color);
+  /* JS code sets --panel-arrow-offset to the distance between the middle of the
+   * overflow button and the end of the window. We subtract the padding of our
+   * container (#customization-panel-container) and half our own width:
+   */
+  margin-inline-end: calc(var(--panel-arrow-offset) - var(--customization-panel-padding) - 10px);
+  vertical-align: top;
+}
+
+@media (-moz-platform: macos) {
+  #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
+    /* The OS X image is 2px narrower than the windows/linux one.
+     * Add padding to compensate: */
+    padding: 0 1px;
+    /* specify width for hidpi image to fit correctly */
+    width: 20px;
+  }
+}
+
+#customization-panelDescription {
+  font-size: 1.1em;
+  padding: 2px 12px 10px;
+  margin: 0;
+}
+
+#customization-panelHeader {
+  font-size: 1.3em;
+  font-weight: 600;
+  padding: 2px 12px;
+  margin: 0;
+}
+
+#customization-panelHolder > #widget-overflow-fixed-list {
+  padding-top: 10px;
+}
+
+/**
+ * We create a ::before pseudoelement that contains a background image to show the
+ * drop dragon. This element fades in and out depending on whether the containing
+ * panel list is empty and unhovered, or not.
+ */
+#customization-panelHolder > #widget-overflow-fixed-list:not(:empty) {
+  padding-bottom: 50px; /* Make sure there's always space to drop stuff. */
+  border-top: 1px solid var(--panel-separator-color);
+}
+
+#customization-panelHolder > #widget-overflow-fixed-list::before {
+  display: block;
+  content: "";
+  background-image: url("chrome://browser/skin/customizableui/empty-overflow-panel.png");
+  background-position: center bottom 10px;
+  background-size: 218px 134px;
+  background-repeat: no-repeat;
+  opacity: 0;
+  transition: opacity 300ms ease-out;
+  padding-bottom: 154px; /* 154 = 134 for the image, 10px space on either side. */
+  margin-bottom: -154px; /* don't affect positioning of the actual contents */
+  pointer-events: none;
+}
+
+@media (min-resolution: 1.1dppx) {
+  #customization-panelHolder > #widget-overflow-fixed-list::before {
+    background-image: url("chrome://browser/skin/customizableui/empty-overflow-panel@2x.png");
+  }
+}
+
+#customization-panelHolder > #widget-overflow-fixed-list:empty::before {
+  opacity: 1;
+}
+#customization-panelHolder > #widget-overflow-fixed-list[draggingover]:empty::before {
+  opacity: 0;
+}
+
+#downloads-button-autohide-panel {
+  --arrowpanel-padding: 5px 12px;
+}
+
+#downloads-button-autohide-checkbox {
+  margin: 0;
+  padding: 0;
+}
+
+#whimsy-button {
+  /* Don't need HiDPI versions since the size used will be scaled down to 20x20. */
+  list-style-image: url("chrome://browser/skin/customizableui/whimsy.png");
+}
+
+#whimsy-button > .button-box > .button-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#customization-palette[whimsypong] {
+  /* Keep the palette in the render tree but invisible
+     so -moz-element() will work. */
+  padding: 0;
+  min-height: 0;
+  max-height: 0;
+}
+
+#customization-palette[whimsypong] > toolbarpaletteitem > toolbarspring {
+  margin: 0 -7px;
+}
+
+@media (-moz-platform: linux) {
+  #customization-palette[whimsypong] > toolbarpaletteitem[id^="wrapper-customizableui-special-spring"] {
+    font-size: 12px;
+  }
+}
+
+#wp-lives,
+#wp-ball {
+  /* Don't need HiDPI versions since the size used will be scaled down to 20x20. */
+  background-image: url("chrome://browser/skin/customizableui/whimsy.png");
+  background-size: contain;
+  width: 20px;
+}
+
+#customization-pong-arena {
+  width: 300px;
+  height: 300px;
+  border-inline: 1px solid currentColor;
+  margin: 16px auto 0;
+  box-sizing: content-box;
+}
+
+#customization-palette[whimsypong] > toolbarpaletteitem[kcode],
+#customization-pong-arena[kcode] {
+  animation-name: kcode;
+  animation-timing-function: steps(5);
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+}
+
+#wp-ball {
+  margin-inline-start: -10px;
+  margin-top: -10px;
+  height: 20px;
+}
+
+#wp-player1,
+#wp-player2 {
+  width: 84px;
+  height: calc(39px + 3em);
+}
+
+#wp-player1,
+#wp-player2,
+#wp-ball,
+#wp-score {
+  display: block;
+  position: fixed;
+}
+
+#wp-score {
+  transform: translateX(-4ch);
+}
+
+#wp-score:-moz-locale-dir(rtl) {
+  transform: translateX(4ch);
+}
+
+#wp-lives {
+  transform: translate(-4ch, 1ch);
+}
+
+#wp-lives:-moz-locale-dir(rtl) {
+  transform: translate(4ch, 1ch);
+}
+
+#wp-lives[lives="5"] {
+  height: 100px;
+}
+
+#wp-lives[lives="4"] {
+  height: 80px;
+}
+
+#wp-lives[lives="3"] {
+  height: 60px;
+}
+
+#wp-lives[lives="2"] {
+  height: 40px;
+}
+
+#wp-lives[lives="1"] {
+  height: 20px;
+}
+
+#customization-pong-arena[lives="0"] > #wp-ball {
+  animation: game-over 4s forwards ease;
+}
+
+@keyframes game-over {
+  0% {
+    transform: scale(1) translateY(0) rotateZ(0);
+    opacity: 1;
+  }
+  15% {
+    transform: scale(2) translateY(-10px) rotateZ(-90deg);
+  }
+  35% {
+    opacity: 1;
+  }
+  65% {
+    opacity: 0;
+  }
+  100% {
+    transform: scale(2) translateY(300px) rotateZ(-2.5turn);
+    opacity: 0;
+  }
+}
+
+@keyframes kcode {
+  0% { border-color: rgb(195,17,206); color: rgb(195,17,206); }
+  20% { border-color: rgb(252,82,27); color: rgb(252,82,27); }
+  40% { border-color: rgb(251,179,0); color: rgb(251,179,0); }
+  60% { border-color: rgb(105,211,0); color: rgb(105,211,0); }
+  80% { border-color: rgb(20,155,249); color: rgb(20,155,249); }
+  100% { border-color: rgb(195,17,206); color: rgb(195,17,206); }
+}
diff --git a/browser/themes/shared/customizableui/density-compact.svg b/browser/themes/shared/customizableui/density-compact.svg
new file mode 100644
index 0000000000..8d6bf1e7cd
--- /dev/null
+++ b/browser/themes/shared/customizableui/density-compact.svg
@@ -0,0 +1,21 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="#fff"/>
+  <path d="M3 1h26c1.1 0 2 .479 2 1.071V14H1V2.071C1 1.479 1.9 1 3 1z" fill="#f9f9fa"/>
+  <path d="M1 13.5h30" fill="none" stroke="#adadb3"/>
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="none" stroke="#adadb3" stroke-width="2"/>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M3.5 7.5h6"/>
+    <path stroke-linejoin="round" d="M6.5 4.5l-3 3 3 3"/>
+  </g>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M18.5 7.5h-6"/>
+    <path stroke-linejoin="round" d="M15.5 4.5l3 3-3 3"/>
+  </g>
+  <g opacity=".8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M28.5 4.5v2h-2"/>
+    <path d="M27.623 9.614a3.03 3.03 0 1 1 .636-3.324"/>
+  </g>
+</svg>
diff --git a/browser/themes/shared/customizableui/density-normal.svg b/browser/themes/shared/customizableui/density-normal.svg
new file mode 100644
index 0000000000..8298a571be
--- /dev/null
+++ b/browser/themes/shared/customizableui/density-normal.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 xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="#fff"/>
+  <path d="M3 1h26c1.1 0 2 .627 2 1.4V18H1V2.4C1 1.627 1.9 1 3 1z" fill="#f9f9fa"/>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M25.5 9.5h-6"/>
+    <path stroke-linejoin="round" d="M22.5 6.5l3 3-3 3"/>
+  </g>
+  <path d="M2 17.5h29" fill="none" stroke="#adadb3"/>
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="none" stroke="#adadb3" stroke-width="2"/>
+  <circle cx="9.5" cy="9.5" r="6" fill="#fff" stroke="#adadb3"/>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M6.5 9.5h6"/>
+    <path stroke-linejoin="round" d="M9.5 6.5l-3 3 3 3"/>
+  </g>
+</svg>
diff --git a/browser/themes/shared/customizableui/density-touch.svg b/browser/themes/shared/customizableui/density-touch.svg
new file mode 100644
index 0000000000..62963a5b0e
--- /dev/null
+++ b/browser/themes/shared/customizableui/density-touch.svg
@@ -0,0 +1,14 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="#fff"/>
+  <path d="M2.942 1.073l26-.145a1.88 1.88 0 0 1 2.01 1.718l.108 19.27-30 .168L.951 2.813a1.88 1.88 0 0 1 1.991-1.74z" fill="#f9f9fa"/>
+  <path d="M1 21.5h30" fill="none" stroke="#adadb3"/>
+  <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="none" stroke="#adadb3" stroke-width="2"/>
+  <circle cx="15.5" cy="11.5" r="8" fill="#fff" stroke="#adadb3"/>
+  <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round">
+    <path d="M12.5 11.5h6"/>
+    <path stroke-linejoin="round" d="M15.5 8.5l-3 3 3 3"/>
+  </g>
+</svg>
diff --git a/browser/themes/shared/customizableui/empty-overflow-panel.png b/browser/themes/shared/customizableui/empty-overflow-panel.png
new file mode 100644
index 0000000000..6bad10f5c2
--- /dev/null
+++ b/browser/themes/shared/customizableui/empty-overflow-panel.png
diff --git a/browser/themes/shared/customizableui/empty-overflow-panel@2x.png b/browser/themes/shared/customizableui/empty-overflow-panel@2x.png
new file mode 100644
index 0000000000..f2c7e5a418
--- /dev/null
+++ b/browser/themes/shared/customizableui/empty-overflow-panel@2x.png
diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css
new file mode 100644
index 0000000000..055a0e5a7e
--- /dev/null
+++ b/browser/themes/shared/customizableui/panelUI-shared.css
@@ -0,0 +1,2033 @@
+/* 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/. */
+
+:root {
+  --panel-item-hover-bgcolor: var(--button-hover-bgcolor);
+  --panel-item-active-bgcolor: var(--button-active-bgcolor);
+  --panel-banner-item-color: var(--button-color);
+  --panel-banner-item-background-color: var(--button-bgcolor);
+  --panel-banner-item-hover-bgcolor: var(--button-hover-bgcolor);
+  --panel-banner-item-active-bgcolor: var(--button-active-bgcolor);
+  --panel-banner-item-update-supported-bgcolor: #2AC3A2;
+  --panel-banner-item-info-icon-bgcolor: #0090ED;
+
+  --menu-panel-width: 22.35em;
+  --menu-panel-width-wide: 29em;
+
+  --arrowpanel-menuitem-margin-block: 0;
+  --arrowpanel-menuitem-margin-inline: 8px;
+  --arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) var(--arrowpanel-menuitem-margin-inline);
+  --arrowpanel-menuitem-padding-block: 8px;
+  --arrowpanel-menuitem-padding-inline: 8px;
+  --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
+  --arrowpanel-menuitem-border-radius: 4px;
+  --arrowpanel-header-back-icon-padding: 8px;
+  --arrowpanel-header-back-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-back-icon-padding)));
+  --arrowpanel-header-info-icon-padding: 4px;
+  --arrowpanel-header-info-icon-margin-inline-end: 4px;
+  --arrowpanel-header-info-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-info-icon-padding)));
+  --arrowpanel-header-height: calc(16px + (var(--arrowpanel-header-back-icon-padding) * 2) + (var(--panel-separator-margin-horizontal) * 2));
+  --panel-separator-margin-vertical: 4px;
+  --panel-separator-margin-horizontal: 8px;
+  --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal);
+  --panel-subview-body-padding-block: 8px;
+  --panel-subview-body-padding-inline: 0;
+  --panel-subview-body-padding: var(--panel-subview-body-padding-block) var(--panel-subview-body-padding-inline);
+
+  --panel-and-palette-icon-size: 16px;
+}
+
+:root:not(:-moz-lwtheme) {
+  --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
+}
+
+:root[uidensity=compact] {
+  --arrowpanel-menuitem-margin-inline: 4px;
+  --arrowpanel-menuitem-padding-block: 0px;
+  --arrowpanel-header-back-icon-padding: 4px;
+  --arrowpanel-header-info-icon-margin-inline-end: 0px;
+  --panel-separator-margin-horizontal: 4px;
+  --panel-subview-body-padding-block: 4px;
+}
+
+#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  display: -moz-box;
+  height: 10px;
+  width: 10px;
+  background-size: contain;
+  border: none;
+}
+
+#PanelUI-menu-button[badge-status="extension-new-tab"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  display: none;
+}
+
+#PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  box-shadow: none;
+  /* "!important" is necessary to override the rule in toolbarbutton.css */
+  margin: -5px 0 0 !important;
+  margin-inline-end: -3px !important;
+  min-width: 12px;
+  min-height: 12px;
+  -moz-context-properties: fill;
+  background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center;
+  background-size: 12px;
+}
+
+#PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  fill: var(--panel-banner-item-update-supported-bgcolor);
+}
+
+#PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center;
+  fill: var(--warning-icon-bgcolor);
+}
+
+.panel-banner-item[notificationid="update-available"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-downloading"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-manual"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-other-instance"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-restart"] > .toolbarbutton-icon {
+  background-image: url(chrome://browser/skin/update-badge.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  -moz-context-properties: fill;
+  fill: var(--panel-banner-item-update-supported-bgcolor);
+}
+
+.panel-banner-item[notificationid="update-unsupported"] > .toolbarbutton-icon {
+  background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
+  -moz-context-properties: stroke, fill;
+  stroke: var(--arrowpanel-background);
+  fill: var(--warning-icon-bgcolor);
+}
+
+#PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  height: 13px;
+  background: url(chrome://global/skin/icons/warning-fill-12.svg) center / contain no-repeat transparent;
+  box-shadow: none;
+  border-radius: 0;
+  -moz-context-properties: fill;
+  fill: var(--warning-icon-bgcolor);
+}
+
+#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  display: flex;
+}
+
+#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
+  filter: grayscale(100%);
+}
+
+.cui-widget-panel,
+#widget-overflow,
+#unified-extensions-panel {
+  font: menu;
+}
+
+panelview {
+  -moz-box-orient: vertical;
+  background: var(--arrowpanel-background);
+  padding: 0;
+}
+
+/* Prevent a scrollbar from appearing while the animation for transitioning from
+   one view to another runs, which would otherwise happen if the new view has
+   more height than the old one because that would mean that during the
+   animation the height of the multiview will be too short for the new view. */
+panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelview > .panel-subview-body {
+  overflow-y: hidden;
+}
+
+.panel-subview-body {
+  overflow-y: auto;
+  overflow-x: hidden;
+  -moz-box-flex: 1;
+  padding: var(--panel-subview-body-padding);
+}
+
+.panel-subview-body:not(:last-child) {
+  padding-bottom: 0;
+}
+
+toolbarseparator + .panel-subview-body {
+  padding-top: 0;
+}
+
+.panel-view-body-unscrollable {
+  overflow: hidden;
+  -moz-box-flex: 1;
+}
+
+.panel-info-button {
+  appearance: none;
+  color: inherit;
+  padding: 0;
+  border-radius: var(--toolbarbutton-border-radius);
+  flex-shrink: 0;
+}
+
+.panel-info-button[disabled=true] {
+  visibility: hidden;
+}
+
+.panel-info-button:hover {
+  background-color: var(--panel-item-hover-bgcolor);
+}
+
+.panel-info-button:not(:hover)[checked],
+.panel-info-button:hover:active {
+  background-color: var(--panel-item-active-bgcolor);
+}
+
+.panel-info-button:focus-visible {
+  outline: var(--focus-outline);
+}
+
+.panel-info-button > image {
+  list-style-image: url(chrome://global/skin/icons/info.svg);
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  padding: var(--arrowpanel-header-info-icon-padding);
+}
+
+#wrapper-edit-controls:is([place="palette"],[place="panel"]) > #edit-controls,
+#wrapper-zoom-controls:is([place="palette"],[place="panel"]) > #zoom-controls,
+:is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons {
+  margin: var(--arrowpanel-menuitem-margin);
+}
+
+/* Bookmark-related menupopup tweaks to make them feel like standard panels */
+
+toolbarbutton menupopup[placespopup] {
+  appearance: none;
+  border: none;
+  font: menu;
+  background-color: transparent;
+  --panel-background: var(--arrowpanel-background);
+  --panel-color: var(--arrowpanel-color);
+  --panel-border-color: var(--arrowpanel-border-color);
+  --panel-border-radius: var(--arrowpanel-border-radius);
+  --panel-padding: var(--panel-subview-body-padding);
+}
+
+toolbarbutton menupopup[placespopup] menupopup[placespopup] {
+  /* Align non top-level menupopup's first menuitem with the menuitem that opened it.
+   * The 1px is for the menupopup's border. */
+  margin-top: calc(-1 * (var(--panel-subview-body-padding-block) + var(--panel-shadow-margin) + 1px));
+}
+
+toolbarbutton menupopup[placespopup] > :is(menu, menuitem)[disabled] {
+  color: var(--panel-disabled-color);
+}
+
+toolbarbutton menupopup[placespopup] > :is(menu, menuitem):not([disabled])[_moz-menuactive] {
+  color: inherit;
+  background-color: var(--panel-item-hover-bgcolor);
+}
+
+toolbarbutton menupopup[placespopup] > :is(menu, menuitem):not([disabled])[_moz-menuactive]:active {
+  color: inherit;
+  background-color: var(--panel-item-active-bgcolor);
+}
+
+toolbarbutton menupopup[placespopup] > :is(menu, menuitem) :is(
+  .menu-text,
+  .menu-iconic-text,
+  .menu-iconic-icon,
+  .menu-iconic-left,
+  .menu-iconic-accel,
+  .menu-accel-container,
+  .menu-accel,
+  .menu-right
+) {
+  /* Reset every spacing and appearance set by the platforms' menu.css
+   * and set the ones we need in the following rules. */
+  margin: 0 !important;
+  padding: 0 !important;
+  appearance: none !important;
+}
+
+toolbarbutton menupopup[placespopup] > :is(.menu-iconic, .menuitem-iconic) > .menu-iconic-left {
+  margin-inline-end: 8px !important;
+}
+
+toolbarbutton menupopup[placespopup] > :is(menu, menuitem) > .menu-accel-container > :is(.menu-accel, .menu-iconic-accel) {
+  margin-inline-start: 16px !important;
+  color: var(--panel-shortcut-color);
+}
+
+toolbarbutton menupopup[placespopup][emptyplacesresult] > menuitem > .menu-accel-container > .menu-accel {
+  margin: 0 !important;
+}
+
+toolbarbutton menupopup[placespopup] > menu > .menu-right {
+  list-style-image: url(chrome://global/skin/icons/arrow-right.svg);
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.6;
+  width: unset;
+  height: unset;
+  /* Reset the rect we inherit from the button */
+  -moz-image-region: auto;
+}
+
+toolbarbutton menupopup[placespopup] > menu > .menu-right:-moz-locale-dir(rtl) {
+  list-style-image: url(chrome://global/skin/icons/arrow-left.svg);
+}
+
+/* menuseparators in bookmark-related menupopups are styled differently
+ * to allow for user interaction with them (e.g. drag, right click ...) */
+toolbarbutton menupopup[placespopup] menuseparator {
+  position: relative;
+  appearance: none;
+  border: none;
+  min-height: 0;
+  margin: 0 var(--panel-separator-margin-horizontal);
+  padding-inline: 0;
+  padding-top: var(--panel-separator-margin-vertical);
+  padding-bottom: calc(var(--panel-separator-margin-vertical) + 1px);
+}
+
+toolbarbutton menupopup[placespopup] menuseparator::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  border-top: 1px solid var(--panel-separator-color);
+  border-bottom: none;
+}
+
+#BMB_bookmarksPopup {
+  max-width: 30em;
+}
+
+#confirmation-hint {
+  --arrowpanel-background: #0060df;
+  --arrowpanel-border-color: #0060df;
+  --arrowpanel-color: #fff;
+  --arrowpanel-padding: 6px 10px;
+  font-weight: 400;
+  font-size: 1.1rem;
+}
+
+#confirmation-hint::part(content) {
+  -moz-box-align: center;
+}
+
+#confirmation-hint-checkmark-animation-container {
+  position: relative;
+  overflow: hidden;
+  width: 14px;
+  height: 14px;
+}
+
+/* Don't show the checkmark if there is a description */
+#confirmation-hint.with-description #confirmation-hint-checkmark-animation-container {
+  display: none;
+}
+
+#confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image {
+  display: block;
+  position: absolute;
+  background-image: url(chrome://browser/skin/success-animation.svg);
+  background-repeat: no-repeat;
+  /* frames are 16px wide by 14px high */
+  min-width: 304px;
+  max-width: 304px;
+  min-height: 14px;
+  max-height: 14px;
+  animation-name: confirmation-hint-checkmark-animation;
+  animation-fill-mode: forwards;
+  animation-timing-function: steps(18);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#confirmation-hint[data-message-id="loginRemoved"] #confirmation-hint-checkmark-image {
+  background-image: url("chrome://global/skin/icons/delete.svg");
+  background-size: contain;
+  -moz-context-properties: fill;
+  fill: #FFF;
+  animation: none;
+}
+
+#confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image:-moz-locale-dir(rtl) {
+  animation-name: confirmation-hint-checkmark-animation-rtl;
+  transform: translateX(288px);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  #confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image {
+    animation-duration: 300ms;
+    animation-delay: 60ms;
+  }
+}
+
+@keyframes confirmation-hint-checkmark-animation {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-288px);
+  }
+}
+
+@keyframes confirmation-hint-checkmark-animation-rtl {
+  from {
+    transform: translateX(288px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+#confirmation-hint-message {
+  margin-inline: 7px 0;
+}
+
+#confirmation-hint.with-description #confirmation-hint-message {
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  #confirmation-hint-message-container {
+    transform: scale(.8);
+    opacity: 0;
+    transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18),
+                opacity 60ms linear;
+  }
+
+  #confirmation-hint-checkmark-animation-container[animate] + #confirmation-hint-message-container {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+panelview[id^=PanelUI-webext-] {
+  overflow: hidden;
+}
+
+.cui-widget-panel {
+  --arrowpanel-padding: var(--panel-subview-body-padding);
+}
+
+#appMenu-popup panelview,
+#PanelUI-fxa {
+  width: 22.5em;
+}
+
+#customizationui-widget-multiview panelview:not([extension]) {
+  min-width: var(--menu-panel-width);
+  max-width: 35em;
+}
+
+#customizationui-widget-multiview #appMenu-libraryView,
+#pageActionPanel panelview,
+#widget-overflow panelview {
+  min-width: var(--menu-panel-width-wide);
+  max-width: var(--menu-panel-width-wide);
+}
+
+/* Add 2 * 16px extra width for touch mode button padding. */
+#appMenu-popup[touchmode] panelview {
+  min-width: calc(var(--menu-panel-width) + 32px);
+}
+
+.toolbaritem-combined-buttons:is(
+  :not([cui-areatype="toolbar"]),
+  [overflowedItem=true]
+) > toolbarbutton > .toolbarbutton-icon {
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+}
+
+.animate-out {
+  animation-name: widget-animate-out;
+  animation-fill-mode: forwards;
+  animation-duration: 500ms;
+  animation-timing-function: var(--animation-easing-function);
+}
+
+@keyframes widget-animate-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0 ;
+    transform: scale(.5);
+  }
+}
+
+toolbarpaletteitem[place="panel"] > .toolbarbutton-1 {
+  -moz-box-flex: 1;
+}
+
+/* Help webextension buttons fit in. */
+toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
+toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
+toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-icon,
+toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  height: var(--panel-and-palette-icon-size);
+  width: var(--panel-and-palette-icon-size);
+}
+
+#customization-palette .toolbarbutton-1 {
+  appearance: none;
+  -moz-box-orient: vertical;
+  padding: 12px 0 9px;
+  margin: 0;
+}
+
+/* above we treat the container as the icon for the margins, that is so the
+/* badge itself is positioned correctly. Here we make sure that the icon itself
+/* has the minimum size we want, but no padding/margin. */
+.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  width: var(--panel-and-palette-icon-size);
+  height: var(--panel-and-palette-icon-size);
+  min-width: var(--panel-and-palette-icon-size);
+  min-height: var(--panel-and-palette-icon-size);
+  margin: 0;
+  padding: 0;
+}
+
+#zoom-in-button > .toolbarbutton-text,
+#zoom-out-button > .toolbarbutton-text,
+#zoom-reset-button > .toolbarbutton-icon {
+  display: none;
+}
+
+/* Main menu banner menuitems */
+
+#appMenu-popup .panel-banner-item,
+#appMenu-popup .addon-banner-item {
+  -moz-box-align: start;
+  color: var(--panel-banner-item-color);
+  background-color: var(--panel-banner-item-background-color);
+  margin-bottom: 4px;
+  font-weight: 600;
+}
+
+:root[uidensity="compact"] .panel-banner-item,
+:root[uidensity="compact"] .addon-banner-item {
+  /* Without some padding the button gets too crowded even for compact mode
+     when the text wraps to a newline. */
+  padding-block: 4px;
+}
+
+#appMenu-popup .panel-banner-item:not([disabled]):hover,
+#appMenu-popup .addon-banner-item:not([disabled]):hover {
+  background-color: var(--panel-banner-item-hover-bgcolor);
+}
+
+#appMenu-popup .panel-banner-item:not([disabled]):hover:active,
+#appMenu-popup .addon-banner-item:not([disabled]):hover:active {
+  background-color: var(--panel-banner-item-active-bgcolor);
+}
+
+#appMenu-popup .panel-banner-item > .toolbarbutton-text,
+#appMenu-popup .addon-banner-item > .toolbarbutton-text {
+  display: inline-block;
+  padding: 0;
+}
+
+.panel-banner-item > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+  /* Move the icon to appear after the text label. */
+  -moz-box-ordinal-group: 2;
+}
+
+.addon-banner-item > .toolbarbutton-icon {
+  display: none;
+}
+
+/* Addon banners use that one for the addon's icon and need a content element
+   added to put their generic notification in. */
+.addon-banner-item::after {
+  content: "";
+  display: -moz-box;
+  background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill;
+  fill: var(--warning-icon-bgcolor);
+  margin-inline-start: 10px;
+}
+
+/* FxAccount indicator bits. */
+
+@keyframes syncRotate {
+  from { transform: rotate(0); }
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+#PanelUI-fxa-menu-syncnow-button[syncstatus="active"] > .toolbarbutton-icon,
+#PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon,
+.syncNowBtn[syncstatus="active"] {
+  animation: syncRotate 0.8s linear infinite;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill-attention);
+  visibility: visible;
+}
+}
+
+.syncNowBtn {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+  list-style-image: url("chrome://browser/skin/sync.svg");
+}
+
+#fxa-menu-account-fxa-avatar {
+  pointer-events: none;
+  list-style-image: var(--avatar-image-url);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* Handle different UI states. */
+
+:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button {
+  display: none;
+}
+
+/* Error states */
+
+#appMenu-fxa-status2 {
+  display: flex;
+}
+
+#appMenu-fxa-text,
+#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 {
+  flex: 1;
+  align-self: center;
+}
+
+#appMenu-fxa-status2[fxastatus] {
+  margin: 0;
+  padding: 0;
+}
+
+#appMenu-fxa-status2:not([fxastatus]) {
+  padding-block: 0 2px;
+}
+
+#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 > vbox > #appMenu-header-description,
+#appMenu-fxa-text {
+  font-weight: 600;
+}
+
+#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {
+  padding: 6px 12px;
+  background-color: var(--button-bgcolor);
+  font-size: 0.8em;
+  font-weight: 600;
+}
+
+#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2:hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2:active {
+  background-color: var(--button-active-bgcolor);
+}
+
+:root[fxadisabled=true] #appMenu-fxa-status2,
+:root[fxadisabled=true] #appMenu-fxa-separator {
+  display: none;
+}
+
+#fxa-manage-account-button > vbox > label,
+#PanelUI-fxa-menu-syncnow-button > hbox > label,
+#PanelUI-remotetabs-syncnow > hbox > label {
+  margin-inline-start: 0;
+}
+
+#appMenu-fxa-label2 > vbox > label {
+  margin-inline: 0;
+}
+
+.syncNowBtn {
+  visibility: collapse;
+  -moz-box-ordinal-group: 2;
+}
+
+.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
+  font-size: 11px;
+}
+
+#appMenu-fxa-status2[fxastatus="login-failed"] #appMenu-fxa-label2::after {
+  content: url("chrome://global/skin/icons/warning.svg");
+  -moz-context-properties: fill;
+  fill: var(--warning-icon-bgcolor);
+}
+
+#appMenu-fxa-status2[fxastatus="unverified"] #appMenu-fxa-label2::after {
+  content: url("chrome://global/skin/icons/info-filled.svg");
+  -moz-context-properties: fill;
+  fill: var(--panel-banner-item-info-icon-bgcolor);
+}
+
+/* Firefox Account Toolbar Panel */
+
+#fxa-avatar-image {
+  width: 16px;
+  height: 16px;
+}
+
+:root {
+  --avatar-image-url: url(chrome://browser/skin/fxa/avatar.svg);
+}
+
+:root[fxastatus="not_configured"] {
+  --avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty.svg);
+}
+
+:root:not([fxatoolbarmenu]) #fxa-toolbar-menu-button {
+  display: none;
+}
+
+/* Hide the FxA toolbar button when its in the nav-bar, until in use */
+:root[fxastatus="not_configured"] #widget-overflow-list > #fxa-toolbar-menu-button,
+:root[fxastatus="not_configured"] #nav-bar-customization-target > #fxa-toolbar-menu-button {
+  display: none;
+}
+
+#fxa-avatar-image,
+#PanelUI-fxa-menu-account-settings-button {
+  list-style-image: var(--avatar-image-url);
+}
+
+/* Non-signedin statuses icons are not totally round. */
+:root[fxastatus="signedin"] #fxa-avatar-image {
+  border-radius: 50%;
+}
+
+.PanelUI-fxa-service-description-label,
+.PanelUI-remotetabs-instruction-label {
+  /* Use 'lighter' font for this to de-emphasize it compared to the title. */
+  font-weight: lighter;
+}
+
+@media (-moz-platform: linux) {
+  .PanelUI-fxa-service-description-label,
+  .PanelUI-remotetabs-instruction-label {
+    /* Use 300 on Linux because 100 is too light (lacks contrast with
+     * the background) for some fonts in combination with anti-aliasing. */
+    font-weight: 300;
+  }
+}
+
+#fxa-menu-header-title {
+  color: var(--arrowpanel-color);
+}
+
+#fxa-menu-header-description {
+  color: var(--panel-description-color);
+  font-weight: 600;
+}
+
+#PanelUI-appMenu-fxa-label-last-synced {
+  font-size: 10px;
+  font-style: italic;
+  color: var(--panel-description-color);
+}
+
+#PanelUI-fxa-menu-send-button {
+  list-style-image: url(chrome://browser/skin/fxa/send.svg);
+}
+
+#PanelUI-fxa-menu-monitor-button {
+  list-style-image: url(chrome://browser/skin/fxa/monitor.svg);
+}
+
+#PanelUI-fxa-menu-connect-device-button {
+  list-style-image: url(chrome://browser/skin/fxa/add-device.svg);
+}
+
+:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button {
+  color: var(--panel-disabled-color);
+}
+
+/* From the FxA menu -> synced tabs, we don't need to clutter the view with
+   redundant buttons because these are accessible from the main menu */
+panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
+  display: none;
+}
+
+#PanelUI-sendTabToDevice > .panel-subview-body:not([state]) > #PanelUI-sendTabToDevice-syncingDevices {
+  display: none;
+}
+
+#PanelUI-fxa-menu-sendtab-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+  transform: scaleX(-1);
+}
+
+.fxaSendLogo,
+.fxaMonitorLogo {
+  margin-top: 15px;
+  height: 80px;
+  width: 80px;
+}
+
+.fxaSendToDeviceLogo {
+  margin-top: 15px;
+  height: 119px;
+  width: 164px;
+  list-style-image: url(chrome://browser/skin/fxa/send-to-device.svg);
+}
+
+.fxaSendLogo {
+  list-style-image: url(chrome://browser/content/logos/send.svg);
+}
+
+.fxaMonitorLogo {
+  list-style-image: url(chrome://browser/content/logos/monitor.svg);
+}
+
+#PanelUI-remotetabs {
+  --panel-ui-sync-illustration-height: 141px;
+}
+
+.sendToDevice-device[clientType=phone] {
+  list-style-image: url("chrome://browser/skin/device-phone.svg");
+}
+
+.sendToDevice-device[clientType=tablet] {
+  list-style-image: url("chrome://browser/skin/device-tablet.svg");
+}
+
+.sendToDevice-device[clientType=desktop] {
+  list-style-image: url("chrome://browser/skin/device-desktop.svg");
+}
+
+.sendToDevice-device[clientType=tv] {
+  list-style-image: url("chrome://browser/skin/device-tv.svg");
+}
+
+.sendToDevice-device[clientType=vr] {
+  list-style-image: url("chrome://browser/skin/device-vr.svg");
+}
+
+.sendToDevice-device.signintosync {
+  list-style-image: url("chrome://browser/skin/sync.svg");
+}
+
+.PanelUI-fxa-service-description-label,
+.PanelUI-remotetabs-instruction-label {
+  /* If you change the margin here, the min-height of the synced tabs panel
+    (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
+    need adjusting (see bug 1248506) */
+  margin: 0;
+  text-align: center;
+  text-shadow: none;
+  max-width: 15em;
+}
+
+.PanelUI-fxa-service-description-label,
+.PanelUI-remotetabs-instruction-label {
+  margin-top: 10px;
+}
+
+.PanelUI-fxa-signin-button,
+.PanelUI-remotetabs-button {
+  appearance: none;
+  background-color: #0060df;
+  /* !important for the color as an OSX specific rule when a lightweight theme
+     is used for buttons in the toolbox overrides. See bug 1238531 for details */
+  color: white !important;
+  border-radius: 2px;
+  /* If you change the margin or padding below, the min-height of the synced tabs
+     panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
+     etc) may need adjusting (see bug 1248506) */
+  margin-block: 15px;
+  padding: 8px;
+  text-shadow: none;
+  min-width: 200px;
+}
+
+.PanelUI-fxa-signin-button,
+.PanelUI-remotetabs-button {
+  padding: 1em;
+}
+
+.PanelUI-fxa-signin-button:hover,
+.PanelUI-remotetabs-button:hover {
+  background-color: #003eaa;
+}
+
+.PanelUI-fxa-signin-button:hover:active,
+.PanelUI-remotetabs-button:hover:active {
+  background-color: #002275;
+}
+
+.remotetabs-promo-link {
+  margin: 0;
+}
+
+.PanelUI-remotetabs-notabsforclient-label {
+  color: var(--panel-description-color);
+  /* This margin is to line this label up with the labels in toolbarbuttons. */
+  margin-inline-start: 28px;
+}
+
+#PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label {
+  margin-inline-start: 32px;
+}
+
+.fxaSyncIllustration,
+.fxaSyncIllustrationIssue {
+  /* If you change the margin here, the min-height of the synced tabs panel
+  (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
+  need adjusting (see bug 1248506) */
+  width: 204px;
+  height: var(--panel-ui-sync-illustration-height);
+  -moz-context-properties: fill;
+  fill: #cdcdcd;
+}
+
+.fxaSyncIllustration {
+  list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
+}
+
+.fxaSyncIllustrationIssue {
+  list-style-image: url(chrome://browser/skin/fxa/sync-illustration-issue.svg);
+}
+
+.PanelUI-fxa-signin-button > .toolbarbutton-text,
+.PanelUI-remotetabs-button > .toolbarbutton-text {
+  /* Overrides toolbar[mode="icons"] from xul.css */
+  display: block;
+}
+
+#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
+  min-width: 19em;
+}
+
+/* Work around bug 1224412 - these boxes will cause scrollbars to appear when
+   the panel is anchored to a toolbar button.
+*/
+#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
+#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-syncdisabled,
+#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
+#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-unverified,
+#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
+#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
+  min-height: calc(var(--panel-ui-sync-illustration-height) +
+                   15px + /* margin of .fxaSyncIllustration */
+                   30px + /* margin of .PanelUI-remotetabs-button */
+                   8px + /* padding of .PanelUI-remotetabs-button */
+                   1em);
+}
+
+.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
+  color: var(--panel-description-color);
+}
+
+/* Collapse the non-active vboxes in the remotetabs deck to use only the
+   height the active box needs */
+#PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
+#PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
+#PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
+  visibility: collapse;
+}
+
+#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
+  display: none;
+}
+
+#PanelUI-fxa-remotetabs-deck:not([syncingtabs]) {
+  display: none;
+}
+
+#customization-palette .toolbarbutton-text {
+  display: none;
+}
+
+toolbarbutton menupopup[placespopup] > :is(menu, menuitem),
+.subview-subheader,
+panelview .toolbarbutton-1,
+.subviewbutton,
+.widget-overflow-list .toolbarbutton-1 {
+  appearance: none;
+  margin: var(--arrowpanel-menuitem-margin);
+  min-height: 24px;
+  padding: var(--arrowpanel-menuitem-padding);
+  border-radius: var(--arrowpanel-menuitem-border-radius);
+  background-color: transparent;
+}
+
+.subview-subheader {
+  font-size: 11px;
+  font-weight: inherit;
+  color: var(--panel-description-color);
+  padding-block: 4px;
+  box-sizing: border-box;
+}
+
+.subviewbutton {
+  /* toolbarbuttons default to centered, but we don't want that for subviews. */
+  -moz-box-pack: start;
+}
+
+.subviewbutton[disabled="true"] {
+  color: var(--panel-disabled-color);
+}
+
+.subviewbutton-iconic > .toolbarbutton-text,
+.subviewbutton[image] > .toolbarbutton-text,
+.subviewbutton[targetURI] > .toolbarbutton-text,
+.subviewbutton.bookmark-item > .toolbarbutton-text,
+.subviewbutton[checked="true"] > .toolbarbutton-text {
+  padding-inline-start: 8px;
+}
+
+.subviewbutton-iconic > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* Adjust the Zoom toolbaritem padding to have its height the same as other toolbarbuttons,
+ * also in compact density and touch mode. */
+#appMenu-zoom-controls {
+  padding-block: max(0px, var(--arrowpanel-menuitem-padding-block) - 4px);
+}
+
+#appMenu-zoom-controls > .subviewbutton {
+  margin-inline-start: 2px;
+  padding: 4px;
+}
+
+/* hover and active color changes are applied to child elements not the button itself */
+#appMenu-zoom-controls > .subviewbutton:not([disabled]):is(:hover, :hover:active) {
+  color: unset;
+  background-color: unset;
+}
+
+#appMenu-zoom-controls > .subviewbutton:focus-visible {
+  outline: none;
+}
+
+#appMenu-zoom-controls > .subviewbutton-iconic:focus-visible > .toolbarbutton-icon,
+#appMenu-zoomReset-button2:focus-visible > .toolbarbutton-text {
+  outline: var(--focus-outline);
+}
+
+#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
+  -moz-context-properties: fill, stroke;
+  fill: var(--button-color);
+  /* the stroke color is used to fill the circle in the icon */
+  stroke: var(--button-bgcolor);
+  border-radius: 50%;
+  padding: 0;
+}
+
+#appMenu-zoomReset-button2 > .toolbarbutton-text,
+#appMenu-fullscreen-button2 > .toolbarbutton-icon  {
+  border-radius: 2px;
+}
+
+#appMenu-fullscreen-button2 > .toolbarbutton-icon {
+  padding: 1px;
+  background-color: var(--button-bgcolor);
+}
+
+#appMenu-zoomReset-button2:not([disabled]):hover > .toolbarbutton-text,
+#appMenu-fullscreen-button2:not([disabled]):hover > .toolbarbutton-icon {
+  background-color: var(--panel-item-hover-bgcolor);
+}
+#appMenu-zoomReduce-button2:not([disabled]):hover > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2:not([disabled]):hover > .toolbarbutton-icon {
+  stroke: var(--panel-item-hover-bgcolor);
+}
+
+#appMenu-zoomReset-button2:not([disabled]):active:hover > .toolbarbutton-text,
+#appMenu-fullscreen-button2:not([disabled]):active:hover > .toolbarbutton-icon {
+  background-color: var(--panel-item-active-bgcolor);
+}
+#appMenu-zoomReduce-button2:not([disabled]):active:hover > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2:not([disabled]):active:hover > .toolbarbutton-icon {
+  stroke: var(--panel-item-active-bgcolor);
+}
+
+/**
+ * When the Zoom Reset button is disabled, we don't want the zoom-level
+ * indicator to be so hard to read, so we override the disabled text
+ * style on it.
+ */
+#appMenu-zoomReset-button2[disabled],
+#zoom-reset-button[disabled] {
+  opacity: 1;
+}
+
+/* We don't always display: none this item, and if it has forced width (like above)
+ * or margin, that impacts the position of the label. Fix:
+ */
+.subviewbutton > .toolbarbutton-icon {
+  margin: 0;
+}
+
+.subviewbutton > .toolbarbutton-text {
+  text-align: start;
+  display: block;
+}
+
+.panel-subview-footer-button {
+  /* Set the footer's bottom margin according to menuitems inline margin
+     to make sure the footer's margin is even from all sides. */
+  margin-bottom: var(--arrowpanel-menuitem-margin-inline);
+}
+
+.subviewbutton[shortcut]::after {
+  content: attr(shortcut);
+  display: -moz-box;
+  color: var(--panel-shortcut-color);
+}
+
+#protections-popup-mainView .subviewbutton-nav:not(.notFound)::after,
+#identity-credential-notification .subviewbutton-nav::after,
+.widget-overflow-list .subviewbutton-nav::after,
+.PanelUI-subView .subviewbutton-nav::after {
+  -moz-context-properties: fill, fill-opacity;
+  content: url(chrome://global/skin/icons/arrow-right.svg);
+  fill: currentColor;
+  fill-opacity: 0.6;
+  display: -moz-box;
+}
+
+#protections-popup-mainView .subviewbutton-nav:not(.notFound):-moz-locale-dir(rtl)::after,
+#identity-credential-notification .subviewbutton-nav:-moz-locale-dir(rtl)::after,
+.widget-overflow-list .subviewbutton-nav:-moz-locale-dir(rtl)::after,
+.PanelUI-subView .subviewbutton-nav:-moz-locale-dir(rtl)::after {
+  content: url(chrome://global/skin/icons/arrow-left.svg);
+}
+
+.PanelUI-subView .subviewbutton-nav-down::after {
+  content: url(chrome://global/skin/icons/arrow-down.svg);
+}
+
+.subviewbutton[shortcut]::after,
+.widget-overflow-list .subviewbutton-nav::after,
+.PanelUI-subView .subviewbutton-nav::after {
+  margin-inline-start: 10px;
+}
+
+.subviewbutton[checked="true"] {
+  list-style-image: url(chrome://global/skin/icons/check.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  color: inherit;
+}
+
+.subviewbutton[type="open-to-new"]::after {
+  content: url(chrome://global/skin/icons/open-in-new.svg);
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.6;
+  display: -moz-box;
+  height: 12px;
+  width: 12px;
+}
+
+.subviewbutton[type="open-to-new"]:-moz-locale-dir(rtl)::after {
+  transform: scaleX(-1);
+}
+
+/* A menu item with some buttons at the end. */
+.toolbaritem-menu-buttons {
+  /* Use the same margin at the start as at the end (other margin set below). */
+  margin-inline-start: 8px;
+}
+
+.toolbaritem-menu-buttons > .subviewbutton {
+  min-width: auto;
+  padding-inline: 5px;
+}
+
+.toolbaritem-menu-buttons > .subviewbutton-iconic:not([flex]) > .toolbarbutton-text {
+  display: none;
+}
+
+.toolbaritem-combined-buttons,
+.toolbaritem-menu-buttons {
+  -moz-box-align: center;
+  -moz-box-orient: horizontal;
+  border: 0;
+  border-radius: 0;
+}
+
+.toolbaritem-combined-buttons:not([widget-type="button-and-view"], [widget-type="custom"]),
+.toolbaritem-menu-buttons {
+  margin-inline-end: 8px;
+}
+
+panelmultiview .toolbaritem-combined-buttons > label {
+  -moz-box-flex: 1;
+  margin: 0;
+  padding: 4px 0;
+}
+
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton {
+  -moz-box-flex: 0;
+  height: auto;
+  margin-inline-start: 18px;
+  min-width: auto;
+  padding: 4px 5px;
+}
+
+#appMenu-zoomReset-button2 > .toolbarbutton-text {
+  min-width: calc(4ch + 8px);
+  text-align: center;
+}
+
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton-iconic > .toolbarbutton-text,
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon {
+  display: none;
+}
+
+.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
+  padding-inline-start: 0;
+}
+
+panelview .toolbarbutton-1 {
+  margin-top: 6px;
+}
+
+:is(
+  panelview .toolbarbutton-1,
+  toolbarbutton.subviewbutton,
+  .widget-overflow-list .toolbarbutton-1,
+  .toolbaritem-combined-buttons:is(
+    :not([cui-areatype="toolbar"]),
+    [overflowedItem=true]
+  ) > toolbarbutton
+):focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+}
+
+/* hover styles for not-disabled, not-active buttons */
+:is(
+  panelview .toolbarbutton-1,
+  toolbarbutton.subviewbutton,
+  .widget-overflow-list .toolbarbutton-1,
+  .toolbaritem-combined-buttons:is(
+    :not([cui-areatype="toolbar"]),
+    [overflowedItem=true]
+  ) > toolbarbutton
+):not([disabled]):hover {
+  color: inherit;
+  background-color: var(--panel-item-hover-bgcolor);
+}
+
+/* hovered-and-active styles for not-disabled buttons */
+:is(
+  panelview .toolbarbutton-1,
+  toolbarbutton.subviewbutton,
+  .widget-overflow-list .toolbarbutton-1,
+  .toolbaritem-combined-buttons:is(
+    :not([cui-areatype="toolbar"]),
+    [overflowedItem=true]
+  ) > toolbarbutton
+):not([disabled]):hover:active {
+  color: inherit;
+  background-color: var(--panel-item-active-bgcolor);
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
+}
+
+#widget-overflow-mainView > toolbarseparator,
+#widget-overflow-mainView > .panel-subview-body > toolbarseparator,
+.PanelUI-subView toolbarseparator,
+#unified-extensions-panel toolbarseparator,
+#permission-popup-mainView > toolbarseparator,
+#editBookmarkPanel toolbarseparator,
+#downloadsFooterButtons > toolbarseparator,
+.cui-widget-panel toolbarseparator {
+  appearance: none;
+  min-height: 0;
+  border-top: 1px solid var(--panel-separator-color);
+  border-bottom: none;
+  margin: var(--panel-separator-margin);
+  padding: 0;
+}
+
+.PanelUI-subView toolbarseparator.proton-zap {
+  border-image: var(--panel-separator-zap-gradient, none) 1;
+}
+
+.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"],
+#PanelUI-historyItems > toolbarbutton {
+  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#fxa-menu-account-fxa-avatar,
+#appMenu-fxa-label > .toolbarbutton-icon,
+#PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon,
+.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
+#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
+#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
+#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#PanelUI-fxa-remotetabs-tabspane {
+  min-width: 0;
+}
+
+#PanelUI-fxa-menu-account-settings-button > .toolbarbutton-icon {
+  border-radius: 50%;
+}
+
+toolbarpaletteitem[place="palette"] > #search-container {
+  min-width: 7em;
+  width: 7em;
+  min-height: 37px;
+  max-height: 37px;
+}
+
+.toolbaritem-combined-buttons:is(
+  :not([cui-areatype="toolbar"]),
+  [overflowedItem=true]
+) > toolbarbutton {
+  border: 0;
+  margin: 0;
+  -moz-box-flex: 1;
+  padding-block: var(--arrowpanel-menuitem-padding-block);
+  -moz-box-orient: horizontal;
+}
+
+toolbarpaletteitem[place="panel"],
+toolbarpaletteitem[place="panel"] > toolbaritem {
+  -moz-box-flex: 1;
+}
+
+.toolbaritem-combined-buttons[cui-areatype="panel"] > .toolbarbutton-combined-buttons-dropmarker,
+.toolbaritem-combined-buttons[overflowedItem] > .toolbarbutton-combined-buttons-dropmarker {
+  display: none;
+}
+
+.toolbaritem-combined-buttons:is(
+  :not([cui-areatype="toolbar"]),
+  [overflowedItem=true]
+) > toolbarbutton:not(.toolbarbutton-1)[disabled] {
+  opacity: 0.4;
+  /* Override toolbarbutton.css which sets the color to GrayText */
+  color: inherit;
+}
+
+#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
+  /* 4 chars max, but `ch` is the width of the `0` glyph, so account for larger glyphs by adding 1ch */
+  min-width: calc(5ch + var(--toolbarbutton-inner-padding) * 2);
+}
+
+.toolbaritem-combined-buttons:is(
+  :not([cui-areatype="toolbar"]),
+  [overflowedItem=true]
+) > separator {
+  appearance: none;
+  -moz-box-align: stretch;
+  margin: .5em 0;
+  width: 1px;
+  height: auto;
+  background: var(--panel-separator-color);
+  transition-property: margin;
+  transition-duration: 10ms;
+  transition-timing-function: ease;
+}
+
+.toolbaritem-combined-buttons:is(
+  :not([cui-areatype="toolbar"]),
+  [overflowedItem=true]
+):hover > separator {
+  margin: 0;
+}
+
+toolbaritem[overflowedItem=true],
+.widget-overflow-list .toolbarbutton-1 {
+  max-width: var(--menu-panel-width-wide);
+  background-repeat: no-repeat;
+  background-position: 0 center;
+}
+
+.widget-overflow-list .toolbarbutton-1 {
+  -moz-box-align: center;
+  -moz-box-orient: horizontal;
+}
+
+toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
+  opacity: 0.5;
+}
+
+.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text {
+  text-align: start;
+  padding-inline-start: .5em;
+}
+
+#PanelUI-panicView > .panel-subview-body,
+#PanelUI-panicView {
+  overflow: visible;
+}
+
+#PanelUI-panicView.cui-widget-panelview {
+  min-width: 280px;
+}
+
+#PanelUI-panic-timeframe {
+  padding: 15px;
+  border-bottom: 1px solid var(--panel-separator-color);
+}
+
+#panic-button-success-icon,
+#PanelUI-panic-timeframe-icon {
+  background-color: transparent;
+  margin-inline-end: 10px;
+}
+
+#panic-button-success-icon,
+#PanelUI-panic-timeframe-icon {
+  list-style-image: url(chrome://browser/skin/panic-panel/header.png);
+  max-height: 48px;
+  width: 48px;
+}
+
+#panic-button-success-header {
+  -moz-box-align: center;
+  margin-bottom: 5px;
+}
+
+#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.subviewradio {
+  appearance: none;
+  -moz-box-align: center;
+  padding: 3px;
+  margin: 0 0 2px;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+.subviewradio:hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+.subviewradio:is([selected], [selected]:hover, :hover:active) {
+  background-color: var(--button-active-bgcolor);
+}
+
+radiogroup:focus-visible > .subviewradio[focused="true"] {
+  outline: var(--focus-outline);
+}
+
+radiogroup:focus-visible > .subviewradio[focused="true"] > .radio-label-box {
+  outline: none;
+}
+
+.subviewradio > .radio-check {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1px solid rgba(110, 110, 110, 0.4);
+  border-radius: 50%;
+  margin: 1px 5px;
+  background-color: rgba(150,150,150,0.2);
+}
+
+.subviewradio > .radio-check[selected] {
+  background-color: #fff;
+  border: 4px solid #177ee6;
+}
+
+:root[lwt-popup-brighttext] .subviewradio > .radio-check[selected] {
+  background-color: transparent;
+  border: 4px solid #00ddff;
+}
+
+#PanelUI-panic-explanations {
+  padding: 10px 10px 0;
+}
+
+#PanelUI-panic-actionlist-main-label {
+  color: var(--panel-description-color);
+  font-size: 0.9em;
+}
+
+.PanelUI-panic-actionlist {
+  padding-block: 2px;
+  padding-inline-start: 20px;
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  background-position: left center;
+}
+
+.PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
+  background-position-x: right;
+}
+
+#PanelUI-panic-actionlist-cookies {
+  background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
+}
+
+#PanelUI-panic-actionlist-history {
+  background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
+}
+
+#PanelUI-panic-actionlist-windows {
+  background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
+}
+
+#PanelUI-panic-actionlist-newwindow {
+  background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
+}
+
+#PanelUI-panic-warning {
+  color: #d74345;
+  text-align: center;
+  width: 100%;
+  margin-top: 20px;
+}
+
+#PanelUI-panic-view-button {
+  appearance: none;
+  background-color: var(--buttons-destructive-bgcolor);
+  color: var(--buttons-destructive-color);
+  margin: 5px 15px 11px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  font-weight: 600;
+  padding: 10px;
+}
+
+#PanelUI-panic-view-button:hover {
+  background-color: var(--buttons-destructive-hover-bgcolor);
+}
+
+#PanelUI-panic-view-button:hover:active {
+  background-color: var(--buttons-destructive-active-bgcolor);
+}
+
+#PanelUI-panic-view-button:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+#PanelUI-panic-view-button > .toolbarbutton-text {
+  text-align: center;
+  text-shadow: none;
+}
+
+#panic-button-success-closebutton {
+  background-color: var(--button-bgcolor);
+  color: var(--button-color);
+  margin: 5px 0 0;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 10px;
+  font-weight: 600;
+  appearance: none;
+}
+
+#panic-button-success-closebutton:hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+#panic-button-success-closebutton:hover:active {
+  background-color: var(--button-active-bgcolor);
+}
+
+@media (min-resolution: 1.1dppx) {
+  #panic-button-success-icon,
+  #PanelUI-panic-timeframe-icon {
+    list-style-image: url(chrome://browser/skin/panic-panel/header@2x.png);
+  }
+
+  #PanelUI-panic-actionlist-cookies {
+    background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 32, 32, 0);
+  }
+
+  #PanelUI-panic-actionlist-history {
+    background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 64, 32, 32);
+  }
+
+  #PanelUI-panic-actionlist-windows {
+    background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 96, 32, 64);
+  }
+
+  #PanelUI-panic-actionlist-newwindow {
+    background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 128, 32, 96);
+  }
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  /* Set the header's padding according to menuitems horizontal padding
+     to make sure they are even from all sides and aligned according to that padding. */
+  padding: var(--arrowpanel-menuitem-margin-inline);
+  /* Calculate the header's height assuming it includes an icon even if it doesn't,
+     to make sure all headers are the same height (assuming their text is a one liner). */
+  min-height: var(--arrowpanel-header-height);
+}
+
+.panel-header + toolbarseparator {
+  margin-top: 0 !important;
+}
+
+.panel-header > h1 {
+  display: inline;
+  flex: auto;
+  font-size: inherit;
+  font-weight: 600;
+  margin: 0;
+}
+
+.panel-header.panel-header-with-info-button > .panel-info-button {
+  margin-inline-end: var(--arrowpanel-header-info-icon-margin-inline-end);
+}
+
+.panel-header.panel-header-with-info-button > h1 {
+  /* Add the size of the info button to center properly. */
+  margin-inline-start: calc(var(--arrowpanel-header-info-icon-full-width) + var(--arrowpanel-header-info-icon-margin-inline-end));
+}
+
+.panel-header > .subviewbutton-back + h1 {
+  /* Add the size of the back button to center properly. */
+  margin-inline-end: var(--arrowpanel-header-back-icon-full-width);
+}
+
+.panel-header > h1 > span {
+  display: inline-block;
+  white-space: pre-wrap;
+}
+
+.panel-header > .subviewbutton-back {
+  -moz-context-properties: fill;
+  fill: var(--arrowpanel-color);
+  list-style-image: url(chrome://global/skin/icons/arrow-left.svg);
+  padding: var(--arrowpanel-header-back-icon-padding);
+}
+
+.panel-header > .subviewbutton-back:-moz-locale-dir(rtl) {
+  list-style-image: url(chrome://global/skin/icons/arrow-right.svg);
+}
+
+.subviewbutton-back {
+  margin: 0;
+}
+
+.subviewbutton-back > .toolbarbutton-text {
+  display: none;
+}
+
+/* What's New panel */
+#customizationui-widget-multiview #PanelUI-whatsNew {
+  max-width: var(--menu-panel-width);
+}
+
+#protections-popup #messaging-system-message-container {
+  height: 260px;
+  overflow: hidden;
+  transition: margin-bottom .25s;
+}
+
+#protections-popup #messaging-system-message-container[disabled] {
+   /* Offset the height when hidden. This makes the panel content
+   * cover the info message and reveal it as it slides down, rather
+   * than the info message growing in height. */
+  margin-bottom: -260px;
+  pointer-events: none;
+}
+
+#protections-popup #messaging-system-message-container[disabled] #protections-popup-message {
+  opacity: 0;
+}
+
+#protections-popup-message {
+  display: flex;
+  align-items: flex-end;
+  height: calc(100% - 20px);
+  margin: 10px;
+  transition: opacity .25s;
+  opacity: 1;
+  background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg);
+  background-repeat: no-repeat;
+  background-position: top right;
+  -moz-context-properties: fill;
+}
+
+#protections-popup-message:-moz-locale-dir(rtl) {
+  background-position-x: left;
+}
+
+#protections-popup-message .protections-popup-content {
+  display: block;
+  margin: 12px 0;
+}
+
+panelview[mainview] #PanelUI-whatsNew-content {
+  height: 43em;
+}
+
+/* Hide the What's New header when the panel is a subview */
+panelview:not([mainview]) #PanelUI-whatsNew-title {
+  display: none;
+}
+
+#PanelUI-whatsNew .panelMenu-toggleWhatsNew-checkbox {
+  padding-inline-start: 16px;
+  min-height: 41px;
+}
+
+#PanelUI-whatsNew .whatsNew-message {
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+
+/* The following 2 rules show a 1 pixel line separator between What's New
+ * messages while at the same time ensuring that the first message (which has
+ * a date header) will not show the separator
+ */
+#PanelUI-whatsNew .whatsNew-message-body::before {
+  content: "";
+  display: block;
+  height: 1px;
+  width: 104%;
+  margin-inline-start: -2%;
+  background: var(--panel-separator-color);
+}
+
+#PanelUI-whatsNew .has-icon::before {
+  /* the width of the icon + the grid margin */
+  width: calc(104% + 40px);
+}
+
+#PanelUI-whatsNew .whatsNew-message-date + .whatsNew-message-body::before {
+  display: none;
+}
+
+#PanelUI-whatsNew .whatsNew-message-date {
+  font-size: .85em;
+  margin: -12px;
+  margin-top: 0;
+  margin-inline-start: 0;
+  padding: 6px 16px;
+  background: var(--arrowpanel-dimmed);
+}
+
+#PanelUI-whatsNew .whatsNew-message-body {
+  padding: 5px 0 10px;
+  margin: 10px 16px;
+  text-align: inherit;
+  text-decoration: none;
+  color: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+#protections-popup-message .whatsNew-message-body {
+  /* -10px to compensate for the margin on the container. We can't get rid of that
+     because it helps position the background image. */
+  margin: 0 calc(-10px + var(--horizontal-padding)) var(--vertical-section-padding);
+  margin-inline: 6px;
+}
+
+#PanelUI-whatsNew .whatsNew-message-body.has-icon {
+  display: grid;
+  grid-template-columns: auto 32px;
+  grid-template-rows: 0;
+  grid-gap: 0 8px;
+}
+
+#PanelUI-whatsNew .whatsNew-message-icon {
+  height: 32px;
+  width: 32px;
+  margin: 14px auto;
+  display: grid;
+  grid-column-start: 2;
+}
+
+#PanelUI-whatsNew .whatsNew-message-title,
+#protections-popup-message .whatsNew-message-title {
+  display: grid;
+  font-size: 1.3em;
+  font-weight: 600;
+  line-height: 1.4em;
+  margin: 14px 0 0;
+  grid-column-start: 1;
+}
+
+#PanelUI-whatsNew .whatsNew-message-title-large {
+  font-size: 2.1em;
+  margin: 2px 0;
+  font-weight: 300;
+  grid-column-start: 1;
+}
+
+#PanelUI-whatsNew .whatsNew-message-subtitle {
+  margin: 2px 0;
+  font-size: .8em;
+  color: #949494;
+  font-weight: normal;
+  grid-column-start: 1;
+}
+
+#PanelUI-whatsNew .whatsNew-message-content {
+  display: grid;
+  margin: 5px 0 10px;
+  grid-column-start: 1;
+}
+
+#PanelUI-whatsNew .text-link {
+  background: none;
+  border: 0;
+  color: #45a1ff;
+  cursor: pointer;
+  font-size: .9em;
+  grid-column-start: 1;
+}
+
+#protections-popup-message .text-link {
+  color: inherit;
+  font-weight: 600;
+}
+
+#PanelUI-whatsNew .text-link:hover {
+  color: #0a84ff;
+  text-decoration: underline;
+}
+
+#PanelUI-whatsNew .text-link:hover:active {
+  color: #0060df;
+}
+
+/* In the next two rules the panel's width is set according to the
+ * profiler backdrop image when not opened from the overflow panel. */
+#customizationui-widget-panel #PanelUI-profiler {
+  min-width: 319px;
+  max-width: 319px;
+}
+
+#customizationui-widget-panel[viewId="PanelUI-profiler"] {
+  --panel-width: 319px;
+ }
+
+:where(#PanelUI-profiler) :is(description, label) {
+  margin: 0;
+}
+
+#widget-overflow #PanelUI-profiler-header {
+  display: none;
+}
+
+#PanelUI-profiler-header[isinfocollapsed="false"] {
+  background: radial-gradient(circle farthest-side at top right, #03b1f4, #0556cd);
+  color: #fff;
+  /* Set custom hover/focus/active states on the info button,
+     to make them more visible on the header background */
+  --panel-item-hover-bgcolor: #0005;
+  --panel-item-active-bgcolor: #0007;
+}
+
+#PanelUI-profiler-header[isinfocollapsed="false"]:-moz-locale-dir(rtl) {
+  background: radial-gradient(circle farthest-side at top left, #03b1f4, #0556cd);
+}
+
+#PanelUI-profiler-header[isinfocollapsed="false"] :is(button, toolbarbutton):focus-visible {
+  outline-color: currentColor;
+}
+
+#PanelUI-profiler-header[isinfocollapsed="false"] toolbarseparator {
+  border-color: #0003;
+}
+
+#PanelUI-profiler-header[isinfocollapsed="true"] #PanelUI-profiler-info {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#PanelUI-profiler-info {
+  min-height: 180px;
+  padding: 0 15px 15px;
+  background: top 10px right no-repeat
+    url("chrome://browser/skin/profiler-popup-backdrop.png");
+  opacity: 1;
+}
+
+/* The header has an attribute "animationready" that is either set to "true" or to
+   "false". When the DOM is being initialized it is set to "false" so that animations
+   do not run. */
+#PanelUI-profiler-header[animationready="true"] #PanelUI-profiler-info {
+  transition: margin-block-end 250ms, opacity 250ms;
+}
+
+/* Override themes for the Pocket panel, because the Pocket
+   panel currently only supports dark and light themes. */
+@media not (prefers-color-scheme: dark){
+  #customizationui-widget-panel[viewId="PanelUI-savetopocket"] {
+    --arrowpanel-background: #fbfbfb;
+  }
+}
+
+#PanelUI-profiler-content {
+  position: relative;
+  padding: calc(15px - var(--panel-separator-margin-vertical)) 15px 15px;
+}
+
+.PanelUI-profiler-description-title {
+  font-size: 1.3em;
+  font-weight: 600;
+  margin-block: 2px;
+}
+
+.PanelUI-profiler-description {
+  margin-block: 4px;
+}
+
+#PanelUI-profiler-learn-more {
+  margin-top: 4px;
+  color: #fff;
+  text-decoration: underline;
+}
+
+#PanelUI-profiler-learn-more:hover:active {
+  color: #fffc;
+}
+
+#PanelUI-profiler-presets {
+  margin: 8px 0;
+}
+
+#PanelUI-profiler-content-edit-settings {
+  font-size: .9em;
+}
+
+.PanelUI-profiler-content-label {
+  font-weight: 600;
+}
+
+#PanelUI-profiler-content-description {
+  margin-block: 4px;
+  font-size: .9em;
+  color: var(--panel-description-color);
+}
+
+#PanelUI-profiler-content-recording:not([hidden]) {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  gap: 13px;
+  padding-block: 28px;
+  font-size: 1.3em;
+}
+
+.PanelUI-profiler-recording-icon {
+  width: 42px;
+  list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.3;
+}
+
+.PanelUI-profiler-button {
+  appearance: none;
+  background-color: var(--button-bgcolor);
+  border-radius: 4px;
+  color: var(--button-color);
+  padding: 8px;
+  margin: 0 5px;
+}
+
+.PanelUI-profiler-button:hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+.PanelUI-profiler-button:hover:active {
+  background-color: var(--button-active-bgcolor);
+}
+
+.PanelUI-profiler-button:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.PanelUI-profiler-button-primary {
+  background-color: var(--button-primary-bgcolor);
+  color: var(--button-primary-color);
+}
+
+.PanelUI-profiler-button-primary:hover {
+  background-color: var(--button-primary-hover-bgcolor);
+}
+
+.PanelUI-profiler-button-primary:hover:active {
+  background-color: var(--button-primary-active-bgcolor);
+}
+
+.PanelUI-profiler-shortcut {
+  padding-block-start: 5px;
+  opacity: 0.5;
+  text-align: center;
+}
+
+.PanelUI-profiler-buttons {
+  margin: 7px 10px 0;
+}
+
+.PanelUI-profiler-info-icon {
+  margin-inline-end: 10px;
+  margin-block-start: 25px;
+  width: 50px;
+  list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
+  -moz-context-properties: fill;
+  fill: #fff;
+}
+
+#PanelUI-profiler-presets[disabled="true"]::part(label-box) {
+  opacity: 0.5;
+}
+
+/* Web-extension pop-ups */
+
+.cui-widget-panelview[id^=PanelUI-webext-] {
+  border-radius: var(--arrowpanel-border-radius);
+}
+
+.webextension-popup-browser,
+.webextension-popup-stack {
+  border-radius: inherit;
+}
+
+.webextension-popup-stack {
+  position: relative;
+}
diff --git a/browser/themes/shared/customizableui/whimsy.png b/browser/themes/shared/customizableui/whimsy.png
new file mode 100644
index 0000000000..ba53aa98ef
--- /dev/null
+++ b/browser/themes/shared/customizableui/whimsy.png
diff --git a/browser/themes/shared/downloads/allDownloadsView.inc.css b/browser/themes/shared/downloads/allDownloadsView.inc.css
new file mode 100644
index 0000000000..bbe678fde9
--- /dev/null
+++ b/browser/themes/shared/downloads/allDownloadsView.inc.css
@@ -0,0 +1,98 @@
+/* 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/. */
+
+@import "chrome://browser/skin/downloads/progressmeter.css";
+@import "chrome://browser/skin/downloads/download-blockedStates.css";
+
+/*** View and outer controls ***/
+
+#downloadsListBox {
+  margin: 0;
+}
+
+/*** List items ***/
+
+#downloadsListBox > richlistitem {
+  min-height: 4.5em;
+}
+
+.downloadTypeIcon {
+  margin: 8px 13px;
+  width: 32px;
+  height: 32px;
+}
+
+.downloadTarget {
+  margin: 0;
+}
+
+.downloadDetails {
+  opacity: 0.7;
+  font-size: 95%;
+  /* Use calc() to keep the height consistent with .downloadTarget, so that the
+     progress bar can be vertically centered. */
+  margin: 4px 0 calc(1em / 0.95 - 1em);
+}
+
+.downloadDetailsHover,
+.downloadDetailsButtonHover {
+  display: none;
+}
+
+.downloadButton {
+  appearance: none;
+  -moz-box-align: center;
+  background: transparent;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  border: none;
+  color: inherit;
+  padding: 0 12px;
+}
+
+.downloadButton > .button-box {
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.downloadButton > .button-box > .button-icon {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.downloadButton > .button-box > .button-text {
+  display: none;
+}
+
+.downloadButton:hover > .button-box {
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
+}
+
+.downloadButton:hover:active > .button-box {
+  background-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+/*** Button icons ***/
+
+.downloadIconCancel > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/close.svg");
+}
+
+.downloadIconShow > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/folder.svg");
+}
+
+@media (-moz-platform: macos) {
+  .downloadIconShow > .button-box > .button-icon {
+    list-style-image: url("chrome://global/skin/icons/search-glass.svg");
+  }
+}
+
+.downloadIconRetry > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/reload.svg");
+}
diff --git a/browser/themes/shared/downloads/contentAreaDownloadsView.css b/browser/themes/shared/downloads/contentAreaDownloadsView.css
new file mode 100644
index 0000000000..c2e27b1d08
--- /dev/null
+++ b/browser/themes/shared/downloads/contentAreaDownloadsView.css
@@ -0,0 +1,27 @@
+/* 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/. */
+
+@import url("chrome://global/skin/in-content/common.css");
+
+#contentAreaDownloadsView {
+  padding: 18px;
+}
+
+#downloadsListBox:empty {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.downloadButton:not([disabled="true"]):hover,
+.downloadButton:not([disabled="true"]):hover:active,
+.downloadButton:not([disabled]):hover:active {
+  background: transparent;
+  border: none;
+}
+
+#downloadsListEmptyDescription {
+  margin: 1em;
+  text-align: center;
+  color: var(--in-content-deemphasized-text);
+}
diff --git a/browser/themes/shared/downloads/download-blockedStates.css b/browser/themes/shared/downloads/download-blockedStates.css
new file mode 100644
index 0000000000..7a68a381c0
--- /dev/null
+++ b/browser/themes/shared/downloads/download-blockedStates.css
@@ -0,0 +1,62 @@
+/* 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/. */
+
+.downloadBlockedBadge {
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  margin-inline: 16px;
+}
+
+#downloadsPanel-blockedSubview[verdict="Insecure"] .downloadsPanel-blockedSubview-image,
+#downloadsPanel-blockedSubview[verdict="Malware"] .downloadsPanel-blockedSubview-image,
+#downloadsListBox > richlistitem[verdict="Insecure"] .downloadBlockedBadge,
+#downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge {
+  background-image: url("chrome://global/skin/icons/error.svg");
+  -moz-context-properties: fill;
+  fill: #e22850;
+}
+
+:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Insecure"] .downloadsPanel-blockedSubview-image,
+:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Insecure"] .downloadBlockedBadge,
+:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Malware"] .downloadsPanel-blockedSubview-image,
+:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge {
+  fill: #FF9AA2;
+}
+
+#downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image,
+#downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge {
+  -moz-context-properties: fill;
+  fill: #0090ED;
+  background-image: url("chrome://global/skin/icons/info-filled.svg");
+}
+
+:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image,
+:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge {
+  fill: #80EBFF;
+}
+
+.downloadsPanel-blockedSubview-image {
+  width: 16px;
+  background-repeat: no-repeat;
+  margin-inline-end: 25px;
+}
+
+.downloadsPanel-blockedSubview-title-box {
+  margin-block: 21.5px 0;
+}
+
+#downloadsPanel-blockedSubview-title {
+  -moz-box-flex: 1;
+}
+
+#downloadsPanel-blockedSubview[verdict="PotentiallyUnwanted"] .downloadsPanel-blockedSubview-image,
+#downloadsPanel-blockedSubview[verdict="DownloadSpam"] .downloadsPanel-blockedSubview-image,
+#downloadsListBox > richlistitem[verdict="PotentiallyUnwanted"] .downloadBlockedBadge,
+#downloadsListBox > richlistitem[verdict="DownloadSpam"] .downloadBlockedBadge  {
+  -moz-context-properties: fill;
+  fill: #ffbf00;
+  background-image: url("chrome://global/skin/icons/warning.svg");
+}
diff --git a/browser/themes/shared/downloads/download-summary.svg b/browser/themes/shared/downloads/download-summary.svg
new file mode 100644
index 0000000000..c10ee95fcb
--- /dev/null
+++ b/browser/themes/shared/downloads/download-summary.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0"?>
+<!-- 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 xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <path fill="#fff" d="M26.2,31.4H6.8c-1.8,0-3.4-1.5-3.4-3.3V3.8c0-1.8,1.6-3.3,3.4-3.3H23l5.6,6.4V28C28.7,29.9,28,31.4,26.2,31.4z" />
+  <path fill="#939393" d="M26.2,31.9H6.8c-2,0-3.8-1.7-3.8-3.8V3.8C3,1.7,4.8,0,6.8,0h16.4L29,6.7v21.4C29,30.2,28.2,31.9,26.2,31.9z M6.8,1C5.2,1,4,2.3,4,3.8V28c0,1.6,1.4,3,2.9,3h19.2c1.6,0,2-1.5,2-3V7.1L22.7,1C22.7,1,6.8,1,6.8,1z" />
+  <path fill="#4c4c4c" d="M22.5,18.2L17,23.6c-0.3,0.3-0.6,0.4-1.1,0.4c-0.3,0-0.8-0.1-1.1-0.4l-5.5-5.4c-0.5-0.5-0.4-1.1,0.4-1.1H13 v-5.9c0-0.5,0.4-1,1-1h3.9c0.5,0,1,0.4,1,1v5.9h3.1C22.8,17.2,23,17.6,22.5,18.2z" />
+  <polygon fill="#939393" points="27,9 21,9 21,1.9 22,1.9 22,8 27,8" />
+</svg>
diff --git a/browser/themes/shared/downloads/downloads.inc.css b/browser/themes/shared/downloads/downloads.inc.css
new file mode 100644
index 0000000000..64c3253bfb
--- /dev/null
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -0,0 +1,271 @@
+/* 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/. */
+
+@import "chrome://browser/skin/downloads/progressmeter.css";
+@import "chrome://browser/skin/downloads/download-blockedStates.css";
+
+/*** Panel and outer controls ***/
+
+#downloadsListBox {
+  background: transparent;
+  color: inherit;
+  appearance: none;
+  border: 0;
+  margin: 0;
+  /* We have an explicit width set by l10n, but we still want to fill our
+   * container if it's wider. */
+  min-width: 100%;
+}
+
+@media not (prefers-contrast) {
+  #downloadsListBox[disabled] {
+    opacity: var(--downloads-item-disabled-opacity) !important;
+  }
+}
+
+@media (prefers-contrast) {
+  #downloadsListBox[disabled] {
+    color: GrayText;
+  }
+}
+
+#emptyDownloads {
+  padding: 1.5em 8px 2.1em;
+  margin: 0;
+  pointer-events: none;
+}
+
+#downloadsListBox > richlistitem {
+  /* Leave space for the 32x32 icon with 16px vertical padding, and/or
+   * the text in the item, with the same padding, whichever is bigger: */
+  min-height: max(48px, calc(16px + 2em));
+  padding-inline-end: 4px;
+  margin: 0 0 8px;
+  border-radius: 4px;
+}
+
+.downloadMainArea {
+  padding-block: 8px;
+  padding-inline-start: 4px;
+  border-radius: 4px;
+  min-width: 0;
+}
+
+.downloadContainer {
+  min-width: 0;
+}
+
+#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover,
+#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover,
+#downloadsListBox > richlistitem[verdict]:hover,
+#downloadsListBox > richlistitem.openWhenFinished:hover,
+.downloadsPanelFooterButton:hover {
+  background-color: var(--panel-item-hover-bgcolor);
+}
+
+#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover:active,
+#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover:active,
+#downloadsListBox > richlistitem[verdict]:hover:active,
+.downloadsPanelFooterButton[open="true"] {
+  background-color: var(--panel-item-active-bgcolor);
+}
+
+#downloadsListBox:focus-visible > richlistitem[selected],
+#downloadsListBox[force-focus-visible]:focus > richlistitem[selected],
+.downloadButton:focus-visible,
+#downloadsSummary:focus-visible,
+.downloadsPanelFooterButton:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+}
+
+#downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails,
+#downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails {
+  color: #C50042;
+  /* The details text usually gets an opacity reduction, but for the error
+     states we disable that, because it would reduce the contrast too much. */
+  opacity: inherit;
+}
+
+:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails,
+:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails {
+  color: #FF848B;
+}
+
+.downloadTypeIcon {
+  margin-inline-end: 0.7em;
+}
+
+#downloadsPanel-blockedSubview-buttons {
+  margin-top: 1.5em;
+}
+
+#downloadsSummary {
+  background: var(--arrowpanel-dimmed);
+  border-top: 1px solid var(--panel-separator-color);
+  /* Reserve the same space as the button and separator in download items. */
+  padding-inline-end: 59px;
+  -moz-user-focus: normal;
+}
+
+#downloadsSummary > .downloadTypeIcon {
+  list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
+}
+
+#downloadsSummaryDescription {
+  color: -moz-nativehyperlinktext;
+}
+
+:root[lwt-popup-brighttext] #downloadsSummaryDescription {
+  color: #75baff; /* --blue-30 */
+}
+
+/*** List items and similar elements in the summary ***/
+#downloadsSummary {
+  min-height: var(--downloads-item-height);
+}
+
+#downloadsListBox > richlistitem {
+  background: transparent;
+  color: inherit;
+}
+
+#downloadsListBox > richlistitem:last-child {
+  margin-bottom: 0;
+}
+
+.downloadTypeIcon {
+  width: 32px;
+  height: 32px;
+}
+
+#downloadsSummaryDescription,
+.downloadTarget {
+  margin: 0;
+}
+
+#downloadsSummaryDetails,
+.downloadDetails {
+  font-size: calc(100% * var(--downloads-item-font-size-factor));
+  opacity: var(--downloads-item-details-opacity);
+  /* Use calc() to keep the height consistent with .downloadTarget, so that the
+     progress bar can be vertically centered. */
+  margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
+}
+
+/* When hovering the mouse pointer over the item, instead of the normal message
+   we display a more detailed one. For blocked downloads the entire area shows
+   the hover message, for other downloads only the main area does. */
+#downloadsListBox > richlistitem[verdict]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
+#downloadsListBox > richlistitem[verdict]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
+.downloadMainArea:hover > .downloadContainer > .downloadDetailsNormal,
+#downloadsListBox > richlistitem:not([verdict]) > .downloadMainArea:not(:hover) > .downloadContainer > .downloadDetailsHover {
+  display: none;
+}
+
+/* When hovering the action button in particular, instead of the usual hover
+   message we display the command associated with the button. */
+#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
+#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
+#downloadsListBox > richlistitem:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadDetailsButtonHover {
+  display: none;
+}
+
+.downloadButton {
+  appearance: none;
+  min-width: 32px;
+  height: 32px;
+  margin: 0;
+  margin-inline-start: 4px;
+  border: 1px solid transparent;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  border-radius: 4px;
+  --button-hover-bgcolor: var(--panel-item-hover-bgcolor);
+  --button-hover-color: inherit;
+  --button-active-bgcolor: var(--panel-item-active-bgcolor);
+  --button-active-color: inherit;
+}
+
+.downloadButton > .button-box > .button-icon {
+  width: 16px;
+  height: 16px;
+  margin: 1px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.downloadButton > .button-box > .button-text {
+  margin: 0 !important;
+  padding: 0;
+}
+
+@media (prefers-contrast) {
+  .downloadButton {
+    background-color: ButtonFace;
+    color: ButtonText;
+    border-color: currentColor;
+    --button-hover-bgcolor: SelectedItem;
+    --button-hover-color: SelectedItemText;
+    --button-active-bgcolor: ButtonFace;
+    --button-active-color: ButtonText;
+  }
+}
+
+.downloadButton:hover:not(:active) {
+  background-color: var(--button-hover-bgcolor);
+  color: var(--button-hover-color);
+  border-color: var(--button-hover-bgcolor);
+}
+.downloadButton:hover:active {
+  background-color: var(--button-active-bgcolor);
+  color: var(--button-active-color);
+}
+
+/*** Button icons ***/
+
+.downloadIconCancel > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/close.svg");
+}
+
+.downloadIconShow > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/folder.svg");
+}
+
+@media (-moz-platform: macos) {
+  .downloadIconShow > .button-box > .button-icon {
+    list-style-image: url("chrome://global/skin/icons/search-glass.svg");
+  }
+}
+
+.downloadIconRetry > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/reload.svg");
+}
+
+.downloadIconSubviewArrow > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
+}
+
+.downloadIconSubviewArrow > .button-box > .button-icon:-moz-locale-dir(ltr) {
+  list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
+}
+
+/*** Blocked subview ***/
+#downloadsPanel-blockedSubview-title {
+  font-size: calc(100% * var(--downloads-item-font-size-factor));
+  margin-bottom: 1.5em;
+}
+
+#downloadsPanel-blockedSubview-details1,
+#downloadsPanel-blockedSubview-details2 {
+  font-size: calc(100% * var(--downloads-item-font-size-factor));
+  margin-bottom: 0.5em;
+  opacity: var(--downloads-item-details-opacity);
+}
+
+/*** Toolbarseparator ***/
+#downloadsFooterButtons > toolbarseparator {
+  margin-inline: 0;
+}
diff --git a/browser/themes/shared/downloads/downloads.svg b/browser/themes/shared/downloads/downloads.svg
new file mode 100644
index 0000000000..a62f31b7e7
--- /dev/null
+++ b/browser/themes/shared/downloads/downloads.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.25.625a.625.625 0 0 0-1.25 0l0 8.323-3.308-3.309a.626.626 0 0 0-.885.885L7.285 11l.681 0 4.477-4.476a.626.626 0 0 0-.885-.885L8.25 8.947l0-8.322z"/>
+  <path d="M12.25 15a2 2 0 0 0 2-2l0-1.375a.625.625 0 0 0-1.25 0l0 1.525-.6.6-9.55 0-.6-.6 0-1.525a.625.625 0 0 0-1.25 0L1 13a2 2 0 0 0 2 2l9.25 0z"/>
+</svg>
diff --git a/browser/themes/shared/downloads/indicator.css b/browser/themes/shared/downloads/indicator.css
new file mode 100644
index 0000000000..875023f841
--- /dev/null
+++ b/browser/themes/shared/downloads/indicator.css
@@ -0,0 +1,211 @@
+/* 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/. */
+
+/*** Status and progress indicator ***/
+#downloads-button {
+  --download-progress-pcent: 0%;
+}
+
+#downloads-indicator-anchor {
+  min-width: 16px;
+  min-height: 16px;
+  -moz-context-properties: fill, fill-opacity;
+  list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
+}
+
+#downloads-button[progress] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon,
+#downloads-button[animate][notification] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon {
+  visibility: hidden;
+}
+
+#wrapper-downloads-button > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon {
+  visibility: visible;
+}
+
+#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon {
+  fill: var(--toolbarbutton-icon-fill-attention);
+  fill-opacity: 1;
+}
+
+#downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box {
+  pointer-events: none;
+  -moz-context-properties: fill, fill-opacity, stroke;
+  grid-area: initial;
+  top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */
+  left: calc(50% - 10px); /* Horizontally center the 20px wide animatable image */
+  width: 20px; /* Width of each frame within the SVG sprite */
+  height: 20px; /* Height of each frame within the SVG sprite */
+  /* Animation is not directional and shouldn't be reversed in RTL */
+  direction: ltr;
+  /* Revert to the xul.css user agent stylesheet's z-index value (auto) for
+  stack children, to ensure the badge (the last child of the stack) appears in
+  front of the animatable boxes */
+  z-index: revert;
+}
+
+/* Hide progress and state animations in customize mode */
+toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box,
+toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer {
+  display: none;
+}
+
+#downloads-indicator-start-box > .toolbarbutton-animatable-image,
+#downloads-indicator-finish-box > .toolbarbutton-animatable-image {
+  visibility: hidden;
+}
+
+/* Button progress indication */
+#downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer {
+  visibility: hidden;
+  top: calc(50% - 9px); /* Vertically center the 18px tall animatable image */
+  left: calc(50% - 9px); /* Horizontally center the 18px wide animatable image */
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1px solid currentColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#downloads-button[progress]:not([notification]) > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer {
+  visibility: visible;
+}
+
+#downloads-indicator-progress-inner {
+  width: 14px;
+  height: 14px;
+  /*
+    From javascript side we update the --download-progress-pcent variable to show the current progress
+   */
+  background: conic-gradient(var(--toolbarbutton-icon-fill-attention) var(--download-progress-pcent), transparent var(--download-progress-pcent));
+  border-radius: 50%;
+}
+
+/*** Status badges ***/
+
+#downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  display: block;
+  box-shadow: none;
+  /* "!important" is necessary to override the rule in toolbarbutton.css */
+  margin: -7px 0 0 !important;
+  margin-inline-end: -4px !important;
+  min-width: 12px;
+  min-height: 12px;
+  -moz-context-properties: fill;
+  background-size: 12px;
+}
+
+#downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  background: url(chrome://browser/skin/notification-fill-12.svg)  no-repeat center;
+  fill: var(--panel-banner-item-info-icon-bgcolor);
+}
+
+#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center;
+  fill: var(--warning-icon-bgcolor);
+}
+
+#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center;
+  fill: rgb(226,40,80);
+}
+
+toolbar[brighttext] #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  fill: rgb(255,132,138);
+}
+
+#downloads-button[animate] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  /* Don't display the badge until after the animation has cleared. */
+  display: none;
+}
+
+/*** Download notifications (transitions between downloading states) ***/
+
+#downloads-indicator-start-image {
+  --anim-steps: 16;
+
+  list-style-image: url("chrome://browser/skin/downloads/notification-start-animation.svg");
+  width: calc(20px * (var(--anim-steps) + 1));
+  height: 20px;
+
+  fill: currentColor;
+  fill-opacity: 1;
+  stroke: currentColor;
+
+  /* initial state for animation */
+  transform: translateX(0);
+}
+#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image {
+  /* Match the download icon color in the initial animation frames
+     to the current color of the indicator */
+  stroke: var(--toolbarbutton-icon-fill-attention);
+}
+#downloads-button[washidden] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image {
+  /* Hide the download icon in the first few animation frames, when the button was just un-hidden */
+  stroke: transparent;
+}
+
+#downloads-button[animate][notification="start"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image {
+  visibility: visible;
+  /* Upon changing the animation-duration below, please keep the
+     setTimeout() identical in indicator.js#_showNotification.
+  */
+  animation-name: downloadsButtonNotification;
+  animation-duration: calc(var(--anim-steps) * 16.667ms);
+  animation-timing-function: steps(var(--anim-steps));
+
+  /* end state for animation: */
+  transform: translateX(calc(var(--anim-steps) * -20px));
+}
+
+#downloads-indicator-finish-image {
+  --anim-frames: 26;
+  --anim-steps: calc(var(--anim-frames) + 100); /* Add 100 frames for doing the pause in the middle */
+
+  fill: var(--toolbarbutton-icon-fill-attention);
+  fill-opacity: 1;
+  stroke: var(--toolbarbutton-icon-fill-attention);
+
+  list-style-image: url("chrome://browser/skin/downloads/notification-finish-animation.svg");
+  width: calc(20px * (var(--anim-frames) + 1));
+  height: 20px;
+
+  /* initial state for animation */
+  transform: translateX(0);
+}
+#downloads-button[open] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image {
+ stroke: currentColor;
+}
+
+#downloads-button[animate][notification="finish"] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image {
+  visibility: visible;
+  animation-name: downloadsButtonFinishedNotification;
+  animation-duration: calc(var(--anim-steps) * 16.667ms);
+
+  /* end state for animation: */
+  transform: translateX(calc(var(--anim-frames) * -20px));
+}
+
+@keyframes downloadsButtonNotification {
+  from {
+    transform: translateX(0);
+  }
+}
+
+@keyframes downloadsButtonFinishedNotification {
+  from {
+    animation-timing-function: steps(18);
+    transform: translateX(0);
+  }
+  14.28% { /* 18th frame (18/126) */
+    transform: translateX(calc(18 * -20px));
+  }
+  93.65% { /* Wait 100 frames of time, but resume from 18th frame (118/126) */
+    animation-timing-function: steps(8);
+    transform: translateX(calc(18 * -20px));
+  }
+}
diff --git a/browser/themes/shared/downloads/notification-finish-animation.svg b/browser/themes/shared/downloads/notification-finish-animation.svg
new file mode 100644
index 0000000000..cef56f13f8
--- /dev/null
+++ b/browser/themes/shared/downloads/notification-finish-animation.svg
@@ -0,0 +1,193 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="540" height="20">
+  <defs>
+    <path fill="context-stroke" d="M10.109 2.55a.618.618 0 0 0-.207-.39.641.641 0 0 0-.418-.16.636.636 0 0 0-.625.55c0 0 0 8.45 0 8.45 0 0-3.31-3.36-3.31-3.36a.633.633 0 0 0-.88 0 .606.606 0 0 0-.187.44.62.62 0 0 0 .187.44c0 0 4.47 4.48 4.47 4.48 0 0 .72 0 .72 0 0 0 4.47-4.48 4.47-4.48a.604.604 0 0 0 0-.88.633.633 0 0 0-.88 0c0 0-3.34 3.36-3.34 3.36 0 0 0-8.45 0-8.45z" id="ab"/>
+    <path fill="context-stroke" d="M14.125 17a2 2 0 0 0 2-2c0 0 0-1.45 0-1.45a.625.625 0 0 0-.209-.39.632.632 0 0 0-.416-.16.636.636 0 0 0-.625.55c0 0 0 1.6 0 1.6 0 0-.601.6-.601.6 0 0-9.549 0-9.549 0 0 0-.6-.6-.6-.6 0 0 0-1.6 0-1.6A.638.638 0 0 0 3.5 13a.636.636 0 0 0-.625.55c0 0 0 1.45 0 1.45a2 2 0 0 0 2 2c0 0 9.25 0 9.25 0z" id="aa"/>
+    <path stroke="context-fill" stroke-width="1.8" d="M5.838 8.706c0 0 3.487 3.488 3.487 3.488 0 0 4.387-5.175 4.387-5.175" fill="none" id="i"/>
+    <path fill="#15141A" d="M-1.17 3c0 0-2.65-2.64-2.65-2.64a.625.625 0 0 1-.161-.7.638.638 0 0 1 .351-.35.625.625 0 0 1 .496.011.625.625 0 0 1 .204.149c0 0 2.07 2.08 2.07 2.08 0 0 3.79-3.8 3.79-3.8a.63.63 0 0 1 .89.89C3.82-1.36-.55 3-.55 3c0 0-.62 0-.62 0z" id="d"/>
+    <path stroke="context-fill" stroke-linecap="round" d="M9.991 1.6a8.4 8.4 0 1 1 0 16.8 8.4 8.4 0 0 1 0-16.8z" fill="none" stroke-width="1.05" id="c"/>
+    <path fill="context-fill" d="M0-4.752a4.753 4.753 0 1 0 .001 9.505A4.753 4.753 0 0 0 0-4.752z" id="b"/>
+    <path fill="none" stroke="context-fill" stroke-linecap="round" d="M0-8A8 8 0 1 1 0 8 8 8 0 0 1 0-8z" id="a"/>
+  </defs>
+  <svg viewBox="0 0 20 20" width="20" height="20">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="20">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="40">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="60">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="80">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="100">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="120">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="140">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="160">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="translate(10 10) scale(1.20948)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="180">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="translate(10 10) scale(.8747)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="200">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="translate(10 10) scale(.4753)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="220">
+    <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/>
+    <use transform="translate(10 10) scale(.14052)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="240">
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="260">
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="280">
+    <defs>
+      <mask id="e" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <g style="display:block" mask="url(#e)">
+      <path stroke="context-fill" stroke-width="1.8" d="M5.838 8.706c0 0 1.927 1.928 2.916 2.918" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="300">
+    <defs>
+      <mask id="f" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <g style="display:block" mask="url(#f)">
+      <path stroke="context-fill" stroke-width="1.8" d="M5.838 8.706c0 0 3.487 3.488 3.487 3.488 0 0 .802-.945 1.72-2.028" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="320">
+    <defs>
+      <mask id="g" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <g style="display:block" mask="url(#g)">
+      <path stroke="context-fill" stroke-width="1.8" d="M5.838 8.706c0 0 3.487 3.488 3.487 3.488 0 0 2.335-2.755 3.6-4.244" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="340">
+    <defs>
+      <mask id="h" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <g style="display:block" mask="url(#h)">
+      <use stroke="context-fill" stroke-width="1.8" fill="none" href="#i"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="360">
+    <defs>
+      <mask id="W" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <g style="display:block" mask="url(#W)">
+      <use stroke="context-fill" stroke-width="1.8" fill="none" href="#i"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="380">
+    <defs>
+      <mask id="X" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <g style="display:block" mask="url(#X)">
+      <use stroke="context-fill" stroke-width="1.8" fill="none" href="#i"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="400">
+    <defs>
+      <mask id="Y" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" opacity=".74" stroke-width="1.05" href="#c"/>
+    <path fill="context-fill" d="M9.752 9.485a.046.046 0 0 0-.016-.03.048.048 0 0 0-.03-.011.047.047 0 0 0-.047.04c0 0 0 .627 0 .627 0 0-.245-.249-.245-.249a.047.047 0 0 0-.076.015.046.046 0 0 0 .01.05c0 0 .332.333.332.333 0 0 .053 0 .053 0 0 0 .332-.333.332-.333a.045.045 0 0 0 0-.065.047.047 0 0 0-.066 0c0 0-.247.25-.247.25 0 0 0-.627 0-.627z" opacity=".3"/>
+    <g mask="url(#Y)">
+      <path stroke="context-fill" stroke-width="1.67" d="M6.146 8.802c0 0 3.23 3.23 3.23 3.23 0 0 4.061-4.792 4.061-4.792" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="420">
+    <defs>
+      <mask id="Z" mask-type="alpha">
+        <use fill="#15141A" transform="translate(10 10)" href="#d"/>
+      </mask>
+    </defs>
+    <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/>
+    <path fill="context-stroke" d="M10.465 18.111a.519.519 0 0 0 .52-.519c0 0 0-.376 0-.376a.164.164 0 0 0-.162-.143.165.165 0 0 0-.163.143c0 0 0 .415 0 .415 0 0-.156.156-.156.156 0 0-2.476 0-2.476 0 0 0-.156-.156-.156-.156 0 0 0-.415 0-.415a.163.163 0 0 0-.27-.101.16.16 0 0 0-.054.101c0 0 0 .376 0 .376a.519.519 0 0 0 .518.519c0 0 2.4 0 2.4 0z"/>
+    <path fill="context-stroke" d="M9.423 7.697a.16.16 0 0 0-.054-.1.166.166 0 0 0-.108-.042.165.165 0 0 0-.162.142c0 0 0 2.192 0 2.192 0 0-.859-.871-.859-.871a.164.164 0 0 0-.264.052.16.16 0 0 0 .036.176c0 0 1.16 1.162 1.16 1.162 0 0 .186 0 .186 0 0 0 1.16-1.162 1.16-1.162a.157.157 0 0 0 0-.228.164.164 0 0 0-.229 0c0 0-.866.871-.866.871 0 0 0-2.192 0-2.192z" opacity=".7"/>
+    <g style="display:block" mask="url(#Z)">
+      <path stroke="context-fill" stroke-width="1.33" d="M6.917 9.041c0 0 2.583 2.584 2.583 2.584 0 0 3.25-3.833 3.25-3.833" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="440">
+    <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/>
+    <use transform="matrix(0 0 0 0 10 10)" href="#b"/>
+    <path fill="context-stroke" d="M11.655 17.75a1 1 0 0 0 1-1c0 0 0-.725 0-.725a.316.316 0 0 0-.313-.275.318.318 0 0 0-.312.275c0 0 0 .8 0 .8 0 0-.301.3-.301.3 0 0-4.775 0-4.775 0 0 0-.3-.3-.3-.3 0 0 0-.8 0-.8a.314.314 0 0 0-.52-.195.31.31 0 0 0-.104.195c0 0 0 .725 0 .725a1 1 0 0 0 1 1c0 0 4.625 0 4.625 0z"/>
+    <path fill="context-stroke" d="M9.646 6.025a.31.31 0 0 0-.104-.195.32.32 0 0 0-.209-.08.318.318 0 0 0-.312.275c0 0 0 4.225 0 4.225 0 0-1.655-1.68-1.655-1.68a.317.317 0 0 0-.509.1.308.308 0 0 0 .069.34c0 0 2.235 2.24 2.235 2.24 0 0 .36 0 .36 0 0 0 2.235-2.24 2.235-2.24a.302.302 0 0 0 0-.44.317.317 0 0 0-.44 0c0 0-1.67 1.68-1.67 1.68 0 0 0-4.225 0-4.225z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="460">
+    <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/>
+    <path fill="context-stroke" d="M12.844 17.389a1.482 1.482 0 0 0 1.48-1.481c0 0 0-1.074 0-1.074a.468.468 0 0 0-.463-.407.471.471 0 0 0-.462.407c0 0 0 1.185 0 1.185 0 0-.445.444-.445.444 0 0-7.073 0-7.073 0 0 0-.444-.444-.444-.444 0 0 0-1.185 0-1.185a.466.466 0 0 0-.772-.289.459.459 0 0 0-.154.289c0 0 0 1.074 0 1.074a1.481 1.481 0 0 0 1.482 1.481c0 0 6.85 0 6.85 0z"/>
+    <path fill="context-stroke" d="M9.869 4.353a.458.458 0 0 0-.153-.29.475.475 0 0 0-.31-.118.47.47 0 0 0-.463.408c0 0 0 6.258 0 6.258 0 0-2.451-2.489-2.451-2.489a.469.469 0 0 0-.754.15.456.456 0 0 0 .102.502c0 0 3.31 3.318 3.31 3.318 0 0 .534 0 .534 0 0 0 3.31-3.318 3.31-3.318a.447.447 0 0 0 0-.652.469.469 0 0 0-.651 0c0 0-2.474 2.489-2.474 2.489 0 0 0-6.258 0-6.258z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="480">
+    <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/>
+    <path fill="context-stroke" d="M13.759 17.111a1.852 1.852 0 0 0 1.851-1.851c0 0 0-1.343 0-1.343a.585.585 0 0 0-.579-.51.59.59 0 0 0-.578.51c0 0 0 1.481 0 1.481 0 0-.556.556-.556.556 0 0-8.841 0-8.841 0 0 0-.556-.556-.556-.556 0 0 0-1.481 0-1.481a.591.591 0 0 0-.579-.51.59.59 0 0 0-.578.51c0 0 0 1.343 0 1.343a1.851 1.851 0 0 0 1.852 1.851c0 0 8.564 0 8.564 0z"/>
+    <path fill="context-stroke" d="M10.04 3.065a.572.572 0 0 0-.191-.36.593.593 0 0 0-.387-.149.589.589 0 0 0-.579.51c0 0 0 7.823 0 7.823 0 0-3.065-3.111-3.065-3.111a.586.586 0 0 0-.814 0 .561.561 0 0 0-.173.407.574.574 0 0 0 .173.408c0 0 4.138 4.147 4.138 4.147 0 0 .667 0 .667 0 0 0 4.138-4.147 4.138-4.147a.559.559 0 0 0 0-.815.586.586 0 0 0-.814 0c0 0-3.093 3.11-3.093 3.11 0 0 0-7.823 0-7.823z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="500">
+    <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/>
+    <use fill="context-stroke" href="#aa"/>
+    <use fill="context-stroke" href="#ab"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="520">
+    <use fill="context-fill" opacity=".26" stroke-width="1.05" href="#c"/>
+    <use fill="context-stroke" href="#aa"/>
+    <use fill="context-stroke" href="#ab"/>
+  </svg>
+</svg>
diff --git a/browser/themes/shared/downloads/notification-start-animation.svg b/browser/themes/shared/downloads/notification-start-animation.svg
new file mode 100644
index 0000000000..14e3061657
--- /dev/null
+++ b/browser/themes/shared/downloads/notification-start-animation.svg
@@ -0,0 +1,144 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="340" height="20">
+  <defs>
+    <path d="M14.441 17a2 2 0 0 0 2-2c0 0 0-1.45 0-1.45a.625.625 0 0 0-.209-.39.632.632 0 0 0-.416-.16.636.636 0 0 0-.625.55c0 0 0 1.6 0 1.6 0 0-.601.6-.601.6 0 0-9.549 0-9.549 0 0 0-.6-.6-.6-.6 0 0 0-1.6 0-1.6a.638.638 0 0 0-.625-.55.636.636 0 0 0-.625.55c0 0 0 1.45 0 1.45a2 2 0 0 0 2 2c0 0 9.25 0 9.25 0z" id="tray"/>
+  </defs>
+  <defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625a8.59 8.59 0 0 1-5.131-1.692" fill="none" stroke-width="1.15" id="q"/>
+    <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 .062 0 .062 0 0 0 0-5.562 0-5.562 0 0-.062 0-.062 0" id="h"/>
+  </defs>
+  <svg viewBox="0 0 20 20" width="20" height="20">
+    <use fill="context-stroke" href="#tray"/>
+    <path fill="context-stroke" d="M10.109 2.55a.618.618 0 0 0-.207-.39.641.641 0 0 0-.418-.16.636.636 0 0 0-.625.55c0 0 0 8.45 0 8.45 0 0-3.31-3.36-3.31-3.36a.633.633 0 0 0-.88 0 .606.606 0 0 0-.187.44.62.62 0 0 0 .187.44c0 0 4.47 4.48 4.47 4.48 0 0 .72 0 .72 0 0 0 4.47-4.48 4.47-4.48a.604.604 0 0 0 0-.88.633.633 0 0 0-.88 0c0 0-3.34 3.36-3.34 3.36 0 0 0-8.45 0-8.45z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="20">
+    <defs>
+      <clipPath id="b">
+        <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 13.41 0 13.41 0 0 0 0-5.562 0-5.562 0 0-13.41 0-13.41 0"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#b)">
+      <use fill="context-stroke" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M10.1 2.621a.612.612 0 0 0-.205-.386.634.634 0 0 0-.414-.158.63.63 0 0 0-.619.544c0 0 0 8.364 0 8.364 0 0-3.276-3.326-3.276-3.326a.627.627 0 0 0-.87 0 .6.6 0 0 0-.186.436.614.614 0 0 0 .185.435c0 0 4.424 4.434 4.424 4.434 0 0 .713 0 .713 0 0 0 4.424-4.434 4.424-4.434a.597.597 0 0 0 0-.87.627.627 0 0 0-.87 0c0 0-3.307 3.325-3.307 3.325 0 0 0-8.364 0-8.364z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="40">
+    <defs>
+      <clipPath id="c">
+        <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 11.167 0 11.167 0 0 0 0-5.562 0-5.562 0 0-11.167 0-11.167 0"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#c)">
+        <use fill="context-stroke" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M10.064 2.889a.588.588 0 0 0-.197-.371.61.61 0 0 0-.398-.152.605.605 0 0 0-.594.523c0 0 0 8.038 0 8.038 0 0-3.149-3.196-3.149-3.196a.602.602 0 0 0-.837 0 .577.577 0 0 0-.178.418.59.59 0 0 0 .178.419c0 0 4.252 4.261 4.252 4.261 0 0 .685 0 .685 0 0 0 4.252-4.261 4.252-4.261a.574.574 0 0 0 0-.837.602.602 0 0 0-.837 0c0 0-3.177 3.196-3.177 3.196 0 0 0-8.038 0-8.038z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="60">
+    <defs>
+      <clipPath id="d">
+        <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 8.7 0 8.7 0 0 0 0-5.562 0-5.562 0 0-8.7 0-8.7 0"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#d)">
+      <use fill="context-stroke" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M9.974 3.56a.528.528 0 0 0-.177-.333.548.548 0 0 0-.357-.136.543.543 0 0 0-.534.47c0 0 0 7.22 0 7.22 0 0-2.829-2.87-2.829-2.87a.541.541 0 0 0-.752 0 .518.518 0 0 0-.16.376.53.53 0 0 0 .16.376c0 0 3.82 3.828 3.82 3.828 0 0 .616 0 .616 0 0 0 3.82-3.828 3.82-3.828a.516.516 0 0 0 0-.753.541.541 0 0 0-.752 0c0 0-2.855 2.872-2.855 2.872 0 0 0-7.221 0-7.221z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="80">
+    <defs>
+      <clipPath id="e">
+        <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 6.174 0 6.174 0 0 0 0-5.562 0-5.562 0 0-6.174 0-6.174 0"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933a8.628 8.628 0 0 1-1.38-1.275" fill="none" stroke-width="1.15"/>
+    <g clip-path="url(#e)">
+      <use fill="context-stroke" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M9.759 5.18a.384.384 0 0 0-.13-.242.398.398 0 0 0-.259-.1.395.395 0 0 0-.388.342c0 0 0 5.252 0 5.252 0 0-2.058-2.088-2.058-2.088a.393.393 0 0 0-.632.125.383.383 0 0 0 .085.422c0 0 2.779 2.784 2.779 2.784 0 0 .447 0 .447 0 0 0 2.778-2.784 2.778-2.784a.375.375 0 0 0 0-.547.393.393 0 0 0-.547 0c0 0-2.075 2.088-2.075 2.088 0 0 0-5.252 0-5.252z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="100">
+    <defs>
+      <clipPath id="f">
+        <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 3.707 0 3.707 0 0 0 0-5.562 0-5.562 0 0-3.707 0-3.707 0"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933a8.648 8.648 0 0 1-3.016-4.091" fill="none" stroke-width="1.15"/>
+    <g clip-path="url(#f)">
+      <use fill="context-stroke" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M9.51 7.041a.219.219 0 0 0-.073-.138.227.227 0 0 0-.148-.056.225.225 0 0 0-.22.194c0 0 0 2.99 0 2.99 0 0-1.172-1.189-1.172-1.189a.224.224 0 0 0-.36.071.218.218 0 0 0 .05.24c0 0 1.58 1.585 1.58 1.585 0 0 .255 0 .255 0 0 0 1.581-1.585 1.581-1.585a.213.213 0 0 0 0-.311.224.224 0 0 0-.31 0c0 0-1.182 1.189-1.182 1.189 0 0 0-2.99 0-2.99z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="120">
+    <defs>
+      <clipPath id="g">
+        <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 1.464 0 1.464 0 0 0 0-5.562 0-5.562 0 0-1.464 0-1.464 0"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.612 8.612 0 0 1 1.375 10a8.58 8.58 0 0 1 1.569-4.961" fill="none" stroke-width="1.15"/>
+    <g clip-path="url(#g)">
+      <use fill="context-stroke" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M9.375 8.06a.128.128 0 0 0-.043-.08.133.133 0 0 0-.087-.034.132.132 0 0 0-.13.114c0 0 0 1.75 0 1.75 0 0-.685-.695-.685-.695a.131.131 0 0 0-.21.041.128.128 0 0 0 .028.141c0 0 .926.928.926.928 0 0 .149 0 .149 0 0 0 .926-.928.926-.928a.125.125 0 0 0 0-.182.131.131 0 0 0-.182 0c0 0-.692.696-.692.696 0 0 0-1.75 0-1.75z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="140">
+    <defs>
+      <clipPath id="i">
+        <use fill="#fff" href="#h"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375a8.623 8.623 0 0 1 7.542 4.437" fill="none" stroke-width="1.15"/>
+    <path fill="context-stroke" d="M9.296 8.65a.076.076 0 0 0-.025-.047.078.078 0 0 0-.051-.02.078.078 0 0 0-.077.067c0 0 0 1.033 0 1.033 0 0-.404-.41-.404-.41a.077.077 0 0 0-.125.024.075.075 0 0 0 .017.083c0 0 .547.548.547.548 0 0 .088 0 .088 0 0 0 .546-.548.546-.548a.074.074 0 0 0 0-.107.077.077 0 0 0-.107 0c0 0-.409.41-.409.41 0 0 0-1.033 0-1.033z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="160">
+    <defs>
+      <clipPath id="j">
+        <use fill="#fff" href="#h"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10c0 1.918-.626 3.69-1.685 5.122" fill="none" stroke-width="1.15"/>
+    <path fill="context-stroke" d="M9.247 9.02a.043.043 0 0 0-.014-.028.044.044 0 0 0-.03-.011.044.044 0 0 0-.042.038c0 0 0 .585 0 .585 0 0-.23-.233-.23-.233a.044.044 0 0 0-.07.014.043.043 0 0 0 .01.047c0 0 .309.31.309.31 0 0 .05 0 .05 0 0 0 .31-.31.31-.31a.042.042 0 0 0 0-.06.044.044 0 0 0-.062 0c0 0-.23.232-.23.232 0 0 0-.585 0-.585z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="180">
+    <defs>
+      <clipPath id="k">
+        <use fill="#fff" href="#h"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10a8.626 8.626 0 0 1-5.747 8.133" fill="none" stroke-width="1.15"/>
+    <g clip-path="url(#k)">
+      <use fill="context-fill" href="#tray"/>
+    </g>
+    <path fill="context-stroke" d="M9.216 9.254a.022.022 0 0 0-.008-.014.023.023 0 0 0-.014-.006.023.023 0 0 0-.022.02c0 0 0 .3 0 .3 0 0-.118-.12-.118-.12a.022.022 0 0 0-.036.007.022.022 0 0 0 .005.024c0 0 .158.16.158.16 0 0 .026 0 .026 0 0 0 .158-.16.158-.16a.021.021 0 0 0 0-.031.022.022 0 0 0-.03 0c0 0-.12.12-.12.12 0 0 0-.3 0-.3z"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="200">
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10a8.624 8.624 0 0 1-8.865 8.622" fill="none" stroke-width="1.15"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="220">
+    <defs>
+      <clipPath id="m">
+        <use fill="#fff" href="#h"/>
+      </clipPath>
+    </defs>
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625c-.8 0-1.574-.11-2.31-.313" fill="none" stroke-width="1.15"/>
+    <g clip-path="url(#m)">
+      <use fill="context-fill" href="#tray"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="240">
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625a8.582 8.582 0 0 1-3.633-.8" fill="none" stroke-width="1.15"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="260">
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625a8.578 8.578 0 0 1-4.444-1.232" fill="none" stroke-width="1.15"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="280">
+    <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625a8.586 8.586 0 0 1-4.912-1.534" fill="none" stroke-width="1.15"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="300">
+    <use stroke-linecap="round" stroke="context-fill" fill="none" stroke-width="1.15" href="#q"/>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="320">
+    <use stroke-linecap="round" stroke="context-fill" fill="none" stroke-width="1.15" href="#q"/>
+  </svg>
+</svg>
diff --git a/browser/themes/shared/downloads/progressmeter.css b/browser/themes/shared/downloads/progressmeter.css
new file mode 100644
index 0000000000..892cea7135
--- /dev/null
+++ b/browser/themes/shared/downloads/progressmeter.css
@@ -0,0 +1,95 @@
+/* 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/. */
+
+/*** Common-styled progressmeter ***/
+
+:root {
+  --download-progress-fill-color: AccentColor;
+  --download-progress-paused-color: GrayText;
+  --download-progress-flare-color: rgba(255,255,255,0.75);
+}
+
+/* download progress bar is used in contexts which are not LightweightThemeConsumers and
+   do not get the lwt- theme variables. So we duplicate the fallbacks here. */
+:root:-moz-lwtheme {
+  --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,97,224));
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:-moz-lwtheme {
+    --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255));
+  }
+  #contentAreaDownloadsView {
+    --download-progress-fill-color: var(--in-content-item-selected);
+  }
+}
+
+:root[lwt-popup-brighttext] panel,
+toolbar[brighttext]:-moz-lwtheme {
+  --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255));
+}
+
+/*
+ * Styling "html:progress" is limited by the fact that a number of properties
+ * are intentionally locked at the UA stylesheet level. We have to use a border
+ * instead of an outline because the latter would be drawn over the progress
+ * bar and we cannot change its z-index. This means we have to use a negative
+ * margin, except when the value is zero, and adjust the width calculation for
+ * the indeterminate state.
+ */
+
+.downloadProgress {
+  appearance: none;
+  display: -moz-box;
+  margin-block: 5px 1px;
+  /* This value is kinda odd, it's used to align with the edge of the badge,
+   * if shown, which is inside the edge of the image (the image gets 16px
+   * margin). */
+  margin-inline-end: 18px;
+  border: none;
+  height: 4px;
+  border-radius: 2px;
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
+}
+
+/* Ensure we have contrast in selected download items */
+#downloadsListBox.allDownloadsListBox richlistitem[selected] .downloadProgress::-moz-progress-bar {
+  --download-progress-fill-color: currentColor;
+  --download-progress-flare-color: AccentColor;
+}
+
+.downloadProgress::-moz-progress-bar {
+  appearance: none;
+  background-color: var(--download-progress-fill-color);
+  border-radius: 2px;
+}
+
+.downloadProgress[paused]::-moz-progress-bar {
+  background-color: var(--download-progress-paused-color);
+}
+
+.downloadProgress:indeterminate::-moz-progress-bar {
+  width: calc(100% + 2px);
+  /* Make a white reflecting animation.
+     Create a gradient with 2 identical patterns, and enlarge the size to 200%.
+     This allows us to animate background-position with percentage. */
+  background-color: var(--download-progress-fill-color);
+  background-image: linear-gradient(90deg, transparent 0%,
+                                           var(--download-progress-flare-color) 25%,
+                                           transparent 50%,
+                                           var(--download-progress-flare-color) 75%,
+                                           transparent 100%);
+  background-blend-mode: normal;
+  background-size: 200% 100%;
+  animation: downloadProgressSlideX 1.5s linear infinite;
+}
+
+@keyframes downloadProgressSlideX {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
diff --git a/browser/themes/shared/drm-icon.svg b/browser/themes/shared/drm-icon.svg
new file mode 100644
index 0000000000..8b510a1c53
--- /dev/null
+++ b/browser/themes/shared/drm-icon.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M7.058,9.72c-0.245,0.245-0.62,0.27-0.834,0.056C6.01,9.562,6.035,9.186,6.28,8.942l0.218-0.218 c-0.245-0.245-0.645-0.245-0.89,0L4.496,9.836c-0.245,0.245-0.245,0.645,0,0.89l0.779,0.779c0.245,0.245,0.645,0.245,0.89,0 l1.112-1.112c0.245-0.245,0.245-0.645,0-0.89L7.058,9.72z"/>
+  <path d="M10.726,4.496c-0.245-0.245-0.645-0.245-0.89,0L8.723,5.608c-0.245,0.245-0.245,0.645,0,0.89 L8.95,6.272c0.245-0.245,0.62-0.27,0.834-0.056s0.189,0.59-0.056,0.834L9.502,7.277c0.245,0.245,0.645,0.245,0.89,0l1.112-1.112 c0.245-0.245,0.245-0.645,0-0.89L10.726,4.496z"/>
+  <path d="M8,0C3.582,0,0,3.582,0,8s3.582,8,8,8s8-3.582,8-8S12.418,0,8,0z M12.527,6.81l-1.489,1.489 c-0.631,0.631-1.663,0.631-2.293,0L8.612,8.167L8.167,8.612l0.133,0.133c0.631,0.631,0.631,1.663,0,2.293L6.81,12.527 c-0.631,0.631-1.663,0.631-2.293,0l-1.044-1.044c-0.631-0.631-0.631-1.663,0-2.293l1.489-1.489c0.631-0.631,1.663-0.631,2.293,0 l0.133,0.133l0.445-0.445L7.701,7.255c-0.631-0.631-0.631-1.663,0-2.293L9.19,3.473c0.631-0.631,1.663-0.631,2.293,0l1.044,1.044 C13.158,5.148,13.158,6.18,12.527,6.81z"/>
+</svg>
diff --git a/browser/themes/shared/e10s-64@2x.png b/browser/themes/shared/e10s-64@2x.png
new file mode 100644
index 0000000000..7bc8a60e18
--- /dev/null
+++ b/browser/themes/shared/e10s-64@2x.png
diff --git a/browser/themes/shared/fullscreen/warning.css b/browser/themes/shared/fullscreen/warning.css
new file mode 100644
index 0000000000..fc1c203a78
--- /dev/null
+++ b/browser/themes/shared/fullscreen/warning.css
@@ -0,0 +1,50 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+html|*.pointerlockfswarning {
+  align-items: center;
+  background: rgba(45, 62, 72, 0.9);
+  border: 2px solid currentColor;
+  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
+  border-radius: 8px;
+  color: #fafafa;
+  padding: 24px 16px;
+  font: message-box;
+}
+
+html|*.pointerlockfswarning:is([data-identity="verifiedDomain"], [data-identity="unknownIdentity"])::before {
+  content: "";
+  background-size: cover;
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
+  background-image: url("chrome://global/skin/icons/security.svg");
+}
+
+html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
+  background-image: url("chrome://global/skin/icons/security-broken.svg");
+}
+
+html|*.pointerlockfswarning-domain-text,
+html|*.pointerlockfswarning-generic-text {
+  font-size: 21px;
+  font-weight: lighter;
+  margin: 0 16px;
+}
+
+html|*.pointerlockfswarning-domain {
+  font-weight: bold;
+  margin: 0;
+}
+
+html|*#fullscreen-exit-button {
+  margin: 0;
+}
diff --git a/browser/themes/shared/fxa/add-device.svg b/browser/themes/shared/fxa/add-device.svg
new file mode 100644
index 0000000000..361095bae7
--- /dev/null
+++ b/browser/themes/shared/fxa/add-device.svg
@@ -0,0 +1,4 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 5h-3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm-3 8V7h3v6z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M2 3h8v1h2V3a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3v1H3a1 1 0 0 0 0 2h5v-2H7v-1h1V9H2z"/></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/fxa/avatar-color.svg b/browser/themes/shared/fxa/avatar-color.svg
new file mode 100644
index 0000000000..5a87586b35
--- /dev/null
+++ b/browser/themes/shared/fxa/avatar-color.svg
@@ -0,0 +1,11 @@
+<!-- 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 enable-background="new 0 0 76.8 76.8" viewBox="0 0 76.8 76.8" xmlns="http://www.w3.org/2000/svg">
+  <linearGradient id="a" gradientTransform="matrix(1.3333 0 0 -1.3333 118.8667 193.9333)" gradientUnits="userSpaceOnUse" x1="-92.971" x2="-32.8" y1="81.79" y2="146.09">
+    <stop offset=".26" stop-color="#9059ff"/>
+    <stop offset=".96" stop-color="#00b3f4"/>
+  </linearGradient>
+  <circle cx="38.4" cy="38.4" fill="#fbfbfe" r="32.7"/>
+  <path d="m38.4 0c-21.2 0-38.4 17.2-38.4 38.4s17.2 38.4 38.4 38.4 38.4-17.2 38.4-38.4-17.2-38.4-38.4-38.4zm0 11c9.1 0 16.5 7.4 16.5 16.5s-7.4 16.5-16.5 16.5-16.5-7.4-16.5-16.5c0-9.2 7.4-16.5 16.5-16.5zm22.6 42.8c-8.4 12.5-25.3 15.8-37.7 7.4-2.9-2-5.5-4.5-7.4-7.4-1.4-2.1-1.2-4.8.4-6.7 5.8-6.7 13.8 2.3 22.2 2.3s16.4-9 22.2-2.3c1.5 1.9 1.7 4.6.3 6.7z" fill="url(#a)"/>
+</svg>
diff --git a/browser/themes/shared/fxa/avatar-empty.svg b/browser/themes/shared/fxa/avatar-empty.svg
new file mode 100644
index 0000000000..9f7a8266f7
--- /dev/null
+++ b/browser/themes/shared/fxa/avatar-empty.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.5 13.25c1.912 0 3.571-1.038 4.489-2.569A1.993 1.993 0 0 0 11.495 10l-5.99 0c-.596 0-1.126.267-1.494.681.918 1.531 2.577 2.569 4.489 2.569z"/>
+  <path d="M8.5 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/>
+  <path d="M8.5 2.25c3.446 0 6.25 2.804 6.25 6.25s-2.804 6.25-6.25 6.25-6.25-2.804-6.25-6.25S5.054 2.25 8.5 2.25M8.5 1a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15z"/>
+</svg>
diff --git a/browser/themes/shared/fxa/avatar.svg b/browser/themes/shared/fxa/avatar.svg
new file mode 100644
index 0000000000..9391f57540
--- /dev/null
+++ b/browser/themes/shared/fxa/avatar.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.5 1a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm0 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zm0 9.75c-1.912 0-3.571-1.038-4.489-2.569A1.993 1.993 0 0 1 5.505 11l5.99 0c.596 0 1.126.267 1.494.681-.918 1.531-2.577 2.569-4.489 2.569z"/>
+</svg>
diff --git a/browser/themes/shared/fxa/fxa-spinner.svg b/browser/themes/shared/fxa/fxa-spinner.svg
new file mode 100644
index 0000000000..1c3c739cf5
--- /dev/null
+++ b/browser/themes/shared/fxa/fxa-spinner.svg
@@ -0,0 +1,28 @@
+<!-- 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="73px" height="73px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <defs>
+        <linearGradient x1="93.0928096%" y1="52.7734375%" x2="68.5133398%" y2="119.326007%" id="linearGradient-1">
+            <stop stop-color="#0A84FF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#0A84FF" offset="69.3698182%"></stop>
+            <stop stop-color="#0A84FF" offset="100%"></stop>
+            <stop stop-color="#2484C6" stop-opacity="0.00477766951" offset="100%"></stop>
+            <stop stop-color="#2484C6" stop-opacity="0" offset="100%"></stop>
+            <stop stop-color="#2484C6" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="48" height="60"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Shape" transform="translate(-5.000000, -1.000000)">
+            <path d="M41.8,73.8 C21.9,73.8 5.8,57.7 5.8,37.8 C5.8,18.1 21.6,2.2 41.1,1.8 C41.3,1.8 41.4,1.8 41.4,1.8 C41.5,1.8 41.7,1.8 41.8,1.8 C44.6,2.2 46.8,4.5 46.8,7.3 C46.8,10.1 44.6,12.5 41.8,12.7 C28,12.8 16.8,24 16.8,37.8 C16.8,51.6 28,62.8 41.8,62.8 C55.6,62.8 66.8,51.6 66.8,37.8 L77.8,37.8 C77.8,57.7 61.7,73.8 41.8,73.8 Z" fill="url(#linearGradient-1)"></path>
+            <mask id="mask-3" fill="white">
+                <use href="#path-2"></use>
+            </mask>
+            <g id="Mask"></g>
+            <path d="M41.8,73.8 C21.9,73.8 5.8,57.7 5.8,37.8 C5.8,18.1 21.6,2.2 41.1,1.8 C41.3,1.8 41.4,1.8 41.4,1.8 C41.5,1.8 41.7,1.8 41.8,1.8 C44.6,2.2 46.8,4.5 46.8,7.3 C46.8,10.1 44.6,12.5 41.8,12.7 C28,12.8 16.8,24 16.8,37.8 C16.8,51.6 28,62.8 41.8,62.8 C55.6,62.8 66.8,51.6 66.8,37.8 L77.8,37.8 C77.8,57.7 61.7,73.8 41.8,73.8 Z" fill="#0A84FF" mask="url(#mask-3)"></path>
+        </g>
+    </g>
+</svg>
diff --git a/browser/themes/shared/fxa/monitor.svg b/browser/themes/shared/fxa/monitor.svg
new file mode 100644
index 0000000000..04df0e0029
--- /dev/null
+++ b/browser/themes/shared/fxa/monitor.svg
@@ -0,0 +1,4 @@
+<!-- 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 height="16" width="16" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="11.048" x2="3.442" y1="1.867" y2="15.04"><stop offset="0" stop-color="#ff9640"/><stop offset=".6" stop-color="#fc4055"/><stop offset="1" stop-color="#e31587"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="11.048" x2="3.442" y1="1.867" y2="15.04"><stop offset="0" stop-color="#fff36e" stop-opacity=".8"/><stop offset=".094" stop-color="#fff36e" stop-opacity=".699"/><stop offset=".752" stop-color="#fff36e" stop-opacity="0"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="7.47" x2="13.655" y1="10.491" y2="4.306"><stop offset="0" stop-color="#0090ed"/><stop offset=".325" stop-color="#5b6df8"/><stop offset=".529" stop-color="#9059ff"/><stop offset="1" stop-color="#b833e1"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="12.222" x2="14.968" y1="13.939" y2="6.773"><stop offset="0" stop-color="#054096" stop-opacity=".5"/><stop offset=".054" stop-color="#0f3d9c" stop-opacity=".441"/><stop offset=".261" stop-color="#2f35b1" stop-opacity=".249"/><stop offset=".466" stop-color="#462fbf" stop-opacity=".111"/><stop offset=".669" stop-color="#542bc8" stop-opacity=".028"/><stop offset=".864" stop-color="#592acb" stop-opacity="0"/></linearGradient><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="8.46" x2="14.98" y1="1.312" y2="6.859"><stop offset="0" stop-color="#722291" stop-opacity=".5"/><stop offset=".5" stop-color="#722291" stop-opacity="0"/></linearGradient><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="9.229" x2="10.299" y1="11.053" y2="12.327"><stop offset="0" stop-color="#960e18" stop-opacity=".6"/><stop offset=".192" stop-color="#ac1624" stop-opacity=".476"/><stop offset=".579" stop-color="#e42c41" stop-opacity=".156"/><stop offset=".75" stop-color="#ff3750" stop-opacity="0"/></linearGradient><symbol id="g" viewBox="0 0 15 15.929"><path d="m13.7 3.049-5-2.741a2.5 2.5 0 0 0 -2.4 0l-5 2.741a2.5 2.5 0 0 0 -1.3 2.192v5.566a2.5 2.5 0 0 0 1.264 2.173l4.954 2.82a.99.99 0 0 0 .493.131 1 1 0 0 0 .5-1.869l-4.453-2.532a1.5 1.5 0 0 1 -.758-1.304v-4.393a1.5 1.5 0 0 1 .779-1.315l4-2.193a1.5 1.5 0 0 1 1.442 0l4 2.193a1.5 1.5 0 0 1 .779 1.315v4.351a1.5 1.5 0 0 1 -.791 1.322l-1.007.54-.834-1.34a3.992 3.992 0 1 0 -2.868 1.223 3.953 3.953 0 0 0 1.156-.19l1.344 2.161a1 1 0 0 0 1.321.353l2.361-1.267a2.5 2.5 0 0 0 1.318-2.204v-5.541a2.5 2.5 0 0 0 -1.3-2.192zm-8.2 4.88a2 2 0 1 1 2 2 2 2 0 0 1 -2-2z" fill="url(#a)"/><path d="m13.7 3.049-5-2.741a2.5 2.5 0 0 0 -2.4 0l-5 2.741a2.5 2.5 0 0 0 -1.3 2.192v5.566a2.5 2.5 0 0 0 1.264 2.173l4.954 2.82a.99.99 0 0 0 .493.131 1 1 0 0 0 .5-1.869l-4.453-2.532a1.5 1.5 0 0 1 -.758-1.304v-4.393a1.5 1.5 0 0 1 .779-1.315l4-2.193a1.5 1.5 0 0 1 1.442 0l4 2.193a1.5 1.5 0 0 1 .779 1.315v4.351a1.5 1.5 0 0 1 -.791 1.322l-1.007.54-.834-1.34a3.992 3.992 0 1 0 -2.868 1.223 3.953 3.953 0 0 0 1.156-.19l1.344 2.161a1 1 0 0 0 1.321.353l2.361-1.267a2.5 2.5 0 0 0 1.318-2.204v-5.541a2.5 2.5 0 0 0 -1.3-2.192zm-8.2 4.88a2 2 0 1 1 2 2 2 2 0 0 1 -2-2z" fill="url(#b)"/><use height="-32766" transform="translate(16390.518 16390.929)" width="-32766" href="#c"/><path d="m13.288 13.2.394-.211a2.5 2.5 0 0 0 1.318-2.207v-5.541a2.5 2.5 0 0 0 -1.3-2.192l-2.47-1.355a3.434 3.434 0 0 0 -3.305 0l-1.146.63a1.5 1.5 0 0 1 1.442 0l4 2.193a1.5 1.5 0 0 1 .779 1.316v4.351a1.5 1.5 0 0 1 -.791 1.322l-1.007.54.429.7a1.249 1.249 0 0 0 1.657.454z" fill="url(#c)"/><path d="m13 10.184a1.5 1.5 0 0 1 -.791 1.322l-1.007.54.429.7a1.25 1.25 0 0 0 1.658.449l.393-.211a2.5 2.5 0 0 0 1.318-2.203v-2.817h-2z" fill="url(#d)" opacity=".9"/><path d="m13.7 3.049-2.47-1.355a3.434 3.434 0 0 0 -3.305 0l-1.146.63a1.5 1.5 0 0 1 1.442 0l4 2.193a1.5 1.5 0 0 1 .779 1.316v2.131h2v-2.723a2.5 2.5 0 0 0 -1.3-2.192z" fill="url(#e)"/><path d="m11.2 12.046-.834-1.34a3.991 3.991 0 0 1 -1.713 1.033l.808 1.3z" fill="url(#f)" opacity=".9"/></symbol><use height="15.929" transform="translate(.5 .071)" width="15" href="#g"/></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/fxa/send-to-device.svg b/browser/themes/shared/fxa/send-to-device.svg
new file mode 100644
index 0000000000..0d6e6a4253
--- /dev/null
+++ b/browser/themes/shared/fxa/send-to-device.svg
@@ -0,0 +1,4 @@
+<!-- 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 viewBox="0 0 164 119" xmlns="http://www.w3.org/2000/svg"><radialGradient id="b" cx="-309.624" cy="363.081" gradientTransform="matrix(117 0 0 -117 36334.738 42578)" gradientUnits="userSpaceOnUse" r=".951"><stop offset=".4" stop-color="#cdcdd4" stop-opacity="0"/><stop offset=".58" stop-color="#cdcdd4" stop-opacity=".02"/><stop offset=".77" stop-color="#cdcdd4" stop-opacity=".08"/><stop offset=".96" stop-color="#cdcdd4" stop-opacity=".18"/><stop offset="1" stop-color="#cdcdd4" stop-opacity=".2"/></radialGradient><radialGradient id="c" cx="-300.138" cy="354.335" gradientTransform="matrix(27 0 0 -27 8164.136 9661.001)" gradientUnits="userSpaceOnUse" r="3.274"><stop offset=".26" stop-color="#cdcdd4" stop-opacity="0"/><stop offset=".4" stop-color="#cdcdd4" stop-opacity=".02"/><stop offset=".55" stop-color="#cdcdd4" stop-opacity=".08"/><stop offset=".69" stop-color="#cdcdd4" stop-opacity=".18"/><stop offset=".72" stop-color="#cdcdd4" stop-opacity=".2"/></radialGradient><radialGradient id="d" cx="-305.732" cy="357.242" gradientTransform="matrix(40 0 0 -40 12282.452 14394)" gradientUnits="userSpaceOnUse" r="3.229"><stop offset=".27" stop-color="#cdcdd4" stop-opacity="0"/><stop offset=".46" stop-color="#cdcdd4" stop-opacity=".02"/><stop offset=".66" stop-color="#cdcdd4" stop-opacity=".08"/><stop offset=".86" stop-color="#cdcdd4" stop-opacity=".18"/><stop offset=".9" stop-color="#cdcdd4" stop-opacity=".2"/></radialGradient><linearGradient id="a"><stop offset=".22" stop-color="#b833e1"/><stop offset=".91" stop-color="#ff4f5e"/></linearGradient><linearGradient id="e" gradientTransform="matrix(47 0 0 -75 14493.74 27225)" gradientUnits="userSpaceOnUse" x1="-306.295" x2="-305.345" href="#a" y1="361.401" y2="363.112"/><linearGradient id="f" gradientTransform="matrix(13 0 0 -5 3838.739 1639)" gradientUnits="userSpaceOnUse" x1="-290.414" x2="-286.415" href="#a" y1="315.51" y2="317.029"/><linearGradient id="g" gradientTransform="matrix(28 0 0 -36 8546.74 12970)" gradientUnits="userSpaceOnUse" x1="-301.569" x2="-301.162" y1="358.334" y2="358.927"><stop offset="0" stop-color="#ff298a"/><stop offset="1" stop-color="#ff6a75"/></linearGradient><circle cx="85.2" cy="60.5" fill="url(#b)" r="58.5"/><path d="M47.7 43.9c0 4.5-3.6 8.1-8.2 8.1H6.8c-3.4-.1-6-2.9-6-6.2s2.7-6.1 6-6.2c.5 0 1 .1 1.5.2-.1-.5-.2-1-.2-1.4 0-2.4 1.3-4.6 3.4-5.7s4.7-1 6.7.4c1.4-5.2 6.5-8.6 11.9-7.9s9.5 5.2 9.5 10.6c4.5 0 8.2 3.6 8.1 8.1z" fill="url(#c)"/><path d="M154.1 21.6c-.8 0-1.5.1-2.2.3.9-3.8-.7-7.8-4-10s-7.6-2.2-10.9 0C134.9 4.1 127.3-.9 119.2.1S105 7.9 105 15.9c-6.8 0-12.2 5.4-12.2 12s5.5 12 12.2 12h49.2c3.4.1 6.6-1.6 8.3-4.5s1.7-6.5 0-9.3-5-4.6-8.4-4.5z" fill="url(#d)"/><path d="M77.7 74.8V41.4c0-1.9-1.5-3.4-3.4-3.4H29.1c-1.9 0-3.4 1.5-3.4 3.4v32.3c0 1.9 1.5 3.4 3.4 3.4h46.3c1.3-.1 2.3-1.1 2.3-2.3zm-2.2-32.3H27.8v-1.1c0-.6.5-1.1 1.1-1.1h45.4c.6 0 1.1.5 1.1 1.1z" fill="#b1b1bc"/><path d="M101.1 21h36.2c3 0 5.4 2.4 5.4 5.4v64.2c0 3-2.4 5.4-5.4 5.4h-36.2c-3 0-5.4-2.4-5.4-5.4V26.4c0-3 2.5-5.4 5.4-5.4z" fill="url(#e)"/><path d="M123.7 91h-8v-3h8z" fill="#ff848b"/><path d="M85.1 55c-1.3.1-2.4 1.2-2.4 2.5s1.1 2.4 2.4 2.5h10.6v-5z" fill="url(#f)"/><path d="M123 56.1l-15.5-15.4c-1-1-2.6-1-3.7 0-1 1-1 2.6 0 3.6l11.1 11H95.7v5.1h19.1l-11.1 11c-.7.6-.9 1.6-.7 2.5s.9 1.6 1.8 1.8 1.8 0 2.5-.6l.1-.1L123 59.8c.5-.5.8-1.1.8-1.8s-.3-1.4-.8-1.9z" fill="url(#g)"/></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/fxa/send.svg b/browser/themes/shared/fxa/send.svg
new file mode 100644
index 0000000000..e5c36eace8
--- /dev/null
+++ b/browser/themes/shared/fxa/send.svg
@@ -0,0 +1,4 @@
+<!-- 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 height="16" width="16" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="11.369" x2="3.641" y1="1.065" y2="14.451"><stop offset="0" stop-color="#ff9640"/><stop offset=".6" stop-color="#fc4055"/><stop offset="1" stop-color="#e31587"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="11.369" x2="3.641" y1="1.065" y2="14.451"><stop offset="0" stop-color="#fff36e" stop-opacity=".8"/><stop offset=".094" stop-color="#fff36e" stop-opacity=".699"/><stop offset=".752" stop-color="#fff36e" stop-opacity="0"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="8.984" x2="12.975" y1="10.186" y2="3.273"><stop offset="0" stop-color="#0090ed"/><stop offset=".386" stop-color="#5b6df8"/><stop offset=".629" stop-color="#9059ff"/><stop offset="1" stop-color="#b833e1"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="8.119" x2="14.738" y1="7.437" y2="9.03"><stop offset="0" stop-color="#054096" stop-opacity=".5"/><stop offset=".054" stop-color="#0f3d9c" stop-opacity=".441"/><stop offset=".261" stop-color="#2f35b1" stop-opacity=".249"/><stop offset=".466" stop-color="#462fbf" stop-opacity=".111"/><stop offset=".669" stop-color="#542bc8" stop-opacity=".028"/><stop offset=".864" stop-color="#592acb" stop-opacity="0"/></linearGradient><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="12.93" x2="9.059" y1="3.351" y2="10.055"><stop offset="0" stop-color="#722291" stop-opacity=".5"/><stop offset=".295" stop-color="#722291" stop-opacity="0"/></linearGradient><path d="m8.017 0a8.036 8.036 0 0 0 -7.978 7.374 1.522 1.522 0 0 0 .4 1.151 1.5 1.5 0 0 0 1.096.475h5.465v3.584l-1.293-1.291a1 1 0 0 0 -1.414 1.414l3 3a1 1 0 0 0 .325.216.986.986 0 0 0 .764 0 1 1 0 0 0 .325-.216l3-3a1 1 0 0 0 -1.414-1.414l-1.293 1.293v-3.586h5.5a1.5 1.5 0 0 0 1.1-.478 1.523 1.523 0 0 0 .4-1.148 8.037 8.037 0 0 0 -7.983-7.374zm0 7h-5.917a6 6 0 0 1 11.84 0z" fill="url(#a)"/><path d="m8.017 0a8.036 8.036 0 0 0 -7.978 7.374 1.522 1.522 0 0 0 .4 1.151 1.5 1.5 0 0 0 1.096.475h5.465v3.584l-1.293-1.291a1 1 0 0 0 -1.414 1.414l3 3a1 1 0 0 0 .325.216.986.986 0 0 0 .764 0 1 1 0 0 0 .325-.216l3-3a1 1 0 0 0 -1.414-1.414l-1.293 1.293v-3.586h5.5a1.5 1.5 0 0 0 1.1-.478 1.523 1.523 0 0 0 .4-1.148 8.037 8.037 0 0 0 -7.983-7.374zm0 7h-5.917a6 6 0 0 1 11.84 0z" fill="url(#b)"/><path d="m7 9 1.009-7a6.042 6.042 0 0 1 5.928 5h-2.937a2 2 0 0 0 -2 2h5.5a1.5 1.5 0 0 0 1.5-1.626c-.327-3.574-4.549-5.517-7.991-5.374z" fill="url(#c)"/><path d="m13.937 7h-2.937a2 2 0 0 0 -2 2h5.5a1.5 1.5 0 0 0 1.1-.478z" fill="url(#d)" opacity=".9"/><path d="m15.6 8.522a1.5 1.5 0 0 0 .4-1.148c-.327-3.574-4.549-5.517-7.991-5.374a6.042 6.042 0 0 1 5.928 5z" fill="url(#e)"/></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/fxa/sync-devices.svg b/browser/themes/shared/fxa/sync-devices.svg
new file mode 100644
index 0000000000..9d4f3fb97d
--- /dev/null
+++ b/browser/themes/shared/fxa/sync-devices.svg
@@ -0,0 +1,49 @@
+<!-- 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 height="2in" viewBox="0 0 315.96 144" width="4.39in" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient id="a" cx="101.36" cy="70.18" gradientUnits="userSpaceOnUse" r="58.29">
+    <stop offset=".27" stop-color="#cdcdd4" stop-opacity="0"/>
+    <stop offset=".46" stop-color="#cdcdd4" stop-opacity=".02"/>
+    <stop offset=".66" stop-color="#cdcdd4" stop-opacity=".08"/>
+    <stop offset=".86" stop-color="#cdcdd4" stop-opacity=".18"/>
+    <stop offset=".9" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <radialGradient id="b" cx="225.08" cy="70.18" r="58.29" href="#a"/>
+  <linearGradient id="c" gradientUnits="userSpaceOnUse" x1="28.25" x2="93.99" y1="99.19" y2="33.44">
+    <stop offset="0" stop-color="#c689ff"/>
+    <stop offset="1" stop-color="#d74cf0"/>
+  </linearGradient>
+  <linearGradient id="d" gradientUnits="userSpaceOnUse" x1="-5.18" x2="106.41" y1="139.25" y2="27.66">
+    <stop offset=".16" stop-color="#b833e1"/>
+    <stop offset=".96" stop-color="#ff4f5e"/>
+  </linearGradient>
+  <linearGradient id="e" gradientUnits="userSpaceOnUse" x1="96.11" x2="225.52" y1="139" y2="9.59">
+    <stop offset=".28" stop-color="#7542e5"/>
+    <stop offset=".42" stop-color="#824deb"/>
+    <stop offset=".79" stop-color="#a067fa"/>
+    <stop offset="1" stop-color="#ab71ff"/>
+  </linearGradient>
+  <linearGradient id="f" gradientUnits="userSpaceOnUse" x1="221.49" x2="303.29" y1="111.6" y2="29.8">
+    <stop offset=".43" stop-color="#00b3f4"/>
+    <stop offset=".61" stop-color="#00bbf6"/>
+    <stop offset=".89" stop-color="#00d2fc"/>
+    <stop offset="1" stop-color="#0df"/>
+  </linearGradient>
+  <path d="m101.41 128.46a58.3 58.3 0 0 1 -29.09-7.76 3.75 3.75 0 0 1 3.68-6.49 50.75 50.75 0 0 0 25.36 6.79 3.76 3.76 0 0 1 3.77 3.74 3.72 3.72 0 0 1 -3.72 3.72zm14.11-1.85a3.75 3.75 0 0 1 -1-7.36 50.81 50.81 0 0 0 22.75-13.17 3.74 3.74 0 0 1 5.29 5.29 58.22 58.22 0 0 1 -26.1 15.11 3.6 3.6 0 0 1 -.94.13zm-52.67-14.07a3.73 3.73 0 0 1 -2.65-1.09 58.32 58.32 0 0 1 -15.13-26.09 3.74 3.74 0 0 1 7.23-1.94 50.83 50.83 0 0 0 13.19 22.73 3.74 3.74 0 0 1 -2.64 6.39zm85.76-11.36a3.74 3.74 0 0 1 -3.24-5.62 50.78 50.78 0 0 0 6.79-25.38v-.18a3.74 3.74 0 1 1 7.48 0v.14a58.31 58.31 0 0 1 -7.79 29.2 3.73 3.73 0 0 1 -3.24 1.84zm-101.79-27.18a3.7 3.7 0 0 1 -3.75-3.69v-.1a58.33 58.33 0 0 1 7.74-29 3.75 3.75 0 0 1 6.49 3.74 50.77 50.77 0 0 0 -6.74 25.3 3.78 3.78 0 0 1 -3.74 3.75zm107.18-14.39a3.74 3.74 0 0 1 -3.61-2.77 50.73 50.73 0 0 0 -13.24-22.7 3.75 3.75 0 0 1 5.28-5.32 58.23 58.23 0 0 1 15.18 26.06 3.77 3.77 0 0 1 -3.61 4.73zm-91.3-24.16a3.75 3.75 0 0 1 -2.7-6.39 58.26 58.26 0 0 1 26.11-15.15 3.74 3.74 0 1 1 2 7.22 50.92 50.92 0 0 0 -22.76 13.21 3.71 3.71 0 0 1 -2.65 1.11zm65.78-8.86a3.72 3.72 0 0 1 -1.87-.5 50.77 50.77 0 0 0 -25.25-6.71h-.16a3.75 3.75 0 1 1 0-7.49h.08a58.37 58.37 0 0 1 29.06 7.71 3.74 3.74 0 0 1 -1.86 7z" fill="url(#a)"/>
+  <path d="m225.13 128.46a58.24 58.24 0 0 1 -29.13-7.76 3.75 3.75 0 0 1 3.74-6.49 50.71 50.71 0 0 0 25.34 6.79 3.76 3.76 0 0 1 3.77 3.74 3.72 3.72 0 0 1 -3.72 3.72zm14.11-1.85a3.74 3.74 0 0 1 -1-7.36 50.78 50.78 0 0 0 22.76-13.17 3.74 3.74 0 0 1 5.3 5.29 58.33 58.33 0 0 1 -26.1 15.11 3.72 3.72 0 0 1 -.96.13zm-52.67-14.07a3.71 3.71 0 0 1 -2.64-1.09 58.14 58.14 0 0 1 -15.13-26.09 3.74 3.74 0 1 1 7.2-1.94 50.83 50.83 0 0 0 13.19 22.73 3.74 3.74 0 0 1 -2.64 6.39zm85.76-11.36a3.74 3.74 0 0 1 -3.24-5.62 50.78 50.78 0 0 0 6.79-25.38v-.18a3.75 3.75 0 1 1 7.49 0v.14a58.32 58.32 0 0 1 -7.8 29.2 3.73 3.73 0 0 1 -3.24 1.84zm-101.79-27.18a3.69 3.69 0 0 1 -3.74-3.69v-.1a58.32 58.32 0 0 1 7.73-29 3.75 3.75 0 0 1 6.47 3.67 50.77 50.77 0 0 0 -6.74 25.3 3.78 3.78 0 0 1 -3.72 3.82zm107.18-14.39a3.74 3.74 0 0 1 -3.61-2.77 50.81 50.81 0 0 0 -13.23-22.7 3.74 3.74 0 0 1 5.27-5.32 58.34 58.34 0 0 1 15.19 26.06 3.74 3.74 0 0 1 -2.64 4.59 3.63 3.63 0 0 1 -.98.14zm-91.3-24.16a3.74 3.74 0 0 1 -2.65-6.39 58.2 58.2 0 0 1 26.07-15.15 3.74 3.74 0 1 1 1.95 7.22 51 51 0 0 0 -22.72 13.21 3.71 3.71 0 0 1 -2.65 1.11zm65.78-8.86a3.71 3.71 0 0 1 -1.86-.5 50.8 50.8 0 0 0 -25.26-6.71h-.16a3.75 3.75 0 0 1 0-7.49h.08a58.37 58.37 0 0 1 29.07 7.71 3.74 3.74 0 0 1 -1.87 7z" fill="url(#b)"/>
+  <path d="m44.62 94.89h33v9.57h-33z" fill="#ff848b"/>
+  <path d="m21.52 40.17h79.19v52.3h-79.19z" fill="url(#c)"/>
+  <path d="m109.28 97.75h-2.15v-59.43a4.28 4.28 0 0 0 -4.28-4.32h-83.46a4.28 4.28 0 0 0 -4.28 4.28v59.47h-2.11a2.12 2.12 0 0 0 -2.13 2.12v4.31a2.13 2.13 0 0 0 2.13 2.13h96.32a2.13 2.13 0 0 0 2.13-2.13v-4.31a2.12 2.12 0 0 0 -2.17-2.12zm-39.6 4.25h-17.13v-4.25h17.13z" fill="url(#d)"/>
+  <path d="m82 62a.83.83 0 0 0 -.83.83v1a5.77 5.77 0 0 0 -9.76 2.62.83.83 0 0 0 .6 1h.2a.84.84 0 0 0 .81-.63 4.11 4.11 0 0 1 4-3.14 4.06 4.06 0 0 1 3.28 1.62h-1.63a.83.83 0 0 0 -.08 1.7h3.41a.84.84 0 0 0 .83-.83v-3.37a.83.83 0 0 0 -.83-.8zm0 6.17a.83.83 0 0 0 -1 .6 4.11 4.11 0 0 1 -7.3 1.49h1.63a.83.83 0 0 0 0-1.66h-3.33a.83.83 0 0 0 -.83.83v3.32a.83.83 0 1 0 1.66.08v-1a5.75 5.75 0 0 0 9.75-2.62.83.83 0 0 0 -.58-1.07zm-36.25-6.72a6.33 6.33 0 1 0 6.33 6.33 6.33 6.33 0 0 0 -6.33-6.33zm0 11.07a4.75 4.75 0 1 1 4.74-4.74 4.75 4.75 0 0 1 -4.74 4.74zm2.77-4.74h-2.77v-2.78a.4.4 0 0 0 -.75 0v3.17a.4.4 0 0 0 .39.39h3.17a.4.4 0 0 0 0-.79zm9.62 6.1a.85.85 0 0 1 -.85-.85.49.49 0 0 1 0-.12l.47-3.37-2.26-2.42a.85.85 0 0 1 .5-1.42l3.15-.56 1.49-3a.85.85 0 0 1 1.14-.38.87.87 0 0 1 .38.38l1.49 3 3.15.56a.85.85 0 0 1 .69 1 .78.78 0 0 1 -.22.43l-2.27 2.42.48 3.36a.85.85 0 0 1 -.73 1 .83.83 0 0 1 -.51-.09l-2.86-1.52-2.85 1.49a.89.89 0 0 1 -.39.09zm-.64-6.88 1.9 2-.4 2.79 2.37-1.23 2.37 1.23-.38-2.79 1.9-2-2.67-.48-1.21-2.43-1.21 2.43z" fill="#f9f9fa"/>
+  <rect fill="url(#e)" height="69.38" rx="7.65" width="46" x="141.93" y="35.49"/>
+  <path d="m160.58 93.56h8.57v4.28h-8.57z" fill="#ab71ff"/>
+  <path d="m169.91 74a.83.83 0 0 0 -.83.83v1a5.75 5.75 0 0 0 -9.75 2.62.83.83 0 0 0 .6 1 .65.65 0 0 0 .2 0 .83.83 0 0 0 .8-.62 4.11 4.11 0 0 1 7.3-1.48h-1.63a.83.83 0 1 0 -.08 1.66h3.39a.83.83 0 0 0 .83-.83v-3.37a.83.83 0 0 0 -.83-.83zm0 6.17a.84.84 0 0 0 -1 .6 4.13 4.13 0 0 1 -4 3.14 4.06 4.06 0 0 1 -3.28-1.66h1.63a.83.83 0 0 0 0-1.65h-3.26a.83.83 0 0 0 -.83.82v3.31a.83.83 0 1 0 1.66.08v-1a5.76 5.76 0 0 0 9.76-2.62.83.83 0 0 0 -.59-1.04zm-5-36.65a6.33 6.33 0 1 0 6.32 6.32 6.32 6.32 0 0 0 -6.29-6.34zm0 11.07a4.75 4.75 0 1 1 4.74-4.75 4.75 4.75 0 0 1 -4.71 4.73zm2.76-4.75h-2.76v-2.79a.4.4 0 0 0 -.4-.39.39.39 0 0 0 -.39.39v3.17a.38.38 0 0 0 .39.39h3.16a.39.39 0 0 0 .4-.39.4.4 0 0 0 -.37-.4zm-6 21.08a.85.85 0 0 1 -.85-.85s0-.07 0-.11l.47-3.37-2.26-2.43a.85.85 0 0 1 0-1.2 1 1 0 0 1 .44-.22l3.15-.56 1.49-3a.85.85 0 0 1 1.14-.38 1 1 0 0 1 .38.38l1.49 3 3.15.56a.86.86 0 0 1 .69 1 .89.89 0 0 1 -.22.43l-2.26 2.43.47 3.37a.85.85 0 0 1 -.72 1 .88.88 0 0 1 -.51-.09l-2.85-1.49-2.85 1.49a.93.93 0 0 1 -.33.02zm-.61-6.92 1.89 2-.38 2.75 2.37-1.23 2.37 1.24-.39-2.76 1.89-2-2.66-.47-1.21-2.44-1.21 2.44z" fill="#f9f9fa"/>
+  <rect fill="url(#f)" height="65.56" rx="5.76" width="80.89" x="222.47" y="37.4"/>
+  <path d="m292.6 64.85h5.33v10.66h-5.33z" fill="#0df"/>
+  <g fill="#f9f9fa">
+    <path d="m282.65 64.37a.83.83 0 0 0 -.83.83v1a5.75 5.75 0 0 0 -9.75 2.62.83.83 0 0 0 .6 1 .64.64 0 0 0 .2 0 .82.82 0 0 0 .8-.63 4.13 4.13 0 0 1 4-3.14 4.08 4.08 0 0 1 3.33 1.65h-1.63a.82.82 0 0 0 -.87.79.84.84 0 0 0 .79.87h3.39a.83.83 0 0 0 .83-.83v-3.33a.83.83 0 0 0 -.83-.83zm0 6.17a.84.84 0 0 0 -1 .6 4.11 4.11 0 0 1 -7.29 1.49h1.64a.83.83 0 0 0 0-1.63h-3.3a.83.83 0 0 0 -.82.83v3.32a.83.83 0 0 0 1.65.08v-1a5.76 5.76 0 0 0 9.76-2.61.83.83 0 0 0 -.6-1.08z"/>
+    <path d="m246.41 63.85a6.33 6.33 0 1 0 6.33 6.33 6.32 6.32 0 0 0 -6.33-6.33zm0 11.07a4.75 4.75 0 1 1 4.75-4.74 4.74 4.74 0 0 1 -4.75 4.74zm2.77-4.74h-2.77v-2.77a.38.38 0 0 0 -.41-.41.39.39 0 0 0 -.4.39v3.16a.4.4 0 0 0 .4.4h3.16a.4.4 0 1 0 0-.79z"/>
+    <path d="m258.8 76.28a.85.85 0 0 1 -.85-.85s0-.08 0-.12l.47-3.37-2.26-2.43a.85.85 0 0 1 0-1.2.9.9 0 0 1 .44-.21l3.15-.56 1.49-3a.85.85 0 0 1 1.14-.38.87.87 0 0 1 .38.38l1.48 3 3.16.56a.85.85 0 0 1 .69 1 .89.89 0 0 1 -.22.43l-2.26 2.43.47 3.37a.85.85 0 0 1 -.72 1 .88.88 0 0 1 -.51-.09l-2.85-1.48-2.86 1.48a.76.76 0 0 1 -.34.04zm-.63-6.88 1.89 2-.38 2.76 2.37-1.16 2.37 1.24-.42-2.81 1.89-2-2.66-.48-1.21-2.43-1.22 2.43z"/>
+  </g>
+</svg>
diff --git a/browser/themes/shared/fxa/sync-illustration-issue.svg b/browser/themes/shared/fxa/sync-illustration-issue.svg
new file mode 100644
index 0000000000..9fdfb1e65d
--- /dev/null
+++ b/browser/themes/shared/fxa/sync-illustration-issue.svg
@@ -0,0 +1,52 @@
+<!-- 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 height="2in" viewBox="0 0 216 144" width="3in" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient id="a" cx="224" cy="135.18" gradientUnits="userSpaceOnUse" r="102.61">
+    <stop offset=".26" stop-color="#cdcdd4" stop-opacity="0"/>
+    <stop offset=".4" stop-color="#cdcdd4" stop-opacity=".02"/>
+    <stop offset=".55" stop-color="#cdcdd4" stop-opacity=".08"/>
+    <stop offset=".69" stop-color="#cdcdd4" stop-opacity=".18"/>
+    <stop offset=".72" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-33.16" cy="130.43" gradientUnits="userSpaceOnUse" r="150.75">
+    <stop offset=".27" stop-color="#cdcdd4" stop-opacity="0"/>
+    <stop offset=".46" stop-color="#cdcdd4" stop-opacity=".02"/>
+    <stop offset=".66" stop-color="#cdcdd4" stop-opacity=".08"/>
+    <stop offset=".86" stop-color="#cdcdd4" stop-opacity=".18"/>
+    <stop offset=".9" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <radialGradient id="c" cx="129.21" cy="117.26" gradientTransform="matrix(1 0 0 .7 0 35.37)" gradientUnits="userSpaceOnUse" r="112.67">
+    <stop offset=".4" stop-color="#cdcdd4" stop-opacity="0"/>
+    <stop offset=".58" stop-color="#cdcdd4" stop-opacity=".02"/>
+    <stop offset=".77" stop-color="#cdcdd4" stop-opacity=".08"/>
+    <stop offset=".96" stop-color="#cdcdd4" stop-opacity=".18"/>
+    <stop offset="1" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <linearGradient id="d" gradientUnits="userSpaceOnUse" x1="67.44" x2="126.91" y1="85.38" y2="25.9">
+    <stop offset="0" stop-color="#c689ff"/>
+    <stop offset="1" stop-color="#d74cf0"/>
+  </linearGradient>
+  <linearGradient id="e" gradientUnits="userSpaceOnUse" x1="37.24" x2="138.18" y1="121.61" y2="20.67">
+    <stop offset=".22" stop-color="#b833e1"/>
+    <stop offset=".91" stop-color="#ff4f5e"/>
+  </linearGradient>
+  <linearGradient id="f" gradientUnits="userSpaceOnUse" x1="80.06" x2="199.29" y1="149.59" y2="30.36">
+    <stop offset=".28" stop-color="#7542e5"/>
+    <stop offset=".42" stop-color="#824deb"/>
+    <stop offset=".79" stop-color="#a067fa"/>
+    <stop offset="1" stop-color="#ab71ff"/>
+  </linearGradient>
+    <path d="m209.32 76.55a9.51 9.51 0 0 1 -9.47 9.51h-38.07a7.27 7.27 0 0 1 0-14.54 7.15 7.15 0 0 1 1.74.22 7.89 7.89 0 0 1 -.2-1.69 7.5 7.5 0 0 1 11.74-6.18 12.6 12.6 0 0 1 24.79 3.13 9.51 9.51 0 0 1 9.47 9.55z" fill="url(#a)"/>
+    <path d="m84.66 32.38a10.74 10.74 0 0 0 -2.66.32 11.09 11.09 0 0 0 .29-2.53 11.3 11.3 0 0 0 -17.69-9.31 19 19 0 0 0 -37.37 4.77 14.27 14.27 0 1 0 0 28.54h57.43a10.9 10.9 0 0 0 0-21.79z" fill="url(#b)"/>
+    <path d="m24.87 72.66a22.54 22.54 0 0 1 22.45-22.66l120.77-.48a22.53 22.53 0 1 1 .18 45.06l-120.77.53a22.54 22.54 0 0 1 -22.63-22.45z" fill="url(#c)"/>
+    <path d="m83.89 81.48h29.85v8.65h-29.85z" fill="#ff848b"/>
+    <path d="m61.36 31.98h71.63v47.31h-71.63z" fill="url(#d)"/>
+    <path d="m140.78 84.07h-1.95v-53.76a3.86 3.86 0 0 0 -3.83-3.86h-75.54a3.86 3.86 0 0 0 -3.86 3.87v53.75h-2a1.92 1.92 0 0 0 -1.88 1.93v3.9a1.92 1.92 0 0 0 1.93 1.93h87.13a1.93 1.93 0 0 0 1.93-1.93v-3.9a1.93 1.93 0 0 0 -1.93-1.93zm-35.78 3.87h-15.53v-3.87h15.53z" fill="url(#e)"/>
+    <rect fill="url(#f)" height="62.76" rx="5.4" width="41.61" x="122.66" y="54.8"/>
+    <path d="m139.53 107.32h7.75v3.87h-7.75z" fill="#ab71ff"/>
+    <g fill="#f9f9fa">
+      <path d="m107.19 47.81a6.25 6.25 0 0 0 -8.81 0l-.17.18-1.31 3.2 5.23.32a1 1 0 0 1 .63 1.62l-6.12 6.34a1 1 0 0 1 -.69.29.93.93 0 0 1 -.66-.27 1 1 0 0 1 0-1.36l4.68-4.83-4.52-.3a1 1 0 0 1 -.76-.45 1 1 0 0 1 -.07-.87l1.49-3.68-.24-.23a6.23 6.23 0 0 0 -8.8 0 6.22 6.22 0 0 0 0 8.8l9 9a1.5 1.5 0 0 0 1.07.44 1.54 1.54 0 0 0 1.07-.44l9-9a6.24 6.24 0 0 0 -.02-8.76z"/>
+      <path d="m153.39 74.11a6.24 6.24 0 0 0 -8.81 0l-.18.18-1.3 3.21 5.23.32a1 1 0 0 1 .63 1.62l-6.12 6.33a1 1 0 0 1 -1.35 0 1 1 0 0 1 0-1.35l4.68-4.83-4.49-.28a1 1 0 0 1 -.76-.44 1 1 0 0 1 -.07-.87l1.49-3.67-.24-.24a6.23 6.23 0 0 0 -8.8 8.81l9 9a1.51 1.51 0 0 0 2.15 0l9-9a6.25 6.25 0 0 0 -.06-8.79z"/>
+    </g>
+</svg>
diff --git a/browser/themes/shared/fxa/sync-illustration.svg b/browser/themes/shared/fxa/sync-illustration.svg
new file mode 100644
index 0000000000..155d2a4009
--- /dev/null
+++ b/browser/themes/shared/fxa/sync-illustration.svg
@@ -0,0 +1,50 @@
+<!-- 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 height="2in" viewBox="0 0 216 144" width="3in" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient id="a" cx="85.91" cy="159.8" gradientUnits="userSpaceOnUse" r="102.61">
+    <stop offset=".26" stop-color="#cdcdd4" stop-opacity="0"/>
+    <stop offset=".4" stop-color="#cdcdd4" stop-opacity=".02"/>
+    <stop offset=".55" stop-color="#cdcdd4" stop-opacity=".08"/>
+    <stop offset=".69" stop-color="#cdcdd4" stop-opacity=".18"/>
+    <stop offset=".72" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <radialGradient id="b" cx="72.32" cy="144.71" gradientUnits="userSpaceOnUse" r="150.75">
+  <stop offset=".27" stop-color="#cdcdd4" stop-opacity="0"/>
+  <stop offset=".46" stop-color="#cdcdd4" stop-opacity=".02"/>
+  <stop offset=".66" stop-color="#cdcdd4" stop-opacity=".08"/>
+  <stop offset=".86" stop-color="#cdcdd4" stop-opacity=".18"/>
+  <stop offset=".9" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <radialGradient id="c" cx="129.21" cy="117.26" gradientTransform="matrix(1 0 0 .7 0 35.37)" gradientUnits="userSpaceOnUse" r="112.67">
+    <stop offset=".4" stop-color="#cdcdd4" stop-opacity="0"/>
+    <stop offset=".58" stop-color="#cdcdd4" stop-opacity=".02"/>
+    <stop offset=".77" stop-color="#cdcdd4" stop-opacity=".08"/>
+    <stop offset=".96" stop-color="#cdcdd4" stop-opacity=".18"/>
+    <stop offset="1" stop-color="#cdcdd4" stop-opacity=".2"/>
+  </radialGradient>
+  <linearGradient id="d" gradientUnits="userSpaceOnUse" x1="67.44" x2="126.91" y1="85.38" y2="25.9">
+    <stop offset="0" stop-color="#c689ff"/>
+    <stop offset="1" stop-color="#d74cf0"/>
+  </linearGradient>
+  <linearGradient id="e" gradientUnits="userSpaceOnUse" x1="37.24" x2="138.18" y1="121.61" y2="20.67">
+    <stop offset=".22" stop-color="#b833e1"/>
+    <stop offset=".91" stop-color="#ff4f5e"/>
+  </linearGradient>
+  <linearGradient id="f" gradientUnits="userSpaceOnUse" x1="80.06" x2="199.29" y1="149.59" y2="30.36">
+    <stop offset=".28" stop-color="#7542e5"/>
+    <stop offset=".42" stop-color="#824deb"/>
+    <stop offset=".79" stop-color="#a067fa"/>
+    <stop offset="1" stop-color="#ab71ff"/>
+  </linearGradient>
+  <path d="m71.24 101.17a9.5 9.5 0 0 1 -9.47 9.5h-38.08a7.27 7.27 0 0 1 0-14.53 7.17 7.17 0 0 1 1.75.22 7.3 7.3 0 0 1 -.2-1.69 7.49 7.49 0 0 1 7.5-7.49 7.41 7.41 0 0 1 4.26 1.31 12.61 12.61 0 0 1 24.8 3.17 9.5 9.5 0 0 1 9.44 9.51z" fill="url(#a)"/>
+  <path d="m190.14 46.66a10.72 10.72 0 0 0 -2.61.32 11.15 11.15 0 0 0 .29-2.53 11.31 11.31 0 0 0 -17.69-9.32 19 19 0 0 0 -37.37 4.78 14.27 14.27 0 1 0 0 28.53h57.39a10.89 10.89 0 1 0 0-21.78z" fill="url(#b)"/>
+  <path d="m24.87 72.66a22.54 22.54 0 0 1 22.45-22.66l120.77-.48a22.53 22.53 0 1 1 .18 45.06l-120.77.53a22.54 22.54 0 0 1 -22.63-22.45z" fill="url(#c)"/>
+  <path d="m83.89 81.48h29.85v8.65h-29.85z" fill="#ff848b"/>
+  <path d="m61.36 31.98h71.63v47.31h-71.63z" fill="url(#d)"/>
+  <path d="m140.78 84.07h-1.95v-53.76a3.86 3.86 0 0 0 -3.83-3.86h-75.54a3.86 3.86 0 0 0 -3.86 3.87v53.75h-2a1.92 1.92 0 0 0 -1.88 1.93v3.9a1.92 1.92 0 0 0 1.93 1.93h87.13a1.93 1.93 0 0 0 1.93-1.93v-3.9a1.93 1.93 0 0 0 -1.93-1.93zm-35.78 3.87h-15.53v-3.87h15.53z" fill="url(#e)"/>
+  <path d="m107.33 47.59a6.26 6.26 0 0 0 -8.85 0l-1.27 1.26-1.21-1.26a6.26 6.26 0 0 0 -8.85 0 6.26 6.26 0 0 0 0 8.85l9 9a1.49 1.49 0 0 0 1.07.45 1.51 1.51 0 0 0 1.08-.45l9-9a6.26 6.26 0 0 0 .03-8.85z" fill="#f9f9fa"/>
+  <rect fill="url(#f)" height="62.76" rx="5.4" width="41.61" x="122.66" y="54.8"/>
+  <path d="m139.53 107.32h7.75v3.87h-7.75z" fill="#ab71ff"/>
+  <path d="m153.51 73.93a6.26 6.26 0 0 0 -8.85 0l-1.26 1.26-1.26-1.26a6.26 6.26 0 1 0 -8.85 8.85l9 9a1.53 1.53 0 0 0 1.08.45 1.51 1.51 0 0 0 1.08-.45l9-9a6.26 6.26 0 0 0 .06-8.85z" fill="#f9f9fa"/>
+  </svg>
diff --git a/browser/themes/shared/icons/add-circle-fill.svg b/browser/themes/shared/icons/add-circle-fill.svg
new file mode 100644
index 0000000000..4732d4f63c
--- /dev/null
+++ b/browser/themes/shared/icons/add-circle-fill.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill-opacity="context-fill-opacity">
+  <circle fill="context-stroke" cx="7.6" cy="7.6" r="7.5"/>
+  <path fill="context-fill" d="M11 8.2H8.6l-.4.4V11c0 .3-.3.6-.6.6S7 11.3 7 11V8.6l-.3-.4H4.2c-.3 0-.6-.2-.6-.6s.3-.6.6-.6h2.4l.4-.3V4.2c0-.3.3-.6.6-.6s.6.3.6.6v2.4l.4.4H11c.3 0 .6.3.6.6s-.3.6-.6.6z"/>
+</svg>
diff --git a/browser/themes/shared/icons/back.svg b/browser/themes/shared/icons/back.svg
new file mode 100644
index 0000000000..b52c06b776
--- /dev/null
+++ b/browser/themes/shared/icons/back.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M14.375 8 3.048 8l4.308-4.308a.626.626 0 0 0-.885-.885L1 8.281l0 .689 5.472 5.473a.623.623 0 0 0 .884 0 .628.628 0 0 0 0-.885L3.048 9.25l11.327 0a.625.625 0 0 0 0-1.25z"/>
+</svg>
diff --git a/browser/themes/shared/icons/bookmark-12.svg b/browser/themes/shared/icons/bookmark-12.svg
new file mode 100644
index 0000000000..96a8f82355
--- /dev/null
+++ b/browser/themes/shared/icons/bookmark-12.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill-opacity="context-fill-opacity">
+  <path fill="context-fill" d="M3.1 7.2 1.3 5.6C1 5.4.9 5.1 1 4.8c.1-.3.4-.5.7-.5l2.4-.2.3-.2.9-2.2c.1-.3.4-.5.7-.5.3 0 .6.2.7.5l.9 2.2.3.2 2.4.2c.3 0 .6.2.7.5s0 .6-.2.8L9 7.1l-.1.4.6 2.3c.1.3 0 .6-.3.8-.1.1-.3.1-.5.1-.1 0-.3 0-.4-.1l-2-1.3-.5 0-2 1.3c-.3.2-.6.2-.9 0-.3-.2-.4-.5-.3-.8l.6-2.3-.1-.3z"/>
+  <path fill="context-stroke" d="M6 1.2c.3 0 .6.2.7.5l.9 2.2.3.2 2.4.2c.3 0 .6.2.7.5.1.3 0 .6-.2.8L9 7.1l-.1.4.6 2.3c.1.3 0 .6-.3.8-.1.1-.3.1-.5.1-.1 0-.3 0-.4-.1l-2-1.3-.5 0-2 1.3c-.1.1-.3.1-.4.1-.2 0-.3-.1-.5-.1-.3-.2-.4-.5-.3-.8l.6-2.3-.1-.3-1.8-1.6C1 5.4.9 5.1 1 4.8c.1-.3.4-.5.7-.5l2.4-.2.3-.2.9-2.2c.1-.3.4-.5.7-.5m0-1c-.7 0-1.4.4-1.6 1.1l-.8 1.9-2 .1C.9 3.3.3 3.8 0 4.5c-.1.7.1 1.5.6 1.9l1.5 1.3-.5 1.9c-.2.7.1 1.4.7 1.9.3.2.7.3 1 .3.3 0 .7-.1.9-.3l1.8-1 1.7 1.1c.3.2.6.3.9.3.4 0 .7-.1 1-.3.6-.4.9-1.2.7-1.9l-.5-1.9 1.5-1.3c.6-.5.8-1.2.6-1.9-.2-.7-.8-1.2-1.6-1.2l-2-.1-.7-2C7.4.6 6.7.2 6 .2z"/>
+</svg>
diff --git a/browser/themes/shared/icons/bookmark-hollow.svg b/browser/themes/shared/icons/bookmark-hollow.svg
new file mode 100644
index 0000000000..23c8a48dd3
--- /dev/null
+++ b/browser/themes/shared/icons/bookmark-hollow.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M4.185 15.499c-.336 0-.671-.104-.957-.313a1.62 1.62 0 0 1-.621-1.72l.86-3.375-2.68-2.226A1.618 1.618 0 0 1 .279 6.11a1.621 1.621 0 0 1 1.444-1.122l3.475-.225 1.288-3.237C6.735.903 7.329.5 8 .5s1.265.403 1.514 1.026l1.288 3.237 3.475.225a1.62 1.62 0 0 1 1.444 1.122 1.62 1.62 0 0 1-.509 1.757l-2.68 2.225.86 3.375a1.62 1.62 0 0 1-.621 1.72 1.618 1.618 0 0 1-1.828.059L8 13.385l-2.944 1.861a1.63 1.63 0 0 1-.871.253zM8 1.75a.365.365 0 0 0-.352.239L6.214 5.592l-.541.393-3.87.251a.366.366 0 0 0-.336.261.364.364 0 0 0 .119.407L4.57 9.383l.206.635-.958 3.758a.364.364 0 0 0 .145.399c.063.047.23.139.426.014l3.278-2.071.668 0 3.278 2.071a.365.365 0 0 0 .426-.014.367.367 0 0 0 .143-.4l-.958-3.758.206-.635 2.984-2.478a.364.364 0 0 0 .119-.408.367.367 0 0 0-.336-.261l-3.869-.251-.541-.393-1.435-3.603A.367.367 0 0 0 8 1.75z"/>
+</svg>
diff --git a/browser/themes/shared/icons/bookmark-star-on-tray.svg b/browser/themes/shared/icons/bookmark-star-on-tray.svg
new file mode 100644
index 0000000000..49b83232ca
--- /dev/null
+++ b/browser/themes/shared/icons/bookmark-star-on-tray.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">

+  <path d="M12.25 15a2 2 0 0 0 2-2l0-1.375a.625.625 0 0 0-1.25 0l0 1.525-.6.6-9.55 0-.6-.6 0-1.525a.625.625 0 0 0-1.25 0L1 13a2 2 0 0 0 2 2l9.25 0z"/>

+  <path d="M10.359 11c-.238 0-.477-.067-.689-.201L7.625 9.506 5.58 10.799a1.289 1.289 0 0 1-1.448-.047 1.282 1.282 0 0 1-.492-1.363l.598-2.344-1.862-1.546a1.287 1.287 0 0 1-.403-1.393 1.286 1.286 0 0 1 1.145-.889l2.414-.156.894-2.248C6.622.319 7.093 0 7.625 0s1.003.319 1.2.813l.894 2.248 2.415.156c.529.034.979.383 1.144.889a1.289 1.289 0 0 1-.403 1.394l-1.861 1.545.598 2.344a1.283 1.283 0 0 1-.492 1.363 1.302 1.302 0 0 1-.761.248zM7.291 8.238l.668 0 1.969 1.245a.2.2 0 0 0 .302-.214L9.704 6.97l.206-.635 1.792-1.488a.2.2 0 0 0-.11-.353l-2.349-.211-.54-.393c0 0-.578-1.454-.888-2.204a.2.2 0 0 0-.37.002l-.898 2.203-.54.393-2.325.15a.2.2 0 0 0-.119.35L5.34 6.336l.206.635-.576 2.256a.2.2 0 0 0 .297.221l2.024-1.21z"/>

+</svg>

diff --git a/browser/themes/shared/icons/bookmark.svg b/browser/themes/shared/icons/bookmark.svg
new file mode 100644
index 0000000000..47ba62c026
--- /dev/null
+++ b/browser/themes/shared/icons/bookmark.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M3.475 9.824.615 7.449A1.207 1.207 0 0 1 .237 6.14a1.205 1.205 0 0 1 1.074-.835l3.697-.239.501-.375 1.364-3.427C7.059.8 7.501.5 8 .5s.941.3 1.127.763l0 .001 1.364 3.427.501.375 3.697.239c.498.032.92.36 1.074.835.155.476.006.99-.378 1.309L12.53 9.82l-.18.592.91 3.575c.123.485-.059.986-.463 1.279a1.213 1.213 0 0 1-1.36.045L8.31 13.334l-.621 0-3.126 1.977c-.426.266-.96.247-1.361-.045a1.205 1.205 0 0 1-.463-1.279l.908-3.566-.172-.597z"/>
+</svg>
diff --git a/browser/themes/shared/icons/bookmarks-toolbar.svg b/browser/themes/shared/icons/bookmarks-toolbar.svg
new file mode 100644
index 0000000000..2840b5dffc
--- /dev/null
+++ b/browser/themes/shared/icons/bookmarks-toolbar.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M13 1H3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h11a2 2 0 0 0 2-2V4a3 3 0 0 0-3-3zm1 11a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1z"/>
+  <path d="M9.466 6.269l-.964-1.934-.185-.305-.662.028-1.101 2.211-2.039.364-.329.084-.184.613L5.67 9.123 5.365 11.3l-.023.351.552.356 2.116-1.102 1.844.96.319.138.525-.395-.347-2.485 1.462-1.573.214-.268-.227-.596-2.334-.417z"/>
+</svg>
diff --git a/browser/themes/shared/icons/canvas-blocked.svg b/browser/themes/shared/icons/canvas-blocked.svg
new file mode 100644
index 0000000000..636b6f8fa8
--- /dev/null
+++ b/browser/themes/shared/icons/canvas-blocked.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M15.817 14.933 1.067.183a.626.626 0 0 0-.885.885l1.046 1.046A1.945 1.945 0 0 0 1 3l0 10a2 2 0 0 0 2 2l10 0c.323 0 .618-.092.886-.229l1.046 1.046a.627.627 0 0 0 .885 0 .625.625 0 0 0 0-.884zM2.85 13.75l-.6-.6 0-10.015L6.236 7.12 4.218 9.15A.749.749 0 0 0 4 9.679L4 11a1 1 0 0 0 1 1l6.115 0 1.75 1.75-10.015 0z"/>
+  <path d="m13.15 2.25.6.6 0 8.245 1.25 1.25L15 3a2 2 0 0 0-2-2L3.655 1l1.25 1.25 8.245 0z"/>
+  <path d="m11.6 5-1.2 0-.4.4 0 1.2.4.4 1.2 0 .4-.4 0-1.2z"/>
+</svg>
diff --git a/browser/themes/shared/icons/canvas.svg b/browser/themes/shared/icons/canvas.svg
new file mode 100644
index 0000000000..4a3e99094f
--- /dev/null
+++ b/browser/themes/shared/icons/canvas.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M3 1a2 2 0 0 0-2 2l0 10a2 2 0 0 0 2 2l10 0a2 2 0 0 0 2-2l0-10a2 2 0 0 0-2-2L3 1zm10.75 12.15-.6.6-10.3 0-.6-.6 0-10.3.6-.6 10.3 0 .6.6 0 10.3z"/>
+  <path d="m11 12-6 0a1 1 0 0 1-1-1l0-1.321a.75.75 0 0 1 .218-.529L6.35 7.005a.75.75 0 0 1 1.061-.003l2.112 2.102.612-.577a.75.75 0 0 1 1.047.017l.6.605a.75.75 0 0 1 .218.529L12 11a1 1 0 0 1-1 1z"/>
+  <path d="m11.6 5-1.2 0-.4.4 0 1.2.4.4 1.2 0 .4-.4 0-1.2z"/>
+</svg>
diff --git a/browser/themes/shared/icons/characterEncoding.svg b/browser/themes/shared/icons/characterEncoding.svg
new file mode 100644
index 0000000000..6cd4f56dd1
--- /dev/null
+++ b/browser/themes/shared/icons/characterEncoding.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M13 15H3a2.006 2.006 0 0 1-2-2V3a2.006 2.006 0 0 1 2-2h10a2.006 2.006 0 0 1 2 2v10a2.006 2.006 0 0 1-2 2zm0-10a2.946 2.946 0 0 0-3-3H6a2.946 2.946 0 0 0-3 3v4a2.946 2.946 0 0 0 3 3h4c1.7 0 3-.3 3-2zm-3 3.2a2.769 2.769 0 0 0 .9-.1c.3-.1.5-.2.8-.3v.8a6.89 6.89 0 0 0-.8.3 2.22 2.22 0 0 1-.9.1 2.149 2.149 0 0 1-2.1-1.2 3.819 3.819 0 0 1-.9.9 2.663 2.663 0 0 1-1.2.3 1.728 1.728 0 0 1-1.3-.5A1.248 1.248 0 0 1 4 7.3 1.486 1.486 0 0 1 4.6 6a3.312 3.312 0 0 1 1.9-.5h.9v-.4a1.327 1.327 0 0 0-.3-1c-.1-.3-.4-.4-.8-.4a3.429 3.429 0 0 0-1.6.4l-.2-.6a3.919 3.919 0 0 1 .9-.4c.3 0 .6-.1 1-.1a3.6 3.6 0 0 1 1.1.2 1.7 1.7 0 0 1 .6.8 1.575 1.575 0 0 1 .7-.7 1.689 1.689 0 0 1 1-.3 1.865 1.865 0 0 1 1.6.7 2.883 2.883 0 0 1 .6 1.9v.6H8.4c0 1.4.6 2 1.6 2zM7.5 6.1h-.8a2.42 2.42 0 0 0-1.4.3.975.975 0 0 0-.4.9.779.779 0 0 0 .3.7.844.844 0 0 0 .7.2 1.594 1.594 0 0 0 1.2-.4 1.7 1.7 0 0 0 .4-1.3zm3.6-.6a2.269 2.269 0 0 0-.3-1.3.975.975 0 0 0-.9-.4 1.284 1.284 0 0 0-1 .4 2.226 2.226 0 0 0-.5 1.3z"/>
+</svg>
diff --git a/browser/themes/shared/icons/chevron-animation.svg b/browser/themes/shared/icons/chevron-animation.svg
new file mode 100644
index 0000000000..0cf17dcc46
--- /dev/null
+++ b/browser/themes/shared/icons/chevron-animation.svg
@@ -0,0 +1,391 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="848" height="16">
+  <defs>
+    <path d="M14.264 8.353c0 0-5.465 5.466-5.465 5.466a.628.628 0 0 1-.884-.001.63.63 0 0 1 0-.885c0 0 4.937-4.934 4.937-4.934 0 0-4.935-4.931-4.935-4.931a.625.625 0 1 1 .884-.885c0 0 5.465 5.465 5.465 5.465 0 0-.002.705-.002.705z" id="b"/>
+    <path d="M8.264 8.353c0 0-5.463 5.466-5.463 5.466a.63.63 0 0 1-.886-.001.63.63 0 0 1 0-.885c0 0 4.935-4.934 4.935-4.934 0 0-4.933-4.931-4.933-4.931a.63.63 0 0 1 0-.885.628.628 0 0 1 .886 0c0 0 5.463 5.465 5.463 5.465 0 0-.002.705-.002.705z" id="a"/>
+  </defs>
+  <svg viewBox="0 0 16 16" width="16" height="16">
+    <g fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="16">
+    <g fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".03" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="32">
+    <g opacity=".97" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".09" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="48">
+    <g opacity=".89" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".19" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="64">
+    <g opacity=".77" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".3" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="80">
+    <g opacity=".64" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".43" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="96">
+    <g opacity=".48" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".57" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="112">
+    <g opacity=".32" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".72" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="128">
+    <g opacity=".15" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".87" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="144">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="160">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="176">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="192">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="208">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="224">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="240">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="256">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="272">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="288">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="304">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="320">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="336">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="352">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="368">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="384">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="400">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="416">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="432">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="448">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="464">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="480">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="496">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="512">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="528">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="544">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="560">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="576">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="592">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="608">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="624">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="640">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="656">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="672">
+    <g fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="688">
+    <g opacity=".03" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".97" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="704">
+    <g opacity=".09" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".91" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="720">
+    <g opacity=".19" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".81" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="736">
+    <g opacity=".3" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".7" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="752">
+    <g opacity=".43" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".57" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="768">
+    <g opacity=".57" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".43" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="784">
+    <g opacity=".72" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".28" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="800">
+    <g opacity=".87" fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+    <g opacity=".13" fill="context-stroke">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="816">
+    <g fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 16 16" width="16" height="16" x="832">
+    <g fill="context-fill">
+      <use href="#a"/>
+      <use href="#b"/>
+    </g>
+  </svg>
+</svg>
diff --git a/browser/themes/shared/icons/customize.svg b/browser/themes/shared/icons/customize.svg
new file mode 100644
index 0000000000..f0da3a385b
--- /dev/null
+++ b/browser/themes/shared/icons/customize.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m13.25 6.051 0-5.051a1 1 0 0 0-1-1l-8.5 0a1 1 0 0 0-1 1l0 5.051A.985.985 0 0 0 2 7l0 2a2 2 0 0 0 2 2l2.5 0 0 3.5a1.5 1.5 0 0 0 3 0l0-3.5 2.5 0a2 2 0 0 0 2-2l0-2a.985.985 0 0 0-.75-.949zM4 6l0-3.9.6-.6.768 0 .771.856a.864.864 0 0 0 1.196.087L7.867 2l.665 0 .724.724a1 1 0 0 0 1.39.023L11.444 2 12 2l0 4-8 0z"/>
+</svg>
diff --git a/browser/themes/shared/icons/device-desktop.svg b/browser/themes/shared/icons/device-desktop.svg
new file mode 100644
index 0000000000..51c7bf0a74
--- /dev/null
+++ b/browser/themes/shared/icons/device-desktop.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M15.5 12H15V3a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v9H.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h15a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM10 13H6v-1h4zm3-2H3V4h10z"/>
+</svg>
diff --git a/browser/themes/shared/icons/device-phone.svg b/browser/themes/shared/icons/device-phone.svg
new file mode 100644
index 0000000000..81094ef961
--- /dev/null
+++ b/browser/themes/shared/icons/device-phone.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM9 15H7v-1h2zm3-2.5a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5z"/>
+</svg>
diff --git a/browser/themes/shared/icons/device-tablet.svg b/browser/themes/shared/icons/device-tablet.svg
new file mode 100644
index 0000000000..58e61faa11
--- /dev/null
+++ b/browser/themes/shared/icons/device-tablet.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 1H2C.895 1 0 1.895 0 3v10c0 1.105.895 2 2 2h12c1.105 0 2-.895 2-2V3c0-1.105-.895-2-2-2zm-1 11.5c0 .276-.224.5-.5.5h-10c-.276 0-.5-.224-.5-.5v-9c0-.276.224-.5.5-.5h10c.276 0 .5.224.5.5v9zM15 9h-1V7h1v2z"/>
+</svg>
diff --git a/browser/themes/shared/icons/device-tv.svg b/browser/themes/shared/icons/device-tv.svg
new file mode 100644
index 0000000000..ed65b4a229
--- /dev/null
+++ b/browser/themes/shared/icons/device-tv.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.5 2h-13A1.5 1.5 0 0 0 0 3.5v8A1.5 1.5 0 0 0 1.5 13h3a0.5 0.5 0 0 0 0 1h7a0.5 0.5 0 0 0 0-1h3a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 2zM14 11H2V4h12z"/>
+</svg>
diff --git a/browser/themes/shared/icons/device-vr.svg b/browser/themes/shared/icons/device-vr.svg
new file mode 100644
index 0000000000..1a60279c88
--- /dev/null
+++ b/browser/themes/shared/icons/device-vr.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M13.5 3h-11A2.5 2.5 0 0 0 0 5.5v5A2.5 2.5 0 0 0 2.5 13h3a2 2 0 0 0 1.56-0.75l0.1-0.15 0.38-0.7a0.5 0.5 0 0 1 0.88 0l0.38 0.7 0.1 0.15A2 2 0 0 0 10.46 13h3A2.5 2.5 0 0 0 16 10.5v-5A2.5 2.5 0 0 0 13.5 3zm0.5 7.5a0.5 0.5 0 0 1-0.5 0.5h-3l-0.3-0.56a2.51 2.51 0 0 0-4.4 0L5.5 11h-3A0.5 0.5 0 0 1 2 10.5v-5A0.5 0.5 0 0 1 2.5 5h11A0.5 0.5 0 0 1 14 5.5z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M12.5 6h-9a0.5 0.5 0 0 0 0 1h9a0.5 0.5 0 0 0 0-1z"/>
+</svg>
diff --git a/browser/themes/shared/icons/edit-cut.svg b/browser/themes/shared/icons/edit-cut.svg
new file mode 100644
index 0000000000..e0e685c4c1
--- /dev/null
+++ b/browser/themes/shared/icons/edit-cut.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M11.5 10a2.481 2.481 0 0 0-.379.038L3.977 1.214a2.5 2.5 0 0 0-.371 3.515l2.789 3.444-1.51 1.866A2.486 2.486 0 0 0 4.5 10a2.522 2.522 0 1 0 2.329 1.609L8 10.159 9.172 11.6A2.5 2.5 0 1 0 11.5 10zm-7 3.75a1.25 1.25 0 1 1 1.25-1.25 1.251 1.251 0 0 1-1.25 1.25zm7 0a1.25 1.25 0 1 1 1.25-1.25 1.251 1.251 0 0 1-1.25 1.25zm.9-9.021a2.5 2.5 0 0 0-.371-3.515L8.5 5.569l1.608 1.986z"/>
+</svg>
diff --git a/browser/themes/shared/icons/edit-paste.svg b/browser/themes/shared/icons/edit-paste.svg
new file mode 100644
index 0000000000..64b77646c8
--- /dev/null
+++ b/browser/themes/shared/icons/edit-paste.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M11 2H9.95a2.5 2.5 0 0 0-4.9 0H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm0 7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5h7zm0-5H4V3h1.05a1 1 0 0 0 .98-.8 1.5 1.5 0 0 1 2.939 0 1 1 0 0 0 .98.8H11zM7.5 2a.5.5 0 1 0 .5.5.5.5 0 0 0-.5-.5zm-2 5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0 0 1zm0 2h2a.5.5 0 0 0 0-1h-2a.5.5 0 0 0 0 1z"/>
+</svg>
diff --git a/browser/themes/shared/icons/fingerprint.svg b/browser/themes/shared/icons/fingerprint.svg
new file mode 100644
index 0000000000..320d516b07
--- /dev/null
+++ b/browser/themes/shared/icons/fingerprint.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M.625 13a.625.625 0 0 1 0-1.25l3.25 0A4.88 4.88 0 0 0 8.75 6.875l0-.25a.625.625 0 0 1 1.25 0l0 .25A6.132 6.132 0 0 1 3.875 13l-3.25 0z"/>
+  <path d="M12.096 15.248a.625.625 0 0 1-.491-1.012c4.281-5.446 3.261-8.813 2.271-10.337-1.346-2.07-4.169-3.106-6.71-2.464-2.428.615-3.951 2.583-4.178 5.397-.027.345-.364.585-.673.574a.626.626 0 0 1-.573-.673C2.011 3.4 3.924.967 6.859.224c3.044-.768 6.437.489 8.064 2.995 1.172 1.803 2.426 5.732-2.337 11.791a.622.622 0 0 1-.49.238z"/>
+  <path d="M5.734 16a.624.624 0 0 1-.165-1.228c5.912-1.62 6.147-7.768 6.148-7.829a2.113 2.113 0 0 0-.457-1.708 2.713 2.713 0 0 0-1.689-.947c-.683-.109-1.357.021-1.902.371-.521.334-.859.83-.95 1.396l-.217 1.209a3.621 3.621 0 0 1-3.567 2.986l-2.31 0a.625.625 0 0 1 0-1.25l2.31 0a2.373 2.373 0 0 0 2.337-1.957l.215-1.196c.146-.912.683-1.711 1.509-2.24a3.95 3.95 0 0 1 2.774-.553 3.964 3.964 0 0 1 2.461 1.394c.618.762.878 1.688.729 2.611.005 0-.27 7.059-7.061 8.919a.619.619 0 0 1-.165.022z"/>
+</svg>
diff --git a/browser/themes/shared/icons/forget.svg b/browser/themes/shared/icons/forget.svg
new file mode 100644
index 0000000000..8dc744849d
--- /dev/null
+++ b/browser/themes/shared/icons/forget.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M6.854 10.854l2-2A.5.5 0 0 0 9 8.5v-4a.5.5 0 0 0-1 0v3.793l-1.854 1.853a.5.5 0 1 0 .707.707zM8 0a8.011 8.011 0 0 0-7 4.184V1.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1H2.344a.938.938 0 0 0 .056-.085 6 6 0 1 1 0 4.184 1 1 0 0 0-1.873.7A7.991 7.991 0 1 0 8 0z"/>
+</svg>
diff --git a/browser/themes/shared/icons/forward.svg b/browser/themes/shared/icons/forward.svg
new file mode 100644
index 0000000000..2eac6f3ed7
--- /dev/null
+++ b/browser/themes/shared/icons/forward.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m1.625 8 11.327 0-4.308-4.308a.626.626 0 0 1 .885-.885L15 8.281l0 .689-5.472 5.473a.623.623 0 0 1-.884 0 .628.628 0 0 1 0-.885l4.308-4.308-11.327 0a.625.625 0 0 1 0-1.25z"/>
+</svg>
diff --git a/browser/themes/shared/icons/fullscreen-exit.svg b/browser/themes/shared/icons/fullscreen-exit.svg
new file mode 100644
index 0000000000..227ba4229e
--- /dev/null
+++ b/browser/themes/shared/icons/fullscreen-exit.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M15.817.183a.626.626 0 0 0-.885 0l-3.625 3.625-.281-.281-1.173-1.173A.5.5 0 0 0 9 2.707L9 6.7l.3.3 3.993 0a.5.5 0 0 0 .354-.854l-1.454-1.454 3.625-3.625a.626.626 0 0 0-.001-.884z"/>
+  <path d="M3.707 8a.5.5 0 0 0-.354.854l1.454 1.454-3.625 3.625a.628.628 0 0 0 0 .885.63.63 0 0 0 .885-.001l3.625-3.625.281.281 1.173 1.173A.5.5 0 0 0 8 12.293L8 8.3 7.7 8 3.707 8z"/>
+</svg>
diff --git a/browser/themes/shared/icons/fullscreen.svg b/browser/themes/shared/icons/fullscreen.svg
new file mode 100644
index 0000000000..b525df0668
--- /dev/null
+++ b/browser/themes/shared/icons/fullscreen.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m14.7 1-3.993 0a.5.5 0 0 0-.354.854l1.454 1.454-7.5 7.5-1.454-1.454A.5.5 0 0 0 2 9.707L2 13.7l.3.3 3.993 0a.5.5 0 0 0 .354-.854l-1.454-1.454 7.5-7.5 1.454 1.454A.5.5 0 0 0 15 5.293L15 1.3l-.3-.3z"/>
+</svg>
diff --git a/browser/themes/shared/icons/history.svg b/browser/themes/shared/icons/history.svg
new file mode 100644
index 0000000000..3772c8f76d
--- /dev/null
+++ b/browser/themes/shared/icons/history.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M7.625 1.75c3.446 0 6.25 2.804 6.25 6.25s-2.804 6.25-6.25 6.25-6.25-2.804-6.25-6.25 2.804-6.25 6.25-6.25m0-1.25a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15z"/>
+  <path d="M10.624 10.424a.625.625 0 0 1-.312-.084l-3-1.732L7 8.066l0-3.441a.625.625 0 0 1 1.25 0l0 3.081 2.688 1.552a.626.626 0 0 1-.314 1.166z"/>
+</svg>
diff --git a/browser/themes/shared/icons/home.svg b/browser/themes/shared/icons/home.svg
new file mode 100644
index 0000000000..a9c2ced8e8
--- /dev/null
+++ b/browser/themes/shared/icons/home.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M14.817 7.507 8.852 1.542a1.918 1.918 0 0 0-2.703 0L.183 7.507A.618.618 0 0 0 1 8.436L1 14a2 2 0 0 0 2 2l9 0a2 2 0 0 0 2-2l0-5.564a.62.62 0 0 0 .375.139.626.626 0 0 0 .442-1.068zM8.75 14.75l-2.5 0 0-4 .5-.5 1.5 0 .5.5 0 4zm4-.581-.6.581-2.15 0L10 11a2 2 0 0 0-2-2L7 9a2 2 0 0 0-2 2l0 3.75-2.15 0-.6-.581-.001-6.96 4.783-4.783a.663.663 0 0 1 .936 0L12.75 7.21l0 6.959z"/>
+</svg>
diff --git a/browser/themes/shared/icons/import-export.svg b/browser/themes/shared/icons/import-export.svg
new file mode 100644
index 0000000000..b92beabc8d
--- /dev/null
+++ b/browser/themes/shared/icons/import-export.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M4.197 3.623a.624.624 0 0 1 1.247 0l.005 6.709 2.051 0a.5.5 0 0 1 .353.852L5.037 14l-.423 0-2.816-2.816a.5.5 0 0 1 .353-.852l2.051 0-.005-6.709z"/>
+  <path d="M11.812 12.377a.624.624 0 0 1-1.25 0l-.005-6.709-2.056 0a.5.5 0 0 1-.354-.852L10.97 2l.424 0 2.823 2.816a.499.499 0 0 1-.354.852l-2.056 0 .005 6.708z"/>
+</svg>
diff --git a/browser/themes/shared/icons/import.svg b/browser/themes/shared/icons/import.svg
new file mode 100644
index 0000000000..cc6232af51
--- /dev/null
+++ b/browser/themes/shared/icons/import.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M4.75 12a2 2 0 0 0 2 2L13 14a2 2 0 0 0 2-2l0-8a2 2 0 0 0-2-2L6.75 2a2 2 0 0 0-2 2l0 1.375a.625.625 0 0 0 1.25 0L6 3.85l.6-.6 6.55 0 .6.6 0 8.3-.6.6-6.55 0-.6-.6 0-1.212a.625.625 0 0 0-1.25 0l0 1.062z"/>
+  <path d="M1.273 8.8a.625.625 0 0 1 0-1.25l6.725-.005 0-2.056a.5.5 0 0 1 .854-.354l2.823 2.823 0 .424-2.823 2.823a.5.5 0 0 1-.854-.354l0-2.056-6.725.005z"/>
+</svg>
diff --git a/browser/themes/shared/icons/ion.svg b/browser/themes/shared/icons/ion.svg
new file mode 100644
index 0000000000..870914287b
--- /dev/null
+++ b/browser/themes/shared/icons/ion.svg
@@ -0,0 +1,4 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M13.9 9.81a1.23 1.23 0 0 0 0-.17v-.08a5.67 5.67 0 0 0-2.4-3.36 1.17 1.17 0 0 1-.56-.95V3a1 1 0 0 0-1-1H6.06a1 1 0 0 0-1 1v2.25a1.17 1.17 0 0 1-.56 1 5.66 5.66 0 0 0-2.35 3.33v.12a.53.53 0 0 0 0 .11 5.35 5.35 0 0 0-.11 1 5.65 5.65 0 0 0 3.24 5.09 1 1 0 0 0 .44.1h4.57a1 1 0 0 0 .44-.1A5.65 5.65 0 0 0 14 10.83a5.3 5.3 0 0 0-.1-1.02zm-8.27-2a3.18 3.18 0 0 0 1.43-2.6V4h1.88v1.25a3.18 3.18 0 0 0 1.43 2.6 3.68 3.68 0 0 1 1.54 2.24v.22a2.82 2.82 0 0 1-3.68-.59A3.48 3.48 0 0 0 4.56 9a3.76 3.76 0 0 1 1.07-1.15z"></path></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/icons/library.svg b/browser/themes/shared/icons/library.svg
new file mode 100644
index 0000000000..26bf1ef985
--- /dev/null
+++ b/browser/themes/shared/icons/library.svg
@@ -0,0 +1,9 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M9.25 3.625a.625.625 0 0 0-1.25 0l0 10.75a.625.625 0 0 0 1.25 0l0-10.75z"/>
+  <path d="m5 4.625 0 9.75a.625.625 0 0 0 1.25 0l0-9.75a.625.625 0 0 0-1.25 0z"/>
+  <path d="m2 1.625 0 12.75a.625.625 0 0 0 1.25 0l0-12.75a.625.625 0 0 0-1.25 0z"/>
+  <path d="M14.506 15a.626.626 0 0 1-.604-.463l-2.881-10.75a.624.624 0 0 1 .441-.766.62.62 0 0 1 .766.441l2.881 10.75a.624.624 0 0 1-.603.788z"/>
+</svg>
diff --git a/browser/themes/shared/icons/login.svg b/browser/themes/shared/icons/login.svg
new file mode 100644
index 0000000000..51a8f285fc
--- /dev/null
+++ b/browser/themes/shared/icons/login.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M15.375 7 7.858 7c-.447-1.721-2-3-3.858-3-2.206 0-4 1.794-4 4s1.794 4 4 4c2.12 0 3.843-1.662 3.975-3.75l4.9 0 0 2.25a.625.625 0 0 0 1.25 0l0-2.25 1.25 0a.625.625 0 0 0 0-1.25zM4 10.75c-1.517 0-2.75-1.233-2.75-2.75S2.483 5.25 4 5.25 6.75 6.483 6.75 8 5.517 10.75 4 10.75z"/>
+</svg>
diff --git a/browser/themes/shared/icons/logo-android.svg b/browser/themes/shared/icons/logo-android.svg
new file mode 100644
index 0000000000..b8b0ab040b
--- /dev/null
+++ b/browser/themes/shared/icons/logo-android.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path fill="context-fill" d="M9.24 16.03v2.73c0 .7-.56 1.24-1.25 1.24-.7 0-1.26-.55-1.26-1.24v-2.73h-.9c-.75 0-1.35-.59-1.35-1.33v-8h11.2v8c0 .74-.6 1.33-1.36 1.33h-.9v2.73c0 .7-.55 1.24-1.25 1.24s-1.26-.55-1.26-1.24v-2.73H9.24zM2.76 6.5c.7 0 1.25.55 1.25 1.24v5.15c0 .7-.56 1.24-1.25 1.24-.7 0-1.26-.55-1.26-1.24V7.73c0-.69.56-1.24 1.26-1.24zm14.64 0c.7 0 1.25.55 1.25 1.24v5.15c0 .7-.55 1.24-1.25 1.24s-1.26-.55-1.26-1.24V7.73c0-.69.56-1.24 1.26-1.24zM6.6 0c.06 0 .12.03.16.1l.9 1.58a6.04 6.04 0 0 1 4.84 0L13.4.1a.18.18 0 0 1 .24-.07c.09.05.12.15.07.24l-.89 1.58a5.04 5.04 0 0 1 2.86 4.43H4.48c0-1.9 1.15-3.56 2.85-4.43L6.45.26a.17.17 0 0 1 .07-.24A.18.18 0 0 1 6.6 0zm.9 3.33c-.26 0-.47.2-.47.46a.47.47 0 0 0 .93 0 .47.47 0 0 0-.47-.46zm5.16 0c-.25 0-.47.2-.47.46a.47.47 0 0 0 .94 0 .47.47 0 0 0-.47-.46z"/>
+</svg>
diff --git a/browser/themes/shared/icons/logo-ios.svg b/browser/themes/shared/icons/logo-ios.svg
new file mode 100644
index 0000000000..dcd70b5588
--- /dev/null
+++ b/browser/themes/shared/icons/logo-ios.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path fill="context-fill" d="M16.84 15.03c-.27.63-.59 1.2-.96 1.74-.51.72-.93 1.23-1.25 1.5-.5.46-1.03.7-1.6.71-.41 0-.9-.12-1.48-.35a4.25 4.25 0 0 0-1.6-.36c-.5 0-1.05.12-1.63.36A4.4 4.4 0 0 1 6.9 19c-.55.02-1.1-.22-1.64-.73-.35-.3-.78-.82-1.3-1.56-.56-.78-1.02-1.7-1.38-2.73A10.03 10.03 0 0 1 2 10.7c0-1.2.26-2.25.78-3.12a4.6 4.6 0 0 1 3.86-2.28c.43 0 1 .13 1.71.4.71.26 1.16.4 1.36.4.15 0 .66-.16 1.51-.47.8-.3 1.5-.41 2.05-.37 1.51.13 2.65.72 3.4 1.8a3.8 3.8 0 0 0-2 3.44 4.1 4.1 0 0 0 2.5 3.68c-.1.3-.21.57-.33.84zM13.37 1.36c0 .9-.33 1.74-.98 2.52-.8.92-1.75 1.46-2.79 1.37a3.95 3.95 0 0 1 1.02-2.89c.34-.38.76-.7 1.28-.95.51-.25 1-.39 1.45-.41.02.12.02.24.02.36z"/>
+</svg>
diff --git a/browser/themes/shared/icons/mail.svg b/browser/themes/shared/icons/mail.svg
new file mode 100644
index 0000000000..62fd0e0875
--- /dev/null
+++ b/browser/themes/shared/icons/mail.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M13 2H3a3.013 3.013 0 0 0-3 3v6a3.013 3.013 0 0 0 3 3h10a3.013 3.013 0 0 0 3-3V5a3.013 3.013 0 0 0-3-3zm1 9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1z"/>
+  <path d="M8 9a.5.5 0 0 1-.294-.1l-5.5-4a.5.5 0 1 1 .588-.8L8 7.882 13.207 4.1a.5.5 0 0 1 .588.809l-5.5 4A.5.5 0 0 1 8 9z"/>
+</svg>
diff --git a/browser/themes/shared/icons/menu-badged.svg b/browser/themes/shared/icons/menu-badged.svg
new file mode 100644
index 0000000000..bbfce72776
--- /dev/null
+++ b/browser/themes/shared/icons/menu-badged.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M2.625 4.25a.625.625 0 0 1 0-1.25l4.488 0a.625.625 0 0 1 0 1.25l-4.488 0z"/>
+  <path d="m13.375 8.25-10.75 0a.625.625 0 0 1 0-1.25l10.75 0a.625.625 0 0 1 0 1.25z"/>
+  <path d="m13.375 12.25-10.75 0a.625.625 0 0 1 0-1.25l10.75 0a.625.625 0 0 1 0 1.25z"/>
+</svg>
diff --git a/browser/themes/shared/icons/menu.svg b/browser/themes/shared/icons/menu.svg
new file mode 100644
index 0000000000..39628990ce
--- /dev/null
+++ b/browser/themes/shared/icons/menu.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m13.375 4.25-10.75 0a.625.625 0 0 1 0-1.25l10.75 0a.625.625 0 0 1 0 1.25z"/>
+  <path d="m13.375 8.25-10.75 0a.625.625 0 0 1 0-1.25l10.75 0a.625.625 0 0 1 0 1.25z"/>
+  <path d="m13.375 12.25-10.75 0a.625.625 0 0 1 0-1.25l10.75 0a.625.625 0 0 1 0 1.25z"/>
+</svg>
diff --git a/browser/themes/shared/icons/new-tab.svg b/browser/themes/shared/icons/new-tab.svg
new file mode 100644
index 0000000000..2d475aada0
--- /dev/null
+++ b/browser/themes/shared/icons/new-tab.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M11 11V9a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6H1a1 1 0 0 0 0 2h7v-1a1 1 0 0 1 1-1zm4.5 1H13V9.5a.5.5 0 0 0-1 0V12H9.5a.5.5 0 0 0 0 1H12v2.5a.5.5 0 0 0 1 0V13h2.5a.5.5 0 0 0 0-1z"/>
+</svg>
diff --git a/browser/themes/shared/icons/notification-fill-12.svg b/browser/themes/shared/icons/notification-fill-12.svg
new file mode 100644
index 0000000000..6af8d91526
--- /dev/null
+++ b/browser/themes/shared/icons/notification-fill-12.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill-opacity="context-fill-opacity">
+  <circle fill="context-fill" cx="6" cy="6" r="3"/>
+</svg>
diff --git a/browser/themes/shared/icons/open.svg b/browser/themes/shared/icons/open.svg
new file mode 100644
index 0000000000..b7682227bf
--- /dev/null
+++ b/browser/themes/shared/icons/open.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.859 3.2a1.335 1.335 0 0 1-1.217.8H13v1h1v8H2V5h8V4h-.642a1.365 1.365 0 0 1-1.325-1.11L6.584 1.538A2 2 0 0 0 5.219 1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-1.141-1.8zM2 3h3.219l1.072 1H2zm7.854-.146L11 1.707V8.5a.5.5 0 0 0 1 0V1.707l1.146 1.146a.5.5 0 1 0 .707-.707l-2-2a.5.5 0 0 0-.707 0l-2 2a.5.5 0 0 0 .707.707z"/>
+</svg>
diff --git a/browser/themes/shared/icons/pin-12.svg b/browser/themes/shared/icons/pin-12.svg
new file mode 100644
index 0000000000..2c354bdfa4
--- /dev/null
+++ b/browser/themes/shared/icons/pin-12.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill-opacity="context-fill-opacity">
+  <path fill="context-fill" d="m9.05 4.055-1.45 0-.444-.165c0 0-.966-.964-1.544-1.541l.494-.494a.5.5 0 1 0-.708-.708l-.709.708-3.542 3.543a.5.5 0 1 0 .708.708l.494-.494c.581.582 1.555 1.558 1.555 1.558l.15.427.001 1.452a.922.922 0 0 0 .926.926.92.92 0 0 0 .653-.272l1.68-1.68 2.83 2.83a.5.5 0 1 0 .708-.708l-2.83-2.83 1.68-1.68a.923.923 0 0 0 .201-1.008.918.918 0 0 0-.853-.572z"/>
+</svg>
diff --git a/browser/themes/shared/icons/privateBrowsing.svg b/browser/themes/shared/icons/privateBrowsing.svg
new file mode 100644
index 0000000000..c896922d7e
--- /dev/null
+++ b/browser/themes/shared/icons/privateBrowsing.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M15.931 5.479c-1.525-2.001-4.517-2.257-6.381-.545l-1.043.958-1.02 0-1.042-.958C4.581 3.223 1.589 3.478.064 5.479c-.197.78.108 3.66.28 4.113.347 1.83 1.842 3.206 3.635 3.206.895 0 1.706-.357 2.347-.929l.391-.334a1.936 1.936 0 0 1 2.511-.021l.586.486 0-.003c.617.497 1.375.801 2.203.801 1.792 0 3.288-1.376 3.635-3.206.172-.453.488-3.321.279-4.113zM6.232 8.452c-.427.482-1.088.792-1.832.792-.744 0-1.405-.31-1.832-.792a.693.693 0 0 1 0-.905c.427-.482 1.088-.792 1.832-.792.744 0 1.405.31 1.832.792a.693.693 0 0 1 0 .905zm7.2 0c-.427.482-1.088.792-1.832.792-.744 0-1.405-.31-1.832-.792a.693.693 0 0 1 0-.905c.427-.482 1.088-.792 1.832-.792.744 0 1.405.31 1.832.792a.693.693 0 0 1 0 .905z"/>
+</svg>
diff --git a/browser/themes/shared/icons/quickactions.svg b/browser/themes/shared/icons/quickactions.svg
new file mode 100644
index 0000000000..9631efd296
--- /dev/null
+++ b/browser/themes/shared/icons/quickactions.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M12.6753 1H11.0824C10.7417 1.0002 10.4091 1.10648 10.1315 1.30409C9.8539 1.50169 9.64439 1.78176 9.53263 2.10365L8.47529 5.16423C8.39727 5.39146 8.37457 5.63401 8.40906 5.87177C8.44355 6.10953 8.53425 6.33564 8.67362 6.53133L8.67458 6.53268C8.8141 6.72754 8.99798 6.88641 9.21103 6.99617C9.42409 7.10593 9.6602 7.16343 9.89986 7.16391L9.90117 7.16391H10.2989L9.88614 9.95315C9.85823 10.1418 9.91379 10.3332 10.0384 10.4775C10.1629 10.6219 10.3441 10.7049 10.5348 10.7049H11.3788C11.5696 10.7049 11.751 10.6217 11.8756 10.4771L15.6301 6.11881L15.6317 6.117C15.8218 5.89841 15.9446 5.62944 15.9852 5.34257C16.0257 5.05556 15.9823 4.76295 15.8602 4.50011C15.6124 3.96203 15.0834 3.62294 14.4908 3.62294H13.887L14.1011 2.99916C14.1794 2.77214 14.2023 2.52972 14.168 2.29206C14.1336 2.05421 14.0429 1.82802 13.9034 1.63235C13.7639 1.43668 13.5796 1.27719 13.3659 1.16719C13.1524 1.05725 12.9155 0.999923 12.6753 1ZM12.6758 2.31147C12.7071 2.31145 12.7379 2.31891 12.7656 2.33321C12.7934 2.34752 12.8174 2.36827 12.8356 2.39373C12.8537 2.41919 12.8655 2.44863 12.87 2.4796C12.8745 2.51056 12.8715 2.54215 12.8613 2.57172L12.3484 4.06579C12.2797 4.26612 12.3119 4.48734 12.435 4.65972C12.5581 4.8321 12.7568 4.93441 12.9687 4.93441H14.4908C14.5712 4.93441 14.6353 4.97539 14.6691 5.04894L14.6708 5.05259C14.6862 5.08575 14.6917 5.12268 14.6866 5.1589C14.6815 5.19512 14.6659 5.22906 14.6419 5.25662L11.3396 9.08991L11.7075 6.60417C11.7354 6.41556 11.6798 6.22414 11.5553 6.07978C11.4307 5.93543 11.2495 5.85244 11.0588 5.85244H9.90201C9.87058 5.8523 9.83962 5.84473 9.81166 5.83032C9.78381 5.81598 9.75973 5.79526 9.74138 5.76986C9.72326 5.74419 9.71146 5.7146 9.70695 5.68349C9.70241 5.65224 9.7055 5.61998 9.71569 5.5901L10.772 2.53247C10.7945 2.46799 10.8364 2.41209 10.892 2.3725C10.9477 2.33287 11.0143 2.31154 11.0827 2.31147L12.6758 2.31147ZM2.09835 1C1.54183 1 1.00811 1.22108 0.614593 1.61459C0.221076 2.00811 0 2.54184 0 3.09835V12.5409C0 13.0975 0.221076 13.6312 0.614593 14.0247C1.00811 14.4182 1.54183 14.6393 2.09835 14.6393H12.5901C13.1466 14.6393 13.6804 14.4182 14.0739 14.0247C14.4674 13.6312 14.6885 13.0975 14.6885 12.5409V8.86882L13.377 10.4426V12.6983L12.7475 13.3278H1.94098L1.31147 12.6983V6.50818H7.86882L7.34423 5.19671H1.31147V2.94098L1.94098 2.31147H7.86882L8.39341 1H2.09835Z"/>
+</svg>
\ No newline at end of file
diff --git a/browser/themes/shared/icons/reader-mode.svg b/browser/themes/shared/icons/reader-mode.svg
new file mode 100644
index 0000000000..5454f63ad9
--- /dev/null
+++ b/browser/themes/shared/icons/reader-mode.svg
@@ -0,0 +1,9 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">

+  <path d="M4 1a2 2 0 0 0-2 2l0 10a2 2 0 0 0 2 2l8 0a2 2 0 0 0 2-2l0-10a2 2 0 0 0-2-2L4 1zm8.75 12.15-.6.6-8.3 0-.6-.6 0-10.3.6-.6 8.3 0 .6.6 0 10.3z"/>

+  <path d="m10.125 5.25-4.25 0a.625.625 0 0 1 0-1.25l4.25 0a.625.625 0 0 1 0 1.25z"/>

+  <path d="m10.125 8.25-4.25 0a.625.625 0 0 1 0-1.25l4.25 0a.625.625 0 0 1 0 1.25z"/>

+  <path d="m8.125 11.25-2.25 0a.625.625 0 0 1 0-1.25l2.25 0a.625.625 0 0 1 0 1.25z"/>

+</svg>

diff --git a/browser/themes/shared/icons/reload-to-stop.svg b/browser/themes/shared/icons/reload-to-stop.svg
new file mode 100644
index 0000000000..fe7635f1d9
--- /dev/null
+++ b/browser/themes/shared/icons/reload-to-stop.svg
@@ -0,0 +1,138 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="260" height="20" fill="none" fill-opacity="context-fill-opacity">
+  <defs>
+    <clipPath id="g">
+      <path d="M11.11 9.78c0 0 4.72-4.72 4.72-4.72a.63.63 0 0 0-.45-1.06.63.63 0 0 0-.44.17c0 0-4.7 4.7-4.7 4.7 0 0-.48 0-.48 0 0 0-4.7-4.7-4.7-4.7a.63.63 0 0 0-.87.02.63.63 0 0 0-.02.87c0 0 4.7 4.69 4.7 4.69 0 0 0 .5 0 .5 0 0-4.7 4.69-4.7 4.69a.63.63 0 0 0 .89.89c0 0 4.69-4.7 4.69-4.7 0 0 .5 0 .5 0 0 0 4.69 4.7 4.69 4.7a.63.63 0 0 0 1.06-.45.63.63 0 0 0-.17-.44c0 0-4.72-4.72-4.72-4.72 0 0 0-.44 0-.44z"/>
+    </clipPath>
+  </defs>
+  <svg viewBox="0 0 20 20" width="20" height="20">
+    <defs>
+      <clipPath id="a">
+        <path d="M12.71 8c0 0 3.99 0 3.99 0 0 0 .3-.3.3-.3 0 0 0-3.99 0-3.99a.5.5 0 0 0-.85-.35c0 0-1.46 1.46-1.46 1.46a6.95 6.95 0 0 0-4.69-1.81c-3.86 0-7 3.14-7 7 0 3.86 3.14 7 7 7a6.97 6.97 0 0 0 6.97-6.32.63.63 0 0 0-.56-.68.64.64 0 0 0-.68.56 5.73 5.73 0 0 1-5.72 5.19 5.76 5.76 0 0 1-5.75-5.75 5.76 5.76 0 0 1 5.75-5.75c1.44 0 2.78.53 3.81 1.45 0 0-1.45 1.45-1.45 1.45a.5.5 0 0 0 .35.85z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#a)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M7.272 5.586c-3.647 1.048-3.685 3.897-3.17 5.68.821 2.842 2.696 5.371 6.835 4.918.389-.043 1.68-.478 2.125-.559 2.508-1.254 3.069-3.243 3.342-4.8.23-1.314-1.092-3.759-1.092-3.759 0 0-1.187-2.566-4.187-1.878-1.594-.04-2.858.112-3.853.398"/>
+      <path d="M11.989-1.5C5.203-1.5-2.5-1.5-2.5-1.5c0 0 0 24.608 0 24.608 0 0 24.608 0 24.608 0 0 0 0-24.608 0-24.608 0 0-4.775 0-10.119 0"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="20">
+    <defs>
+      <clipPath id="b">
+        <path d="M13.35 10.31c0 0 2.98 2.65 2.98 2.65 0 0 .42-.02.42-.02 0 0 2.65-2.98 2.65-2.98a.5.5 0 0 0-.4-.83c0 0-2.06.12-2.06.12a6.95 6.95 0 0 0-2.3-4.47c-2.88-2.57-7.32-2.31-9.88.57-2.57 2.88-2.31 7.32.57 9.88a6.97 6.97 0 0 0 9.41-.09.63.63 0 0 0 .03-.88.64.64 0 0 0-.88-.03 5.73 5.73 0 0 1-7.73.07 5.76 5.76 0 0 1-.47-8.12 5.76 5.76 0 0 1 8.12-.47c1.07.96 1.72 2.24 1.88 3.61 0 0-2.05.12-2.05.12a.5.5 0 0 0-.3.87z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#b)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M7.272 5.586c-3.647 1.048-3.685 3.897-3.17 5.68.821 2.842 2.696 5.371 6.835 4.918.389-.043 1.68-.478 2.125-.559 2.508-1.254 3.069-3.243 3.342-4.8.23-1.314-1.092-3.759-1.092-3.759 0 0-1.187-2.566-4.187-1.878-1.594-.04-2.858.112-3.853.398"/>
+      <path d="M11.989-1.5C5.203-1.5-2.5-1.5-2.5-1.5c0 0 0 24.608 0 24.608 0 0 24.608 0 24.608 0 0 0 0-24.608 0-24.608 0 0-4.775 0-10.119 0"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="40">
+    <defs>
+      <clipPath id="c">
+        <path d="M10.25 13.36c0 0-2.12 3.38-2.12 3.38 0 0 .09.41.09.41 0 0 3.38 2.12 3.38 2.12a.5.5 0 0 0 .75-.53c0 0-.46-2.01-.46-2.01a6.95 6.95 0 0 0 4.03-3c2.05-3.27 1.06-7.6-2.2-9.65-3.27-2.05-7.6-1.06-9.65 2.2a6.97 6.97 0 0 0 1.65 9.26.63.63 0 0 0 .88-.11.64.64 0 0 0-.11-.88 5.73 5.73 0 0 1-1.35-7.61 5.76 5.76 0 0 1 7.93-1.81 5.76 5.76 0 0 1 1.81 7.93c-.77 1.22-1.93 2.07-3.25 2.45 0 0-.46-2-.46-2a.5.5 0 0 0-.91-.15z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#c)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M7.272 5.586c-3.647 1.048-3.685 3.897-3.17 5.68.821 2.842 2.696 5.371 6.835 4.918.389-.043 1.68-.478 2.125-.559 2.508-1.254 3.069-3.243 3.342-4.8.23-1.314-1.092-3.759-1.092-3.759 0 0-1.187-2.566-4.187-1.878-1.594-.04-2.858.112-3.853.398"/>
+      <path d="M11.989-1.5C5.203-1.5-2.5-1.5-2.5-1.5c0 0 0 24.608 0 24.608 0 0 24.608 0 24.608 0 0 0 0-24.608 0-24.608 0 0-4.775 0-10.119 0"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="60">
+    <defs>
+      <clipPath id="d">
+        <path d="M7.28 11.98c0 0-3.99-.02-3.99-.02 0 0-.3.3-.3.3 0 0-.02 3.99-.02 3.99a.5.5 0 0 0 .85.36c0 0 1.47-1.45 1.47-1.45a6.95 6.95 0 0 0 4.68 1.84c3.86.02 7.02-3.1 7.04-6.96.02-3.86-3.1-7.02-6.96-7.04a6.97 6.97 0 0 0-7 6.28.63.63 0 0 0 .56.69.64.64 0 0 0 .69-.56 5.73 5.73 0 0 1 5.75-5.16 5.76 5.76 0 0 1 5.72 5.78 5.76 5.76 0 0 1-5.78 5.72c-1.44-.01-2.77-.55-3.8-1.47 0 0 1.46-1.44 1.46-1.44a.5.5 0 0 0-.35-.86z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#d)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M7.272 5.586c-3.647 1.048-3.685 3.897-3.17 5.68.821 2.842 2.696 5.371 6.835 4.918.389-.043 1.68-.478 2.125-.559 2.508-1.254 3.069-3.243 3.342-4.8.23-1.314-1.092-3.759-1.092-3.759 0 0-1.187-2.566-4.187-1.878-1.594-.04-2.858.112-3.853.398"/>
+      <path d="M11.989-1.5C5.203-1.5-2.5-1.5-2.5-1.5c0 0 0 24.608 0 24.608 0 0 24.608 0 24.608 0 0 0 0-24.608 0-24.608 0 0-4.775 0-10.119 0"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="80">
+    <defs>
+      <clipPath id="e">
+        <path d="M6.65 9.68c0 0-2.97-2.67-2.97-2.67 0 0-.42.02-.42.02 0 0-2.67 2.97-2.67 2.97a.5.5 0 0 0 .4.83c0 0 2.06-.11 2.06-.11a6.95 6.95 0 0 0 2.27 4.48c2.87 2.58 7.31 2.34 9.89-.53 2.58-2.87 2.34-7.31-.53-9.89a6.97 6.97 0 0 0-9.41.04.63.63 0 0 0-.04.88.64.64 0 0 0 .88.04 5.73 5.73 0 0 1 7.73-.03 5.76 5.76 0 0 1 .43 8.12 5.76 5.76 0 0 1-8.12.43c-1.07-.96-1.71-2.25-1.86-3.62 0 0 2.05-.11 2.05-.11a.5.5 0 0 0 .31-.87z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#e)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M7.272 5.586c-3.647 1.048-3.685 3.897-3.17 5.68.821 2.842 2.696 5.371 6.835 4.918.389-.043 1.68-.478 2.125-.559 2.508-1.254 3.069-3.243 3.342-4.8.23-1.314-1.092-3.759-1.092-3.759 0 0-1.187-2.566-4.187-1.878-1.594-.04-2.858.112-3.853.398"/>
+      <path d="M11.989-1.5C5.203-1.5-2.5-1.5-2.5-1.5c0 0 0 24.608 0 24.608 0 0 24.608 0 24.608 0 0 0 0-24.608 0-24.608 0 0-4.775 0-10.119 0"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="100">
+    <defs>
+      <clipPath id="f">
+        <path d="M7.31 7.98c0 0-1.14-3.83-1.14-3.83 0 0-.37-.2-.37-.2 0 0-3.83 1.14-3.83 1.14a.5.5 0 0 0-.1.92c0 0 1.82.98 1.82.98a6.95 6.95 0 0 0-.4 5.01c1.1 3.7 5.01 5.81 8.71 4.71 3.7-1.1 5.81-5.01 4.71-8.71a6.97 6.97 0 0 0-8.05-4.87.63.63 0 0 0-.49.73.64.64 0 0 0 .73.49 5.73 5.73 0 0 1 6.61 4 5.76 5.76 0 0 1-3.87 7.15 5.76 5.76 0 0 1-7.15-3.87c-.41-1.38-.28-2.81.3-4.06 0 0 1.81.98 1.81.98a.5.5 0 0 0 .72-.58z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#f)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M8.297 5.357c-4.661.778-4.755 3.972-4.195 5.909.821 2.842 2.696 5.371 6.835 4.918.389-.043 1.68-.478 2.125-.559 2.508-1.254 3.069-3.243 3.342-4.8.012-.069.02-.141.024-.216"/>
+      <path d="M14.726-1.5C7.477-1.5-2.5-1.5-2.5-1.5c0 0 0 24.608 0 24.608 0 0 24.608 0 24.608 0 0 0 0-.726 0-1.929"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="120">
+    <defs>
+      <clipPath id="h">
+        <path d="M8.39 7.04c0 0 .55-3.95.55-3.95 0 0-.26-.34-.26-.34 0 0-3.95-.55-3.95-.55a.5.5 0 0 0-.47.8c0 0 1.24 1.65 1.24 1.65a6.95 6.95 0 0 0-2.44 4.39c-.53 3.82 2.14 7.37 5.97 7.9 3.82.53 7.37-2.14 7.9-5.97a6.97 6.97 0 0 0-5.3-7.77.63.63 0 0 0-.75.46.64.64 0 0 0 .46.75 5.73 5.73 0 0 1 4.35 6.39 5.76 5.76 0 0 1-6.49 4.9 5.76 5.76 0 0 1-4.9-6.49c.2-1.43.91-2.68 1.96-3.57 0 0 1.24 1.64 1.24 1.64a.5.5 0 0 0 .89-.23z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#g)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 .062.063.178.181" fill="none"/>
+    </g>
+    <g clip-path="url(#h)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M9.341 5.23c-5.689.453-5.838 3.964-5.239 6.036.467 1.617 1.275 3.133 2.648 4.055"/>
+      <path d="M17.462-1.5c-7.131 0-19.962 0-19.962 0 0 0 0 10.326 0 17.6"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="140">
+    <defs>
+      <clipPath id="i">
+        <path d="M9.47 6.68c0 0 1.84-3.54 1.84-3.54 0 0-.13-.4-.13-.4 0 0-3.54-1.84-3.54-1.84a.5.5 0 0 0-.71.59c0 0 .62 1.97.62 1.97a6.95 6.95 0 0 0-3.77 3.32c-1.78 3.42-.44 7.66 2.99 9.44 3.42 1.78 7.66.44 9.44-2.99a6.97 6.97 0 0 0-2.4-9.1.63.63 0 0 0-.86.18.64.64 0 0 0 .18.87 5.73 5.73 0 0 1 1.97 7.47 5.76 5.76 0 0 1-7.75 2.45 5.76 5.76 0 0 1-2.45-7.75c.66-1.28 1.75-2.22 3.04-2.71 0 0 .62 1.96.62 1.96a.5.5 0 0 0 .92.08z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#g)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 2.618 2.669 5.486 5.594" fill="none"/>
+    </g>
+    <g clip-path="url(#i)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M11.125 5.188c-2.026-.051-3.518.208-4.603.658"/>
+      <path d="M22.108-1.5c0 0-6.074 0-12.186 0"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="160">
+    <g clip-path="url(#g)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 6.727 6.858 10.432 10.636" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="180">
+    <g clip-path="url(#g)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 12.813 13.063 12.813 13.063" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="200">
+    <g clip-path="url(#g)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 12.813 13.063 12.813 13.063" fill="none"/>
+    </g>
+    <g clip-path="url(#g)">
+      <path stroke="context-fill" stroke-width="4" d="M3.375 16.375c0 0 2.502-2.454 5.315-5.214" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="220">
+    <g clip-path="url(#g)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 12.813 13.063 12.813 13.063" fill="none"/>
+    </g>
+    <g clip-path="url(#g)">
+      <path stroke="context-fill" stroke-width="4" d="M3.375 16.375c0 0 6.455-6.331 10.29-10.093" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="240">
+    <g clip-path="url(#g)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 12.813 13.063 12.813 13.063" fill="none"/>
+    </g>
+    <g clip-path="url(#g)">
+      <path stroke="context-fill" stroke-width="4" d="M3.375 16.375c0 0 13.063-12.813 13.063-12.813" fill="none"/>
+    </g>
+  </svg>
+</svg>
diff --git a/browser/themes/shared/icons/save.svg b/browser/themes/shared/icons/save.svg
new file mode 100644
index 0000000000..0207fb6045
--- /dev/null
+++ b/browser/themes/shared/icons/save.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M14 3h-2v2h2v8H2V5h7V3h-.849L6.584 1.538A2 2 0 0 0 5.219 1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM2 3h3.219l1.072 1H2z"/>
+  <path d="M8.146 6.146a.5.5 0 0 0 0 .707l2 2a.5.5 0 0 0 .707 0l2-2a.5.5 0 1 0-.707-.707L11 7.293V.5a.5.5 0 0 0-1 0v6.793L8.854 6.146a.5.5 0 0 0-.708 0z"/>
+</svg>
diff --git a/browser/themes/shared/icons/screenshot.svg b/browser/themes/shared/icons/screenshot.svg
new file mode 100644
index 0000000000..92b1473b61
--- /dev/null
+++ b/browser/themes/shared/icons/screenshot.svg
@@ -0,0 +1,4 @@
+<!-- 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 viewBox="0 0 32 32" width="32" height="32" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M8 2a4 4 0 0 0-4 4h4V2zm12 0h-4v4h4V2zm8 0v4h4a4 4 0 0 0-4-4zM14 2h-4v4h4V2zm12 0h-4v4h4V2zm2 10h4V8h-4v4zm0 12a4 4 0 0 0 4-4h-4v4zm0-6h4v-4h-4v4zm-.882-4.334a4 4 0 0 0-5.57-.984l-7.67 5.662-3.936-2.76c.031-.193.05-.388.058-.584a4.976 4.976 0 0 0-2-3.978V8H4v2.1a5 5 0 1 0 3.916 8.948l2.484 1.738-2.8 1.964a4.988 4.988 0 1 0 2.3 3.266l17.218-12.35zM5 17.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 12a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm10.8-4.858l6.034 4.6a4 4 0 0 0 5.57-.984L19.28 22.2l-3.48 2.442z"/></svg>
diff --git a/browser/themes/shared/icons/sidebars-right.svg b/browser/themes/shared/icons/sidebars-right.svg
new file mode 100644
index 0000000000..5bf51e168b
--- /dev/null
+++ b/browser/themes/shared/icons/sidebars-right.svg
@@ -0,0 +1,9 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" fill-rule="evenodd">
+  <path d="M0 12.25 0 4a2 2 0 0 1 2-2l12 0a2 2 0 0 1 2 2l0 8.25a2 2 0 0 1-2 2l-12 0a2 2 0 0 1-2-2zm14.75.15 0-8.55-.6-.6-4.9 0 0 9.75 4.9 0 .6-.6zM8 13l-6.15 0-.6-.6 0-8.55.6-.6 6.15 0L8 13z"/>
+  <path d="M10.5 10.5a.5.5 0 0 1 .5-.5l2 0a.5.5 0 0 1 0 1l-2 0a.5.5 0 0 1-.5-.5z"/>
+  <path d="M10.5 8a.5.5 0 0 1 .5-.5l2 0a.5.5 0 0 1 0 1l-2 0a.5.5 0 0 1-.5-.5z"/>
+  <path d="M10.5 5.5A.5.5 0 0 1 11 5l2 0a.5.5 0 0 1 0 1l-2 0a.5.5 0 0 1-.5-.5z"/>
+</svg>
diff --git a/browser/themes/shared/icons/sidebars.svg b/browser/themes/shared/icons/sidebars.svg
new file mode 100644
index 0000000000..e116c9e2d0
--- /dev/null
+++ b/browser/themes/shared/icons/sidebars.svg
@@ -0,0 +1,9 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" fill-rule="evenodd">
+  <path d="M16 12.25 16 4a2 2 0 0 0-2-2L2 2a2 2 0 0 0-2 2l0 8.25a2 2 0 0 0 2 2l12 0a2 2 0 0 0 2-2zm-14.75.15 0-8.55.6-.6 4.9 0 0 9.75-4.9 0-.6-.6zM8 13l6.15 0 .6-.6 0-8.55-.6-.6-6.15 0L8 13z"/>
+  <path d="M5.5 10.5A.5.5 0 0 0 5 10l-2 0a.5.5 0 0 0 0 1l2 0a.5.5 0 0 0 .5-.5z"/>
+  <path d="M5.5 8a.5.5 0 0 0-.5-.5l-2 0a.5.5 0 0 0 0 1l2 0a.5.5 0 0 0 .5-.5z"/>
+  <path d="M5.5 5.5A.5.5 0 0 0 5 5L3 5a.5.5 0 0 0 0 1l2 0a.5.5 0 0 0 .5-.5z"/>
+</svg>
diff --git a/browser/themes/shared/icons/sort.svg b/browser/themes/shared/icons/sort.svg
new file mode 100644
index 0000000000..15d68af6d5
--- /dev/null
+++ b/browser/themes/shared/icons/sort.svg
@@ -0,0 +1,11 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m2.951 7-.75 0-.25.25 0 .75.25.25.75 0 .25-.25 0-.75-.25-.25z"/>
+  <path d="m2.951 10-.75 0-.25.25 0 .75.25.25.75 0 .25-.25 0-.75-.25-.25z"/>
+  <path d="m2.951 4-.75 0-.25.25 0 .75.25.25.75 0 .25-.25 0-.75-.25-.25z"/>
+  <path d="m13.227 5.25-7.748 0a.626.626 0 1 1 0-1.25l7.748 0a.626.626 0 1 1 0 1.25z"/>
+  <path d="m11.228 8.25-5.75 0a.625.625 0 0 1 0-1.25l5.75 0a.625.625 0 0 1 0 1.25z"/>
+  <path d="m9.228 11.25-3.75 0a.625.625 0 0 1 0-1.25l3.75 0a.625.625 0 0 1 0 1.25z"/>
+</svg>
diff --git a/browser/themes/shared/icons/stop-to-reload.svg b/browser/themes/shared/icons/stop-to-reload.svg
new file mode 100644
index 0000000000..fd9b30d86c
--- /dev/null
+++ b/browser/themes/shared/icons/stop-to-reload.svg
@@ -0,0 +1,173 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="300" height="20" stroke-width="4" fill="none" fill-opacity="context-fill-opacity">
+  <defs>
+    <clipPath id="a">
+      <path d="M11.11 9.78c0 0 4.72-4.72 4.72-4.72a.63.63 0 0 0-.45-1.06.63.63 0 0 0-.44.17c0 0-4.7 4.7-4.7 4.7 0 0-.48 0-.48 0 0 0-4.7-4.7-4.7-4.7a.63.63 0 0 0-.87.02.63.63 0 0 0-.02.87c0 0 4.7 4.69 4.7 4.69 0 0 0 .5 0 .5 0 0-4.7 4.69-4.7 4.69a.63.63 0 0 0 .89.89c0 0 4.69-4.7 4.69-4.7 0 0 .5 0 .5 0 0 0 4.69 4.7 4.69 4.7a.63.63 0 0 0 1.06-.45.63.63 0 0 0-.17-.44c0 0-4.72-4.72-4.72-4.72 0 0 0-.44 0-.44z"/>
+    </clipPath>
+    <clipPath id="m">
+      <path d="M12.71 8c0 0 3.99 0 3.99 0 0 0 .3-.3.3-.3 0 0 0-3.99 0-3.99a.5.5 0 0 0-.85-.35c0 0-1.46 1.46-1.46 1.46a6.95 6.95 0 0 0-4.69-1.81c-3.86 0-7 3.14-7 7 0 3.86 3.14 7 7 7a6.97 6.97 0 0 0 6.97-6.32.63.63 0 0 0-.56-.68.64.64 0 0 0-.68.56 5.73 5.73 0 0 1-5.72 5.19 5.76 5.76 0 0 1-5.75-5.75 5.76 5.76 0 0 1 5.75-5.75c1.44 0 2.78.53 3.81 1.45 0 0-1.45 1.45-1.45 1.45a.5.5 0 0 0 .35.85z"/>
+    </clipPath>
+  </defs>
+  <svg viewBox="0 0 20 20" width="20" height="20">
+    <g clip-path="url(#a)">
+      <path stroke="context-fill" stroke-width="4" d="M3.375 16.375c0 0 13.063-12.813 13.063-12.813" fill="none"/>
+    </g>
+    <g clip-path="url(#a)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 12.813 13.063 12.813 13.063" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="20">
+    <g clip-path="url(#a)">
+      <path stroke="context-fill" stroke-width="4" d="M9.003 10.855c3.537-3.469 7.435-7.293 7.435-7.293" fill="none"/>
+    </g>
+    <g clip-path="url(#a)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 12.813 13.063 12.813 13.063" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="40">
+    <g clip-path="url(#a)">
+      <path stroke="context-fill" stroke-width="4" d="M14.003 5.95c1.44-1.412 2.435-2.388 2.435-2.388" fill="none"/>
+    </g>
+    <g clip-path="url(#a)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 12.813 13.063 12.813 13.063" fill="none"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="60">
+    <defs>
+      <clipPath id="b">
+        <path d="M13.36 9.95c0 0 3.25 2.32 3.25 2.32 0 0 .42-.07.42-.07 0 0 2.32-3.25 2.32-3.25a.5.5 0 0 0-.49-.78c0 0-2.04.34-2.04.34a6.95 6.95 0 0 0-2.76-4.2c-3.14-2.24-7.52-1.51-9.76 1.63-2.24 3.14-1.51 7.52 1.63 9.76a6.97 6.97 0 0 0 9.34-1.09.63.63 0 0 0-.06-.88.64.64 0 0 0-.88.06 5.73 5.73 0 0 1-7.68.9 5.76 5.76 0 0 1-1.34-8.02 5.76 5.76 0 0 1 8.02-1.34c1.17.84 1.95 2.05 2.26 3.39 0 0-2.03.34-2.03.34a.5.5 0 0 0-.21.9z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#a)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 12.813 13.063 12.813 13.063" fill="none"/>
+    </g>
+    <g clip-path="url(#b)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M13.358 6.013c1.087.831 1.704 1.991 1.704 1.991 0 0 .09.461.077 1.166"/>
+      <path d="M-1.875 9.432c0 4.538 0 9.232 0 11.398"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="80">
+    <defs>
+      <clipPath id="c">
+        <path d="M12.62 12.11c0 0 1.02 3.86 1.02 3.86 0 0 .37.21.37.21 0 0 3.86-1.02 3.86-1.02a.5.5 0 0 0 .12-.92c0 0-1.78-1.04-1.78-1.04a6.95 6.95 0 0 0 .56-4.99c-.98-3.73-4.82-5.97-8.55-4.98-3.73.98-5.97 4.82-4.98 8.55a6.97 6.97 0 0 0 7.89 5.13.63.63 0 0 0 .52-.72.64.64 0 0 0-.72-.52 5.73 5.73 0 0 1-6.48-4.21 5.76 5.76 0 0 1 4.09-7.03 5.76 5.76 0 0 1 7.03 4.09c.37 1.39.19 2.82-.43 4.05 0 0-1.77-1.03-1.77-1.03a.5.5 0 0 0-.74.56z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#a)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 3.824 3.898 7.293 7.435" fill="none"/>
+    </g>
+    <g clip-path="url(#c)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M13.358 6.013c1.087.831 1.704 1.991 1.704 1.991 0 0 .54 2.767-1.219 5.113"/>
+      <path d="M-1.875 9.432c0 6.171 0 12.629 0 12.629 0 0 5.634 0 11.407 0"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="100">
+    <defs>
+      <clipPath id="d">
+        <path d="M10.64 13.3c0 0-1.72 3.6-1.72 3.6 0 0 .14.4.14.4 0 0 3.6 1.72 3.6 1.72a.5.5 0 0 0 .69-.62c0 0-.69-1.94-.69-1.94a6.95 6.95 0 0 0 3.65-3.45c1.66-3.48.18-7.67-3.3-9.33-3.48-1.66-7.67-.18-9.33 3.3a6.97 6.97 0 0 0 2.71 9.01.63.63 0 0 0 .86-.21.64.64 0 0 0-.21-.86 5.73 5.73 0 0 1-2.22-7.4 5.76 5.76 0 0 1 7.67-2.71 5.76 5.76 0 0 1 2.71 7.67c-.62 1.3-1.67 2.28-2.94 2.81 0 0-.68-1.94-.68-1.94a.5.5 0 0 0-.92-.05z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#a)">
+      <path stroke="context-fill" stroke-width="4" d="M3.5 3.438c0 0 .976.995 2.388 2.435" fill="none"/>
+    </g>
+    <g clip-path="url(#d)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M13.358 6.013c1.087.831 1.704 1.991 1.704 1.991 0 0 .938 4.809-3.687 7.121-.354.032-.69.033-1.01.008"/>
+      <path d="M-1.875 9.432c0 6.171 0 12.629 0 12.629 0 0 23.686 0 23.686 0 0 0 0-.126 0-.36"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="120">
+    <defs>
+      <clipPath id="e">
+        <path d="M8.39 12.95c0 0-3.62 1.68-3.62 1.68 0 0-.15.4-.15.4 0 0 1.68 3.62 1.68 3.62a.5.5 0 0 0 .92-.04c0 0 .71-1.94.71-1.94a6.95 6.95 0 0 0 5.01-.33c3.5-1.63 5.02-5.8 3.4-9.3-1.63-3.5-5.8-5.02-9.3-3.4a6.97 6.97 0 0 0-3.65 8.67.63.63 0 0 0 .8.38.64.64 0 0 0 .38-.8 5.73 5.73 0 0 1 3-7.12 5.76 5.76 0 0 1 7.64 2.79 5.76 5.76 0 0 1-2.79 7.64c-1.3.61-2.74.69-4.06.29 0 0 .71-1.93.71-1.93a.5.5 0 0 0-.68-.63z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#e)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M13.358 6.013c1.087.831 1.704 1.991 1.704 1.991 0 0 .938 4.809-3.687 7.121-2.086.187-3.57-.687-4.585-1.748"/>
+      <path d="M-1.875 9.432c0 6.171 0 12.629 0 12.629 0 0 23.686 0 23.686 0 0 0 0-6.412 0-12.563"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="140">
+    <defs>
+      <clipPath id="f">
+        <path d="M6.91 11.33c0 0-3.89-.91-3.89-.91 0 0-.36.22-.36.22 0 0-.91 3.89-.91 3.89a.5.5 0 0 0 .75.54c0 0 1.75-1.09 1.75-1.09a6.95 6.95 0 0 0 4.15 2.83c3.76.88 7.53-1.46 8.41-5.22.88-3.76-1.46-7.53-5.22-8.41a6.97 6.97 0 0 0-8.23 4.56.63.63 0 0 0 .39.79.64.64 0 0 0 .79-.39 5.73 5.73 0 0 1 6.76-3.75 5.76 5.76 0 0 1 4.28 6.91 5.76 5.76 0 0 1-6.91 4.28c-1.4-.33-2.58-1.15-3.38-2.28 0 0 1.75-1.08 1.75-1.08a.5.5 0 0 0-.15-.91z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#f)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M13.358 6.013c1.087.831 1.704 1.991 1.704 1.991 0 0 .938 4.809-3.687 7.121-4.875.438-6.461-4.922-6.461-4.922m.336-.078c0 0-.012-.039-.029-.11"/>
+      <path d="M-1.875 9.432c0 6.171 0 12.629 0 12.629 0 0 23.686 0 23.686 0 0 0 0-23.686 0-23.686 0 0-.119 0-.34 0"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="160">
+    <defs>
+      <clipPath id="g">
+        <path d="M6.72 9.25c0 0-2.6-3.03-2.6-3.03 0 0-.42-.03-.42-.03 0 0-3.03 2.6-3.03 2.6a.5.5 0 0 0 .29.88c0 0 2.06.15 2.06.15a6.95 6.95 0 0 0 1.68 4.73c2.52 2.92 6.95 3.26 9.87.74 2.92-2.52 3.26-6.95.74-9.87a6.97 6.97 0 0 0-9.34-1.16.63.63 0 0 0-.15.87.64.64 0 0 0 .87.15 5.73 5.73 0 0 1 7.67.95 5.76 5.76 0 0 1-.61 8.11 5.76 5.76 0 0 1-8.11-.61c-.94-1.09-1.41-2.45-1.39-3.83 0 0 2.05.15 2.05.15a.5.5 0 0 0 .42-.83z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#g)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M13.358 6.013c1.087.831 1.704 1.991 1.704 1.991 0 0 .938 4.809-3.687 7.121-4.875.438-6.461-4.922-6.461-4.922m.336-.078c0 0-.594-1.947.692-3.396"/>
+      <path d="M-1.875 9.432c0 6.171 0 12.629 0 12.629 0 0 23.686 0 23.686 0 0 0 0-23.686 0-23.686 0 0-5.246 0-10.801 0"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="180">
+    <defs>
+      <clipPath id="h">
+        <path d="M7.67 7.57c0 0-.51-3.96-.51-3.96 0 0-.34-.26-.34-.26 0 0-3.96.51-3.96.51a.5.5 0 0 0-.24.89c0 0 1.63 1.26 1.63 1.26a6.95 6.95 0 0 0-1.2 4.88c.49 3.83 4 6.55 7.83 6.06 3.83-.49 6.55-4 6.06-7.83a6.97 6.97 0 0 0-7.15-6.11.63.63 0 0 0-.61.64.64.64 0 0 0 .64.61 5.73 5.73 0 0 1 5.87 5.02 5.76 5.76 0 0 1-4.98 6.43 5.76 5.76 0 0 1-6.43-4.98c-.18-1.43.18-2.82.95-3.96 0 0 1.62 1.26 1.62 1.26a.5.5 0 0 0 .8-.46z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#h)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M13.358 6.013c1.087.831 1.704 1.991 1.704 1.991 0 0 .938 4.809-3.687 7.121-4.875.438-6.461-4.922-6.461-4.922m.336-.078c0 0-1.178-3.862 3.376-4.758"/>
+      <path d="M-1.875 9.432c0 6.171 0 12.629 0 12.629 0 0 23.686 0 23.686 0 0 0 0-23.686 0-23.686 0 0-13.306 0-19.972 0"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="200">
+    <defs>
+      <clipPath id="i">
+        <path d="M9.21 6.73c0 0 1.55-3.68 1.55-3.68 0 0-.16-.39-.16-.39 0 0-3.68-1.55-3.68-1.55a.5.5 0 0 0-.66.65c0 0 .78 1.91.78 1.91a6.95 6.95 0 0 0-3.49 3.61c-1.5 3.55.17 7.67 3.72 9.17 3.55 1.5 7.67-.17 9.17-3.72a6.97 6.97 0 0 0-3.11-8.88.63.63 0 0 0-.85.25.64.64 0 0 0 .25.85 5.73 5.73 0 0 1 2.55 7.29 5.76 5.76 0 0 1-7.53 3.06 5.76 5.76 0 0 1-3.06-7.53c.56-1.33 1.57-2.35 2.81-2.94 0 0 .77 1.9.77 1.9a.5.5 0 0 0 .92.01z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#i)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M13.358 6.013c1.087.831 1.704 1.991 1.704 1.991 0 0 .938 4.809-3.687 7.121-4.875.438-6.461-4.922-6.461-4.922m.336-.078c0 0-1.562-5.121 5.865-4.937"/>
+      <path d="M-1.875 9.432c0 6.171 0 12.629 0 12.629 0 0 23.686 0 23.686 0 0 0 0-23.686 0-23.686 0 0-23.686 0-23.686 0 0 0 0 1.511 0 3.77"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="220">
+    <defs>
+      <clipPath id="j">
+        <path d="M10.73 6.72c0 0 3.01-2.62 3.01-2.62 0 0 .03-.42.03-.42 0 0-2.62-3.01-2.62-3.01a.5.5 0 0 0-.88.29c0 0-.14 2.06-.14 2.06a6.95 6.95 0 0 0-4.73 1.71c-2.91 2.53-3.23 6.96-.7 9.88 2.53 2.91 6.96 3.23 9.88.7a6.97 6.97 0 0 0 1.12-9.34.63.63 0 0 0-.87-.15.64.64 0 0 0-.15.87 5.73 5.73 0 0 1-.92 7.67 5.76 5.76 0 0 1-8.11-.57 5.76 5.76 0 0 1 .57-8.11c1.09-.94 2.44-1.42 3.82-1.4 0 0-.15 2.05-.15 2.05a.5.5 0 0 0 .83.41z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#j)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M13.358 6.013c1.087.831 1.704 1.991 1.704 1.991 0 0 .938 4.809-3.687 7.121-4.875.438-6.461-4.922-6.461-4.922m.336-.078c0 0-1.563-5.125 5.875-4.937.616 0 1.172.18 1.659.449"/>
+      <path d="M-1.875 9.432c0 6.171 0 12.629 0 12.629 0 0 23.686 0 23.686 0 0 0 0-23.686 0-23.686 0 0-23.686 0-23.686 0 0 0 0 4.164 0 9.001"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="240">
+    <defs>
+      <clipPath id="k">
+        <path d="M11.86 7.2c0 0 3.75-1.36 3.75-1.36 0 0 .18-.38.18-.38 0 0-1.36-3.75-1.36-3.75a.5.5 0 0 0-.92-.04c0 0-.87 1.87-.87 1.87a6.95 6.95 0 0 0-5.02-.1c-3.63 1.32-5.51 5.34-4.19 8.97 1.32 3.63 5.34 5.51 8.97 4.19a6.97 6.97 0 0 0 4.39-8.32.63.63 0 0 0-.76-.45.64.64 0 0 0-.45.76 5.73 5.73 0 0 1-3.61 6.83 5.76 5.76 0 0 1-7.37-3.44 5.76 5.76 0 0 1 3.44-7.37c1.35-.49 2.79-.45 4.07.06 0 0-.87 1.86-.87 1.86a.5.5 0 0 0 .62.68z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#k)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M13.358 6.013c1.087.831 1.704 1.991 1.704 1.991 0 0 .938 4.809-3.687 7.121-4.875.438-6.461-4.922-6.461-4.922m.336-.078c0 0-1.563-5.125 5.875-4.937.873 0 1.626.361 2.233.825"/>
+      <path d="M-1.875 9.432c0 6.171 0 12.629 0 12.629 0 0 23.686 0 23.686 0 0 0 0-23.686 0-23.686 0 0-23.686 0-23.686 0 0 0 0 5.409 0 11.057"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="260">
+    <defs>
+      <clipPath id="l">
+        <path d="M12.5 7.75c0 0 3.97-.39 3.97-.39 0 0 .27-.33.27-.33 0 0-.39-3.97-.39-3.97a.5.5 0 0 0-.88-.27c0 0-1.31 1.59-1.31 1.59a6.95 6.95 0 0 0-4.84-1.35c-3.84.37-6.66 3.8-6.29 7.64.37 3.84 3.8 6.66 7.64 6.29a6.97 6.97 0 0 0 6.33-6.97.63.63 0 0 0-.62-.62.64.64 0 0 0-.63.63 5.73 5.73 0 0 1-5.2 5.72 5.76 5.76 0 0 1-6.28-5.17 5.76 5.76 0 0 1 5.17-6.28c1.43-.14 2.81.26 3.93 1.07 0 0-1.31 1.58-1.31 1.58a.5.5 0 0 0 .43.82z"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#l)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M13.358 6.013c1.087.831 1.704 1.991 1.704 1.991 0 0 .938 4.809-3.687 7.121-4.875.438-6.461-4.922-6.461-4.922m.336-.078c0 0-1.563-5.125 5.875-4.937.873 0 1.626.361 2.233.825"/>
+      <path d="M-1.875 9.432c0 6.171 0 12.629 0 12.629 0 0 23.686 0 23.686 0 0 0 0-23.686 0-23.686 0 0-23.686 0-23.686 0 0 0 0 5.409 0 11.057"/>
+    </g>
+  </svg>
+  <svg viewBox="0 0 20 20" width="20" height="20" x="280">
+    <g clip-path="url(#m)" stroke="context-fill" stroke-width="8" fill="none">
+      <path d="M13.358 6.013c1.087.831 1.704 1.991 1.704 1.991 0 0 .938 4.809-3.687 7.121-4.875.438-6.461-4.922-6.461-4.922m.336-.078c0 0-1.563-5.125 5.875-4.937.873 0 1.626.361 2.233.825"/>
+      <path d="M-1.875 9.432c0 6.171 0 12.629 0 12.629 0 0 23.686 0 23.686 0 0 0 0-23.686 0-23.686 0 0-23.686 0-23.686 0 0 0 0 5.409 0 11.057"/>
+    </g>
+  </svg>
+</svg>
diff --git a/browser/themes/shared/icons/subtract-circle-fill.svg b/browser/themes/shared/icons/subtract-circle-fill.svg
new file mode 100644
index 0000000000..63a30033f8
--- /dev/null
+++ b/browser/themes/shared/icons/subtract-circle-fill.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill-opacity="context-fill-opacity">
+  <circle fill="context-stroke" cx="7.6" cy="7.6" r="7.5"/>
+  <path fill="context-fill" d="M11 8.2H4.2c-.3 0-.6-.2-.6-.6s.3-.6.6-.6H11c.3 0 .6.3.6.6s-.3.6-.6.6z"/>
+</svg>
diff --git a/browser/themes/shared/icons/success-animation.svg b/browser/themes/shared/icons/success-animation.svg
new file mode 100644
index 0000000000..1faa6eb7e6
--- /dev/null
+++ b/browser/themes/shared/icons/success-animation.svg
@@ -0,0 +1,107 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="304" height="14" fill="context-fill" fill-opacity="context-fill-opacity">
+  <defs>
+    <path id="a" d="m6.023 13-4.84-4.839a.626.626 0 0 1 .885-.885l4.307 4.308 7.559-7.561a.628.628 0 0 1 .885 0 .628.628 0 0 1 0 .885l-8.09 8.09-.706.002z"/>
+  </defs>
+  <svg x="16">
+    <defs>
+      <clipPath id="b">
+        <path d="M0 0H2.5V14H0z"/>
+      </clipPath>
+    </defs>
+    <use href="#a" clip-path="url(#b)"/>
+  </svg>
+  <svg x="32">
+    <defs>
+      <clipPath id="c">
+        <path d="M0 0H3.5V14H0z"/>
+      </clipPath>
+    </defs>
+    <use href="#a" clip-path="url(#c)" transform="translate(-.938 -.938)"/>
+  </svg>
+  <svg x="48">
+    <defs>
+      <clipPath id="d">
+        <path d="M0 0H4.5V14H0z"/>
+      </clipPath>
+    </defs>
+    <use href="#a" clip-path="url(#d)" transform="translate(-.938 -.938)"/>
+  </svg>
+  <svg x="64">
+    <defs>
+      <clipPath id="e">
+        <path d="M0 0H5.5V14H0z"/>
+      </clipPath>
+    </defs>
+    <use href="#a" clip-path="url(#e)" transform="translate(-.938 -.938)"/>
+  </svg>
+  <svg x="80">
+    <defs>
+      <clipPath id="f">
+        <path d="M0 0H6V14H0z"/>
+      </clipPath>
+    </defs>
+    <use href="#a" clip-path="url(#f)" transform="translate(-.938 -.938)"/>
+  </svg>
+  <svg x="96">
+    <defs>
+      <clipPath id="g">
+        <path d="M0 0H6V14H0z"/>
+      </clipPath>
+    </defs>
+    <use href="#a" clip-path="url(#g)" transform="translate(-.938 -.938)"/>
+  </svg>
+  <svg x="112">
+    <defs>
+      <clipPath id="h">
+        <path d="M0 0H8.25V14H0z"/>
+      </clipPath>
+    </defs>
+    <use href="#a" clip-path="url(#h)" transform="translate(-1.19 -1.19) scale(1.03134)"/>
+  </svg>
+  <svg x="128">
+    <defs>
+      <clipPath id="i">
+        <path d="M0 0H10.5V14H0z"/>
+      </clipPath>
+    </defs>
+    <use href="#a" clip-path="url(#i)" transform="translate(-1.455 -1.455) scale(1.0646)"/>
+  </svg>
+  <svg x="144">
+    <defs>
+      <clipPath id="j">
+        <path d="M0 0H12.5V14H0z"/>
+      </clipPath>
+    </defs>
+    <use href="#a" clip-path="url(#j)" transform="translate(-1.702 -1.702) scale(1.09553)"/>
+  </svg>
+  <svg x="160">
+    <use href="#a" transform="translate(-1.914 -1.914) scale(1.12205)"/>
+  </svg>
+  <svg x="176">
+    <use href="#a" transform="translate(-2.07 -2.07) scale(1.14168)"/>
+  </svg>
+  <svg x="192">
+    <use href="#a" transform="matrix(1.15 0 0 1.15 -2.14 -2.14)"/>
+  </svg>
+  <svg x="208">
+    <use href="#a" transform="matrix(1.12 0 0 1.12 -1.89 -1.89)"/>
+  </svg>
+  <svg x="224">
+    <use href="#a" transform="matrix(1.1 0 0 1.1 -1.62 -1.62)"/>
+  </svg>
+  <svg x="240">
+    <use href="#a" transform="matrix(1.05 0 0 1.05 -1.37 -1.37)"/>
+  </svg>
+  <svg x="256">
+    <use href="#a" transform="matrix(1.03 0 0 1.03 -1.16 -1.16)"/>
+  </svg>
+  <svg x="272">
+    <use href="#a" transform="matrix(1 0 0 1 -1 -1)"/>
+  </svg>
+  <svg x="288">
+    <use href="#a" transform="translate(-.94 -.94)"/>
+  </svg>
+</svg>
diff --git a/browser/themes/shared/icons/sync.svg b/browser/themes/shared/icons/sync.svg
new file mode 100644
index 0000000000..888e593abf
--- /dev/null
+++ b/browser/themes/shared/icons/sync.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.9 3.8c-.2-.2-.1-.5.1-.7.2-.1.6-.1.7.2.5.7.8 1.6.8 2.5 0 2.5-2 4.5-4.5 4.5l0 1.5c0 .2-.2.3-.3.1l-2-1.9 0-.4 1.9-1.9c.2-.2.4-.1.4.1l0 1.5c1.9 0 3.5-1.6 3.5-3.5 0-.7-.2-1.4-.6-2z"/>
+  <path d="M3.1 8.2c.2.2.1.5-.1.7-.2.1-.6.1-.7-.2-.5-.7-.8-1.6-.8-2.5 0-2.5 2-4.5 4.5-4.5L6 .2c0-.2.2-.3.3-.1l2 1.9 0 .4-2 2c-.1.1-.3 0-.3-.2l0-1.5c-1.9 0-3.5 1.6-3.5 3.5 0 .7.2 1.4.6 2z"/>
+</svg>
diff --git a/browser/themes/shared/icons/synced-tabs.svg b/browser/themes/shared/icons/synced-tabs.svg
new file mode 100644
index 0000000000..deea09780b
--- /dev/null
+++ b/browser/themes/shared/icons/synced-tabs.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M13.75 7V6L13.75 5.99215L13.0079 5.25004L13 5.25H12V4H13C14.1046 4 15 4.89543 15 6V7H13.75Z"/>
+  <path d="M4.25 10V11L4.25004 11.0079L4.99215 11.75L5 11.75H6V13H5C3.89543 13 3 12.1046 3 11V10H4.25Z"/>
+  <path d="M13 11.75H12V13H13C14.1046 13 15 12.1046 15 11V10H13.75V11L13.75 11.0079L13.0079 11.75L13 11.75Z"/>
+  <path fill-rule="evenodd" d="M1 3C1 1.89543 1.89543 1 3 1H9C10.1046 1 11 1.89543 11 3V6C11 7.10457 10.1046 8 9 8H3C1.89543 8 1 7.10457 1 6V3ZM7 2.25H3C2.58579 2.25 2.25 2.58579 2.25 3V6C2.25 6.41421 2.58579 6.75 3 6.75H7V2.25ZM9 3C9.41421 3 9.75 3.33579 9.75 3.75V5.25C9.75 5.66421 9.41421 6 9 6C8.58579 6 8.25 5.66421 8.25 5.25V3.75C8.25 3.33579 8.58579 3 9 3Z"/>
+  <path fill-rule="evenodd" d="M3 11V9H4.25V11C4.25 11.4142 4.58579 11.75 5 11.75H13C13.4142 11.75 13.75 11.4142 13.75 11V6C13.75 5.58579 13.4142 5.25 13 5.25H12V4H13C14.1046 4 15 4.89543 15 6V11C15 12.1046 14.1046 13 13 13H14.5C15.3284 13 16 13.6716 16 14.5C16 15.3284 15.3284 16 14.5 16H3.5C2.67157 16 2 15.3284 2 14.5C2 13.6716 2.67157 13 3.5 13H5C3.89543 13 3 12.1046 3 11ZM7.5 13.75C7.5 13.3358 7.83579 13 8.25 13H9.75C10.1642 13 10.5 13.3358 10.5 13.75C10.5 14.1642 10.1642 14.5 9.75 14.5H8.25C7.83579 14.5 7.5 14.1642 7.5 13.75Z"/>
+  <path d="M4 2.25H3L2.99215 2.25004L2.25004 2.99215L2.25 3V4H1V3C1 1.89543 1.89543 1 3 1H4V2.25Z"/>
+  <path d="M2.25 5V6L2.25004 6.00785L2.99215 6.74996L3 6.75H4V8H3C1.89543 8 1 7.10457 1 6L1 5H2.25Z"/>
+</svg>
diff --git a/browser/themes/shared/icons/tab.svg b/browser/themes/shared/icons/tab.svg
new file mode 100644
index 0000000000..7585b1987f
--- /dev/null
+++ b/browser/themes/shared/icons/tab.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M2 2a2 2 0 0 0-2 2l0 8a2 2 0 0 0 2 2l12 0a2 2 0 0 0 2-2l0-8a2 2 0 0 0-2-2L2 2zm12.75 10.15-.6.6-12.3 0-.6-.6 0-8.3.6-.6 12.3 0 .6.6 0 8.3z"/>
+</svg>
diff --git a/browser/themes/shared/icons/thumb-down.svg b/browser/themes/shared/icons/thumb-down.svg
new file mode 100644
index 0000000000..f110985fc0
--- /dev/null
+++ b/browser/themes/shared/icons/thumb-down.svg
@@ -0,0 +1,7 @@
+<!-- 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 viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m2 11-1 0a1 1 0 0 1-1-1l0-7a1 1 0 0 1 1-1l1 0a1 1 0 0 1 1 1l0 7a1 1 0 0 1-1 1z"/>
+  <path d="M12.998 12a2 2 0 0 0 1.897-2.632l-1.667-5A1.997 1.997 0 0 0 11.332 3L4.25 3l0 7.331L6 13l.843 2.528a.69.69 0 0 0 .654.472l.003 0A1.5 1.5 0 0 0 9 14.5l0-2.2.3-.3z"/>
+</svg>
diff --git a/browser/themes/shared/icons/topsites.svg b/browser/themes/shared/icons/topsites.svg
new file mode 100644
index 0000000000..6381606fb2
--- /dev/null
+++ b/browser/themes/shared/icons/topsites.svg
@@ -0,0 +1,9 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M5 7 3 7a2 2 0 0 1-2-2l0-2a2 2 0 0 1 2-2l2 0a2 2 0 0 1 2 2l0 2a2 2 0 0 1-2 2z"/>
+  <path d="m13 7-2 0a2 2 0 0 1-2-2l0-2a2 2 0 0 1 2-2l2 0a2 2 0 0 1 2 2l0 2a2 2 0 0 1-2 2z"/>
+  <path d="m5 15-2 0a2 2 0 0 1-2-2l0-2a2 2 0 0 1 2-2l2 0a2 2 0 0 1 2 2l0 2a2 2 0 0 1-2 2z"/>
+  <path d="m13 15-2 0a2 2 0 0 1-2-2l0-2a2 2 0 0 1 2-2l2 0a2 2 0 0 1 2 2l0 2a2 2 0 0 1-2 2z"/>
+</svg>
diff --git a/browser/themes/shared/icons/trending.svg b/browser/themes/shared/icons/trending.svg
new file mode 100644
index 0000000000..3268e65cf6
--- /dev/null
+++ b/browser/themes/shared/icons/trending.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m6.441 16-1.609 0 .999-6.75-2.207 0a1.63 1.63 0 0 1-1.322-.681 1.63 1.63 0 0 1-.214-1.475l2.015-5.832A1.878 1.878 0 0 1 5.876 0l3.037 0a1.624 1.624 0 0 1 1.536 2.154L9.472 5l2.902 0c.642 0 1.208.363 1.476.947a1.61 1.61 0 0 1-.246 1.739L6.441 16zm6.079-9.75-4.098 0a.5.5 0 0 1-.473-.662l1.319-3.84-.354-.498-3.039 0-.59.421-2.016 5.831.355.498L6.7 8a.5.5 0 0 1 .495.573l-.83 5.601L12.803 6.7l-.283-.45z"/>
+</svg>
diff --git a/browser/themes/shared/icons/window.svg b/browser/themes/shared/icons/window.svg
new file mode 100644
index 0000000000..1c3e1b24d4
--- /dev/null
+++ b/browser/themes/shared/icons/window.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M13 1 3 1a2 2 0 0 0-2 2l0 9a2 2 0 0 0 2 2l10 0a2 2 0 0 0 2-2l0-9a2 2 0 0 0-2-2zM2.85 2.25l10.3 0 .6.6 0 2.15-11.5 0 0-2.15.6-.6zm10.3 10.5-10.3 0-.6-.6 0-5.9 11.5 0 0 5.9-.6.6z"/>
+</svg>
diff --git a/browser/themes/shared/icons/zoom-out.svg b/browser/themes/shared/icons/zoom-out.svg
new file mode 100644
index 0000000000..282a728f3f
--- /dev/null
+++ b/browser/themes/shared/icons/zoom-out.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M13.375 9.25a.625.625 0 0 0 0-1.25L2.625 8a.625.625 0 0 0 0 1.25l10.75 0z"/>
+</svg>
diff --git a/browser/themes/shared/identity-block/identity-block.css b/browser/themes/shared/identity-block/identity-block.css
new file mode 100644
index 0000000000..c30d70b8f9
--- /dev/null
+++ b/browser/themes/shared/identity-block/identity-block.css
@@ -0,0 +1,277 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+#identity-box {
+  margin-inline-end: var(--identity-box-margin-inline);
+}
+
+#identity-box,
+#tracking-protection-icon-container {
+  /* Set default fill for icons in the identity block.
+     Individual icons can override this. */
+  fill: currentColor;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
+}
+
+#urlbar.searchButton > #urlbar-input-container > #identity-box[pageproxystate="invalid"],
+#identity-box[pageproxystate="invalid"] > #identity-permission-box,
+#identity-box[pageproxystate="invalid"] > #notification-popup-box,
+#identity-box[pageproxystate="invalid"] #identity-icon-label {
+  display: none;
+}
+
+#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] {
+  pointer-events: none;
+  -moz-user-focus: ignore;
+}
+
+.identity-box-button:hover:not([open=true]),
+#tracking-protection-icon-container:hover:not([open=true]) {
+  background-color: var(--urlbar-box-hover-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
+}
+
+.identity-box-button:hover:active,
+.identity-box-button[open=true],
+#tracking-protection-icon-container:hover:active,
+#tracking-protection-icon-container[open=true] {
+  background-color: var(--urlbar-box-active-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
+}
+
+.identity-box-button:focus-visible,
+#tracking-protection-icon-container:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+}
+
+.identity-box-button {
+  padding-inline: var(--urlbar-icon-padding);
+  border-radius: var(--urlbar-icon-border-radius);
+}
+
+#identity-icon-label {
+  padding-inline-start: 4px;
+}
+
+#identity-box[pageproxystate="valid"].notSecureText,
+#identity-box[pageproxystate="valid"].chromeUI,
+#identity-box[pageproxystate="valid"].extensionPage,
+#urlbar-label-box {
+  margin-inline-end: 8px;
+}
+
+#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button,
+#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button,
+#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button,
+#urlbar-label-box {
+  background-color: var(--urlbar-box-bgcolor);
+  color: var(--urlbar-box-text-color);
+  padding-inline: 8px;
+  border-radius: var(--urlbar-icon-border-radius);
+}
+
+#urlbar[focused="true"] #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open=true]),
+#urlbar[focused="true"] #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open=true]),
+#urlbar[focused="true"] #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open=true]),
+#urlbar[focused="true"] #urlbar-label-box {
+  background-color: var(--urlbar-box-focus-bgcolor);
+}
+
+#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:not([open]),
+#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:not([open]),
+#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:not([open]) {
+  background-color: var(--urlbar-box-hover-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
+}
+
+#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:active,
+#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button[open=true],
+#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:active,
+#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button[open=true],
+#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:active,
+#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button[open=true] {
+  background-color: var(--urlbar-box-active-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
+}
+
+#urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-search-mode-indicator,
+#urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-label-box {
+  pointer-events: none;
+}
+
+#urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-search-mode-indicator > #urlbar-search-mode-indicator-close {
+  pointer-events: initial;
+}
+
+.urlbar-label {
+  margin: 0;
+}
+
+.sharing-icon,
+#identity-icon,
+#permissions-granted-icon,
+#tracking-protection-icon,
+.notification-anchor-icon,
+#blocked-permissions-container > .blocked-permission-icon {
+  -moz-context-properties: fill, fill-opacity;
+}
+
+.sharing-icon,
+#identity-icon,
+#permissions-granted-icon,
+#tracking-protection-icon,
+#blocked-permissions-container > .blocked-permission-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.sharing-icon,
+#identity-icon,
+#tracking-protection-icon,
+#blocked-permissions-container > .blocked-permission-icon {
+  margin-inline-start: 4px;
+}
+
+#tracking-protection-icon {
+  margin-inline-start: 0;
+}
+
+/* MAIN IDENTITY ICON */
+#identity-icon {
+  margin-inline-start: 0;
+  list-style-image: url(chrome://global/skin/icons/info.svg);
+}
+
+#identity-box[pageproxystate="valid"].chromeUI #identity-icon {
+  list-style-image: url(chrome://branding/content/icon16.png);
+}
+@media (min-resolution: 1.1dppx) {
+  #identity-box[pageproxystate="valid"].chromeUI #identity-icon {
+    list-style-image: url(chrome://branding/content/icon32.png);
+  }
+}
+
+#identity-box[pageproxystate="valid"].localResource #identity-icon {
+  list-style-image: url(chrome://global/skin/icons/page-portrait.svg);
+}
+
+#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] #identity-icon {
+  list-style-image: url(chrome://global/skin/icons/search-glass.svg);
+}
+
+#urlbar[actiontype="extension"] > #urlbar-input-container > #identity-box #identity-icon {
+  list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
+}
+
+#identity-box[pageproxystate="valid"].extensionPage #identity-icon {
+  list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
+}
+
+#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon,
+#identity-box[pageproxystate="valid"].mixedActiveBlocked #identity-icon {
+  list-style-image: url(chrome://global/skin/icons/security.svg);
+}
+
+#identity-box[pageproxystate="valid"].weakCipher #identity-icon,
+#identity-box[pageproxystate="valid"].mixedDisplayContent #identity-icon,
+#identity-box[pageproxystate="valid"].mixedDisplayContentLoadedActiveBlocked #identity-icon,
+#identity-box[pageproxystate="valid"].certUserOverridden #identity-icon,
+#identity-box[pageproxystate="valid"].certErrorPage #identity-icon {
+  list-style-image: url(chrome://global/skin/icons/security-warning.svg);
+  fill: unset;
+}
+
+
+#identity-box[pageproxystate="valid"].notSecure #identity-icon,
+#identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon,
+#identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon {
+  list-style-image: url(chrome://global/skin/icons/security-broken.svg);
+}
+
+#permissions-granted-icon {
+  list-style-image: url(chrome://browser/skin/permissions.svg);
+}
+
+#identity-permission-box {
+  display: none;
+}
+
+#identity-permission-box[open=true],
+#identity-permission-box[hasPermissions],
+#identity-permission-box[hasSharingIcon] {
+  display: -moz-box;
+}
+
+/* SHARING ICON */
+
+#webrtc-sharing-icon[sharing="camera"] {
+  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
+}
+
+#webrtc-sharing-icon[sharing="microphone"] {
+  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
+}
+
+#webrtc-sharing-icon[sharing="screen"] {
+  list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
+}
+
+#geo-sharing-icon[sharing] {
+  list-style-image: url("chrome://browser/skin/notification-icons/geo.svg");
+}
+
+.sharing-icon:not([sharing]) {
+  display: none;
+}
+
+#webrtc-sharing-icon[sharing]:not([paused]) {
+  -moz-context-properties: fill;
+  fill: rgb(224, 41, 29);
+}
+
+/* TRACKING PROTECTION ICON */
+
+#tracking-protection-icon-container {
+  padding-inline: var(--urlbar-icon-padding);
+  border-radius: var(--urlbar-icon-border-radius);
+  /* This is needed in order to position the blue dot indicator. */
+  position: relative;
+}
+
+#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container.chromeUI {
+  display: none;
+}
+
+#tracking-protection-icon-box {
+  overflow: hidden;
+  width: 16px;
+  height: 16px;
+}
+
+#tracking-protection-icon-tooltip {
+  max-width: 500px;
+}
+
+#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon {
+  list-style-image: url(chrome://browser/skin/tracking-protection.svg);
+}
+
+#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box[hasException] > #tracking-protection-icon {
+  list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg);
+}
+
+#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon {
+  list-style-image: url(chrome://browser/skin/tracking-protection-active.svg);
+}
+
+:root[lwt-toolbar-field-brighttext] #urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon {
+  list-style-image: url(chrome://browser/skin/tracking-protection-active-brighttext.svg);
+}
+
+#urlbar-input-container[pageproxystate="invalid"] > #tracking-protection-icon-container {
+  visibility: collapse;
+}
diff --git a/browser/themes/shared/identity-block/permissions.svg b/browser/themes/shared/identity-block/permissions.svg
new file mode 100644
index 0000000000..0237c34e44
--- /dev/null
+++ b/browser/themes/shared/identity-block/permissions.svg
@@ -0,0 +1,9 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M12.5 4.25c.689 0 1.25.561 1.25 1.25s-.561 1.25-1.25 1.25-1.25-.561-1.25-1.25.561-1.25 1.25-1.25m0-1.25a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/>
+  <path d="M9 5.5c0-.171.027-.335.05-.5L1.625 5a.625.625 0 0 0 0 1.25l7.46 0A3.497 3.497 0 0 1 9 5.5z"/>
+  <path d="M3.5 9.25c.689 0 1.25.561 1.25 1.25s-.561 1.25-1.25 1.25-1.25-.561-1.25-1.25.561-1.25 1.25-1.25M3.5 8a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/>
+  <path d="M14.375 10 6.95 10c.023.165.05.329.05.5 0 .258-.032.508-.085.75l7.46 0a.625.625 0 0 0 0-1.25z"/>
+</svg>
diff --git a/browser/themes/shared/identity-block/tracking-protection-active-brighttext.svg b/browser/themes/shared/identity-block/tracking-protection-active-brighttext.svg
new file mode 100644
index 0000000000..c7de8d017c
--- /dev/null
+++ b/browser/themes/shared/identity-block/tracking-protection-active-brighttext.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 viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <defs>
+    <linearGradient id="a" x1="16" y1="0" x2="0" y2="16" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#CB9EFF"/>
+      <stop offset="1" stop-color="#00DDFF"/>
+    </linearGradient>
+  </defs>
+  <path d="M8 16a1.88 1.88 0 0 1-.872-.215c-1.763-.919-3.382-2.408-4.559-4.193-.563-.853-.962-1.893-1.182-3.09L.776 5.177a1.998 1.998 0 0 1 1.015-2.12L7.064.237A1.973 1.973 0 0 1 8.932.234l5.273 2.872a2 2 0 0 1 1.018 2.127l-.61 3.279c-.22 1.188-.616 2.223-1.179 3.076-1.177 1.786-2.798 3.277-4.563 4.198A1.879 1.879 0 0 1 8 16zM7.659 1.336 2.363 4.168 2 4.928l.616 3.348c.19 1.031.525 1.915.996 2.628 1.062 1.611 2.517 2.951 4.095 3.773l.585.001.001-.001c1.581-.823 3.037-2.165 4.099-3.777.469-.713.804-1.593.993-2.617l.614-3.3-.367-.766-5.291-2.882-.682.001z" fill="url(#a)"/>
+</svg>
diff --git a/browser/themes/shared/identity-block/tracking-protection-active.svg b/browser/themes/shared/identity-block/tracking-protection-active.svg
new file mode 100644
index 0000000000..591c0b0990
--- /dev/null
+++ b/browser/themes/shared/identity-block/tracking-protection-active.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 viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <defs>
+    <linearGradient id="a" x1="16" y1="0" x2="0" y2="16" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#AB71FF"/>
+      <stop offset="1" stop-color="#0250BB"/>
+    </linearGradient>
+  </defs>
+  <path d="M8 16a1.88 1.88 0 0 1-.872-.215c-1.763-.919-3.382-2.408-4.559-4.193-.563-.853-.962-1.893-1.182-3.09L.776 5.177a1.998 1.998 0 0 1 1.015-2.12L7.064.237A1.973 1.973 0 0 1 8.932.234l5.273 2.872a2 2 0 0 1 1.018 2.127l-.61 3.279c-.22 1.188-.616 2.223-1.179 3.076-1.177 1.786-2.798 3.277-4.563 4.198A1.879 1.879 0 0 1 8 16zM7.659 1.336 2.363 4.168 2 4.928l.616 3.348c.19 1.031.525 1.915.996 2.628 1.062 1.611 2.517 2.951 4.095 3.773l.585.001.001-.001c1.581-.823 3.037-2.165 4.099-3.777.469-.713.804-1.593.993-2.617l.614-3.3-.367-.766-5.291-2.882-.682.001z" fill="url(#a)"/>
+</svg>
diff --git a/browser/themes/shared/identity-block/tracking-protection-disabled.svg b/browser/themes/shared/identity-block/tracking-protection-disabled.svg
new file mode 100644
index 0000000000..f34f1cd8de
--- /dev/null
+++ b/browser/themes/shared/identity-block/tracking-protection-disabled.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m15.317 14.433-2.295-2.295c.001-.001.002-.002.003-.004l-.89-.89c-.001.001-.002.002-.003.004L4.116 3.231l.004-.002-.924-.924-.004.002L1.567.683a.626.626 0 0 0-.885.885l1.356 1.356-.247.133a1.998 1.998 0 0 0-1.015 2.12l.612 3.325c.22 1.196.618 2.236 1.182 3.09 1.178 1.785 2.797 3.274 4.559 4.193a1.877 1.877 0 0 0 1.743 0c1.228-.641 2.37-1.572 3.352-2.676l2.208 2.208a.623.623 0 0 0 .884 0 .624.624 0 0 0 .001-.884zm-7.024.244-.586 0c-1.578-.822-3.033-2.162-4.095-3.773-.471-.713-.806-1.596-.996-2.628L2 4.928l.364-.76.599-.32 8.384 8.384c-.894 1.014-1.937 1.863-3.054 2.445z"/>
+  <path d="m7.659 1.336.682-.001 5.291 2.882.367.766-.614 3.3a7.793 7.793 0 0 1-.582 1.859l.931.931a8.68 8.68 0 0 0 .88-2.561l.61-3.279a2 2 0 0 0-1.018-2.127L8.933.234a1.973 1.973 0 0 0-1.868.003L4.349 1.689l.924.924 2.386-1.277z"/>
+</svg>
diff --git a/browser/themes/shared/identity-block/tracking-protection.svg b/browser/themes/shared/identity-block/tracking-protection.svg
new file mode 100644
index 0000000000..09cdb83ecf
--- /dev/null
+++ b/browser/themes/shared/identity-block/tracking-protection.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8 16a1.88 1.88 0 0 1-.872-.215c-1.763-.919-3.382-2.408-4.559-4.193-.563-.853-.962-1.893-1.182-3.09L.776 5.177a1.998 1.998 0 0 1 1.015-2.12L7.064.237A1.973 1.973 0 0 1 8.932.234l5.273 2.872a2 2 0 0 1 1.018 2.127l-.61 3.279c-.22 1.188-.616 2.223-1.179 3.076-1.177 1.786-2.798 3.277-4.563 4.198A1.879 1.879 0 0 1 8 16zM7.659 1.336 2.363 4.168 2 4.928l.616 3.348c.19 1.031.525 1.915.996 2.628 1.062 1.611 2.517 2.951 4.095 3.773l.585.001.001-.001c1.581-.823 3.037-2.165 4.099-3.777.469-.713.804-1.593.993-2.617l.614-3.3-.367-.766-5.291-2.882-.682.001z"/>
+</svg>
diff --git a/browser/themes/shared/identity-credential-notification.css b/browser/themes/shared/identity-credential-notification.css
new file mode 100644
index 0000000000..61ebdd2db4
--- /dev/null
+++ b/browser/themes/shared/identity-credential-notification.css
@@ -0,0 +1,13 @@
+/* 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/. */
+
+#identity-credential-notification .subviewbutton {
+  width: 100%;
+  margin-inline: 0;
+}
+
+#credential-provider-explanation,
+#credential-account-explanation {
+  margin-top: 1em;
+}
diff --git a/browser/themes/shared/incontent-icons/tab-crashed.svg b/browser/themes/shared/incontent-icons/tab-crashed.svg
new file mode 100644
index 0000000000..db19117370
--- /dev/null
+++ b/browser/themes/shared/incontent-icons/tab-crashed.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0"?>
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+  <defs>
+    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="20" y1="2.85" x2="20" y2="37.15">
+      <stop offset="0" stop-color="#e63b2e"/>
+      <stop offset="1" stop-color="#c33931"/>
+    </linearGradient>
+  </defs>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#gradient)" d="M39.048,6.798H19.004 C16.715,6.782 16.195,5.656 15.839,4.397 15.48,3.128 14.763,2 12.61,2 6.835,2 7.1899998,2 6.443,2 4.29,2 3.573,3.127 3.214,4.397 2.855,5.666 2.332,6.8 0,6.8H0.94 C0.421,6.808 0.003,7.233 0.003,7.758v27.583c0,0.53 0.426,0.959 0.952,0.959H39.048 C39.574,36.3 40,35.871 40,35.341 V 7.757 C40,7.227 39.574,6.798 39.048,6.798 Z M8.4409998,17.082c0,-2.119 1.7050002,-3.837 3.8090002,-3.837 2.103,0 3.809,1.718 3.809,3.837 0,2.119 -1.705,3.837 -3.809,3.837 -2.104,0 -3.8090002,-1.718 -3.8090002,-3.837z M26.717,30.98c-1.525,0 -1.525,-2.305 -6.864,-2.305 -5.339,0 -5.339,2.305 -6.864,2.305 -0.842,0 -1.526,-0.512 -1.526,-1.537 0,-1.024 1.271,-3.842 8.39,-3.842 7.119,0 8.39,2.804 8.39,3.842 0,1.038 -0.683,1.537 -1.526,1.537z m 0.768,-10.061c-2.104,0 -3.809,-1.718 -3.809,-3.837 0,-2.119 1.705,-3.837 3.809,-3.837 2.104,0 3.809,1.718 3.809,3.837 0,2.119 -1.706,3.837 -3.809,3.837z"/>
+</svg>
diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn
new file mode 100644
index 0000000000..e874e39777
--- /dev/null
+++ b/browser/themes/shared/jar.inc.mn
@@ -0,0 +1,279 @@
+# 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/.
+
+# This is not a complete / proper jar manifest. It is included by the
+# actual theme-specific manifests, so that shared resources need only
+# be specified once. As a result, the source file paths are relative
+# to the location of the actual manifest.
+
+  skin/classic/browser/aboutFrameCrashed.css                   (../shared/aboutFrameCrashed.css)
+  skin/classic/browser/aboutRestartRequired.css                (../shared/aboutRestartRequired.css)
+  skin/classic/browser/aboutSessionRestore.css                 (../shared/aboutSessionRestore.css)
+  skin/classic/browser/aboutTabCrashed.css                     (../shared/aboutTabCrashed.css)
+  skin/classic/browser/aboutWelcomeBack.css                    (../shared/aboutWelcomeBack.css)
+  skin/classic/browser/tab-list-tree.css                       (../shared/tab-list-tree.css)
+  skin/classic/browser/addon-notification.css                  (../shared/addon-notification.css)
+  skin/classic/browser/autocomplete.css                        (../shared/autocomplete.css)
+  skin/classic/browser/blockedSite.css                         (../shared/blockedSite.css)
+  skin/classic/browser/browser-shared.css                      (../shared/browser-shared.css)
+  skin/classic/browser/ctrlTab.css                             (../shared/ctrlTab.css)
+  skin/classic/browser/identity-credential-notification.css    (../shared/identity-credential-notification.css)
+  skin/classic/browser/light-dark-overrides.css                (../shared/light-dark-overrides.css)
+  skin/classic/browser/menupanel.css                           (../shared/menupanel.css)
+  skin/classic/browser/notification-icons.css                  (../shared/notification-icons.css)
+  skin/classic/browser/searchbar.css                           (../shared/searchbar.css)
+  skin/classic/browser/setDesktopBackground.css                (../shared/setDesktopBackground.css)
+  skin/classic/browser/sidebar.css                             (../shared/sidebar.css)
+  skin/classic/browser/tabs.css                                (../shared/tabs.css)
+  skin/classic/browser/toolbarbuttons.css                      (../shared/toolbarbuttons.css)
+  skin/classic/browser/toolbarbutton-icons.css                 (../shared/toolbarbutton-icons.css)
+  skin/classic/browser/urlbar-dynamic-results.css              (../shared/urlbar-dynamic-results.css)
+  skin/classic/browser/urlbar-searchbar.css                    (../shared/urlbar-searchbar.css)
+  skin/classic/browser/urlbarView.css                          (../shared/urlbarView.css)
+  skin/classic/browser/UITour.css                              (../shared/UITour.css)
+  skin/classic/browser/webRTC-indicator.css                    (../shared/webRTC-indicator.css)
+  skin/classic/browser/addons/addon-install-blocked.svg        (../shared/addons/addon-install-blocked.svg)
+  skin/classic/browser/addons/addon-install-downloading.svg    (../shared/addons/addon-install-downloading.svg)
+  skin/classic/browser/addons/addon-install-installed.svg      (../shared/addons/addon-install-installed.svg)
+  skin/classic/browser/addons/extension-controlled.css         (../shared/addons/extension-controlled.css)
+  skin/classic/browser/addons/unified-extensions.css           (../shared/addons/unified-extensions.css)
+  skin/classic/browser/controlcenter/3rdpartycookies.svg       (../shared/controlcenter/3rdpartycookies.svg)
+  skin/classic/browser/controlcenter/cryptominers.svg          (../shared/controlcenter/cryptominers.svg)
+  skin/classic/browser/controlcenter/dashboard.svg             (../shared/controlcenter/dashboard.svg)
+  skin/classic/browser/controlcenter/mcb-disabled.svg          (../shared/controlcenter/mcb-disabled.svg)
+  skin/classic/browser/controlcenter/etp-milestone.svg         (../shared/controlcenter/etp-milestone.svg)
+  skin/classic/browser/controlcenter/panel.css                 (../shared/controlcenter/panel.css)
+  skin/classic/browser/controlcenter/tracking-protection.svg   (../shared/controlcenter/tracking-protection.svg)
+  skin/classic/browser/controlcenter/hero-message-background.svg   (../shared/controlcenter/hero-message-background.svg)
+  skin/classic/browser/customizableui/customizeMode.css        (../shared/customizableui/customizeMode.css)
+  skin/classic/browser/customizableui/panelUI-shared.css       (../shared/customizableui/panelUI-shared.css)
+
+  skin/classic/browser/customizableui/empty-overflow-panel.png     (../shared/customizableui/empty-overflow-panel.png)
+  skin/classic/browser/customizableui/empty-overflow-panel@2x.png  (../shared/customizableui/empty-overflow-panel@2x.png)
+  skin/classic/browser/customizableui/density-compact.svg      (../shared/customizableui/density-compact.svg)
+  skin/classic/browser/customizableui/density-normal.svg       (../shared/customizableui/density-normal.svg)
+  skin/classic/browser/customizableui/density-touch.svg        (../shared/customizableui/density-touch.svg)
+  skin/classic/browser/customizableui/whimsy.png               (../shared/customizableui/whimsy.png)
+  skin/classic/browser/downloads/allDownloadsView.inc.css      (../shared/downloads/allDownloadsView.inc.css)
+  skin/classic/browser/downloads/contentAreaDownloadsView.css  (../shared/downloads/contentAreaDownloadsView.css)
+  skin/classic/browser/downloads/download-blockedStates.css    (../shared/downloads/download-blockedStates.css)
+  skin/classic/browser/downloads/download-summary.svg          (../shared/downloads/download-summary.svg)
+  skin/classic/browser/downloads/downloads.inc.css             (../shared/downloads/downloads.inc.css)
+  skin/classic/browser/downloads/downloads.svg                 (../shared/downloads/downloads.svg)
+  skin/classic/browser/downloads/indicator.css                 (../shared/downloads/indicator.css)
+  skin/classic/browser/downloads/notification-finish-animation.svg       (../shared/downloads/notification-finish-animation.svg)
+  skin/classic/browser/downloads/notification-start-animation.svg        (../shared/downloads/notification-start-animation.svg)
+  skin/classic/browser/downloads/progressmeter.css             (../shared/downloads/progressmeter.css)
+  skin/classic/browser/drm-icon.svg                            (../shared/drm-icon.svg)
+  skin/classic/browser/identity-block/identity-block.css       (../shared/identity-block/identity-block.css)
+  skin/classic/browser/permissions.svg                         (../shared/identity-block/permissions.svg)
+  skin/classic/browser/migration/migration-dialog.css          (../shared/migration/migration-dialog.css)
+  skin/classic/browser/migration/migration-wizard.css          (../shared/migration/migration-wizard.css)
+  skin/classic/browser/notification-icons/autoplay-media.svg                (../shared/notification-icons/autoplay-media.svg)
+  skin/classic/browser/notification-icons/autoplay-media-blocked.svg        (../shared/notification-icons/autoplay-media-blocked.svg)
+  skin/classic/browser/notification-icons/camera-blocked.svg                (../shared/notification-icons/camera-blocked.svg)
+  skin/classic/browser/notification-icons/camera.svg                        (../shared/notification-icons/camera.svg)
+  skin/classic/browser/notification-icons/desktop-notification-blocked.svg  (../shared/notification-icons/desktop-notification-blocked.svg)
+  skin/classic/browser/notification-icons/desktop-notification.svg          (../shared/notification-icons/desktop-notification.svg)
+  skin/classic/browser/notification-icons/drag-indicator.svg                (../shared/notification-icons/drag-indicator.svg)
+  skin/classic/browser/notification-icons/geo.svg                           (../shared/notification-icons/geo.svg)
+  skin/classic/browser/notification-icons/geo-blocked.svg                   (../shared/notification-icons/geo-blocked.svg)
+  skin/classic/browser/notification-icons/microphone-blocked.svg            (../shared/notification-icons/microphone-blocked.svg)
+  skin/classic/browser/notification-icons/microphone.svg                    (../shared/notification-icons/microphone.svg)
+  skin/classic/browser/notification-icons/minimize.svg                      (../shared/notification-icons/minimize.svg)
+  skin/classic/browser/notification-icons/persistent-storage-blocked.svg    (../shared/notification-icons/persistent-storage-blocked.svg)
+  skin/classic/browser/notification-icons/persistent-storage.svg            (../shared/notification-icons/persistent-storage.svg)
+  skin/classic/browser/notification-icons/plugin-badge.svg                  (../shared/notification-icons/plugin-badge.svg)
+  skin/classic/browser/notification-icons/popup.svg                         (../shared/notification-icons/popup.svg)
+  skin/classic/browser/notification-icons/screen-blocked.svg                (../shared/notification-icons/screen-blocked.svg)
+  skin/classic/browser/notification-icons/screen.svg                        (../shared/notification-icons/screen.svg)
+  skin/classic/browser/notification-icons/xr-blocked.svg                    (../shared/notification-icons/xr-blocked.svg)
+  skin/classic/browser/notification-icons/xr.svg                            (../shared/notification-icons/xr.svg)
+  skin/classic/browser/notification-icons/midi.svg                          (../shared/notification-icons/midi.svg)
+
+  skin/classic/browser/tracking-protection.svg                        (../shared/identity-block/tracking-protection.svg)
+  skin/classic/browser/tracking-protection-disabled.svg               (../shared/identity-block/tracking-protection-disabled.svg)
+  skin/classic/browser/tracking-protection-active.svg                 (../shared/identity-block/tracking-protection-active.svg)
+  skin/classic/browser/tracking-protection-active-brighttext.svg      (../shared/identity-block/tracking-protection-active-brighttext.svg)
+  skin/classic/browser/translation/infobar.css                        (../shared/translation/infobar.css)
+
+  skin/classic/browser/toolbar-drag-indicator.svg                     (../shared/toolbar-drag-indicator.svg)
+
+  skin/classic/browser/protections/resolved-breach.svg         (../shared/protections/resolved-breach.svg)
+  skin/classic/browser/protections/resolved-breach-gray.svg    (../shared/protections/resolved-breach-gray.svg)
+  skin/classic/browser/protections/breached-password.svg       (../shared/protections/breached-password.svg)
+  skin/classic/browser/protections/new-feature.svg             (../shared/protections/new-feature.svg)
+
+  skin/classic/browser/preferences/android-menu.svg            (../shared/preferences/android-menu.svg)
+  skin/classic/browser/preferences/category-general.svg        (../shared/preferences/category-general.svg)
+  skin/classic/browser/preferences/category-privacy-security.svg    (../shared/preferences/category-privacy-security.svg)
+  skin/classic/browser/preferences/category-search.svg         (../shared/preferences/category-search.svg)
+  skin/classic/browser/preferences/category-sync.svg           (../shared/preferences/category-sync.svg)
+  skin/classic/browser/preferences/containers.css              (../shared/preferences/containers.css)
+  skin/classic/browser/preferences/containers-dialog.css       (../shared/preferences/containers-dialog.css)
+  skin/classic/browser/preferences/dialog.css                  (../shared/preferences/dialog.css)
+  skin/classic/browser/preferences/face-sad.svg                (../shared/preferences/face-sad.svg)
+  skin/classic/browser/preferences/face-smile.svg              (../shared/preferences/face-smile.svg)
+  skin/classic/browser/preferences/fxaPairDevice.css           (../shared/preferences/fxaPairDevice.css)
+  skin/classic/browser/preferences/ios-menu.svg                (../shared/preferences/ios-menu.svg)
+  skin/classic/browser/preferences/mozilla-logo.svg            (../shared/preferences/mozilla-logo.svg)
+  skin/classic/browser/preferences/no-search-bar.svg           (../shared/preferences/no-search-bar.svg)
+  skin/classic/browser/preferences/preferences.css             (../shared/preferences/preferences.css)
+  skin/classic/browser/preferences/privacy.css                 (../shared/preferences/privacy.css)
+  skin/classic/browser/preferences/relay-logo.svg              (../shared/preferences/relay-logo.svg)
+  skin/classic/browser/preferences/search-arrow-indicator.svg  (../shared/preferences/search-arrow-indicator.svg)
+  skin/classic/browser/preferences/search-bar.svg              (../shared/preferences/search-bar.svg)
+  skin/classic/browser/preferences/vpn-logo.svg                (../shared/preferences/vpn-logo.svg)
+  skin/classic/browser/preferences/search.css                  (../shared/preferences/search.css)
+  skin/classic/browser/preferences/siteDataSettings.css        (../shared/preferences/siteDataSettings.css)
+  skin/classic/browser/spotlight.css                           (../shared/spotlight.css)
+  skin/classic/browser/fxa/fxa-spinner.svg                     (../shared/fxa/fxa-spinner.svg)
+  skin/classic/browser/fxa/sync-illustration.svg               (../shared/fxa/sync-illustration.svg)
+  skin/classic/browser/fxa/sync-illustration-issue.svg         (../shared/fxa/sync-illustration-issue.svg)
+  skin/classic/browser/fxa/send-to-device.svg                  (../shared/fxa/send-to-device.svg)
+
+  skin/classic/browser/fxa/avatar.svg                          (../shared/fxa/avatar.svg)
+  skin/classic/browser/fxa/avatar-color.svg                    (../shared/fxa/avatar-color.svg)
+  skin/classic/browser/fxa/avatar-empty.svg                    (../shared/fxa/avatar-empty.svg)
+  skin/classic/browser/fxa/sync-devices.svg                    (../shared/fxa/sync-devices.svg)
+  skin/classic/browser/fxa/send.svg                            (../shared/fxa/send.svg)
+  skin/classic/browser/fxa/monitor.svg                         (../shared/fxa/monitor.svg)
+  skin/classic/browser/fxa/add-device.svg                      (../shared/fxa/add-device.svg)
+
+  skin/classic/browser/fullscreen/warning.css                  (../shared/fullscreen/warning.css)
+
+  skin/classic/browser/add-circle-fill.svg            (../shared/icons/add-circle-fill.svg)
+  skin/classic/browser/back.svg                       (../shared/icons/back.svg)
+  skin/classic/browser/bookmark.svg                   (../shared/icons/bookmark.svg)
+  skin/classic/browser/bookmark-12.svg                (../shared/icons/bookmark-12.svg)
+  skin/classic/browser/bookmark-hollow.svg            (../shared/icons/bookmark-hollow.svg)
+  skin/classic/browser/bookmark-star-on-tray.svg      (../shared/icons/bookmark-star-on-tray.svg)
+  skin/classic/browser/bookmarks-toolbar.svg          (../shared/icons/bookmarks-toolbar.svg)
+  skin/classic/browser/canvas.svg                     (../shared/icons/canvas.svg)
+  skin/classic/browser/canvas-blocked.svg             (../shared/icons/canvas-blocked.svg)
+  skin/classic/browser/characterEncoding.svg          (../shared/icons/characterEncoding.svg)
+  skin/classic/browser/chevron-animation.svg          (../shared/icons/chevron-animation.svg)
+  skin/classic/browser/customize.svg                  (../shared/icons/customize.svg)
+  skin/classic/browser/device-phone.svg               (../shared/icons/device-phone.svg)
+  skin/classic/browser/device-tablet.svg              (../shared/icons/device-tablet.svg)
+  skin/classic/browser/device-desktop.svg             (../shared/icons/device-desktop.svg)
+  skin/classic/browser/device-tv.svg                  (../shared/icons/device-tv.svg)
+  skin/classic/browser/device-vr.svg                  (../shared/icons/device-vr.svg)
+  skin/classic/browser/edit-cut.svg                   (../shared/icons/edit-cut.svg)
+  skin/classic/browser/edit-paste.svg                 (../shared/icons/edit-paste.svg)
+  skin/classic/browser/fingerprint.svg                (../shared/icons/fingerprint.svg)
+  skin/classic/browser/forget.svg                     (../shared/icons/forget.svg)
+  skin/classic/browser/forward.svg                    (../shared/icons/forward.svg)
+  skin/classic/browser/fullscreen.svg                 (../shared/icons/fullscreen.svg)
+  skin/classic/browser/fullscreen-exit.svg            (../shared/icons/fullscreen-exit.svg)
+  skin/classic/browser/history.svg                    (../shared/icons/history.svg)
+  skin/classic/browser/home.svg                       (../shared/icons/home.svg)
+  skin/classic/browser/import.svg                     (../shared/icons/import.svg)
+#ifndef MOZ_WIDGET_GTK
+  skin/classic/browser/import-export.svg              (../shared/icons/import-export.svg)
+#endif
+  skin/classic/browser/library.svg                    (../shared/icons/library.svg)
+  skin/classic/browser/login.svg                      (../shared/icons/login.svg)
+  skin/classic/browser/logo-android.svg               (../shared/icons/logo-android.svg)
+  skin/classic/browser/logo-ios.svg                   (../shared/icons/logo-ios.svg)
+  skin/classic/browser/mail.svg                       (../shared/icons/mail.svg)
+  skin/classic/browser/menu.svg                       (../shared/icons/menu.svg)
+  skin/classic/browser/menu-badged.svg                (../shared/icons/menu-badged.svg)
+  skin/classic/browser/new-tab.svg                    (../shared/icons/new-tab.svg)
+  skin/classic/browser/notification-fill-12.svg       (../shared/icons/notification-fill-12.svg)
+  skin/classic/browser/open.svg                       (../shared/icons/open.svg)
+  skin/classic/browser/pin-12.svg                     (../shared/icons/pin-12.svg)
+  skin/classic/browser/privateBrowsing.svg            (../shared/icons/privateBrowsing.svg)
+  skin/classic/browser/quickactions.svg               (../shared/icons/quickactions.svg)
+  skin/classic/browser/reader-mode.svg                (../shared/icons/reader-mode.svg)
+  skin/classic/browser/reload-to-stop.svg             (../shared/icons/reload-to-stop.svg)
+  skin/classic/browser/save.svg                       (../shared/icons/save.svg)
+  skin/classic/browser/screenshot.svg                 (../shared/icons/screenshot.svg)
+  skin/classic/browser/sidebars.svg                   (../shared/icons/sidebars.svg)
+  skin/classic/browser/sidebars-right.svg             (../shared/icons/sidebars-right.svg)
+#ifndef MOZ_WIDGET_GTK
+  skin/classic/browser/sort.svg                       (../shared/icons/sort.svg)
+#endif
+  skin/classic/browser/stop-to-reload.svg             (../shared/icons/stop-to-reload.svg)
+  skin/classic/browser/subtract-circle-fill.svg       (../shared/icons/subtract-circle-fill.svg)
+  skin/classic/browser/success-animation.svg          (../shared/icons/success-animation.svg)
+  skin/classic/browser/sync.svg                       (../shared/icons/sync.svg)
+  skin/classic/browser/synced-tabs.svg                (../shared/icons/synced-tabs.svg)
+  skin/classic/browser/tab.svg                        (../shared/icons/tab.svg)
+  skin/classic/browser/thumb-down.svg                 (../shared/icons/thumb-down.svg)
+  skin/classic/browser/topsites.svg                   (../shared/icons/topsites.svg)
+  skin/classic/browser/trending.svg                   (../shared/icons/trending.svg)
+  skin/classic/browser/window.svg                     (../shared/icons/window.svg)
+  skin/classic/browser/zoom-out.svg                   (../shared/icons/zoom-out.svg)
+  skin/classic/browser/ion.svg                        (../shared/icons/ion.svg)
+
+
+  skin/classic/browser/search-engine-placeholder.png           (../shared/search/search-engine-placeholder.png)
+  skin/classic/browser/search-engine-placeholder@2x.png        (../shared/search/search-engine-placeholder@2x.png)
+  skin/classic/browser/search-indicator-badge-add.svg          (../shared/search/search-indicator-badge-add.svg)
+
+  skin/classic/browser/tabbrowser/crashed.svg                  (../shared/tabbrowser/crashed.svg)
+  skin/classic/browser/tabbrowser/hourglass.svg                (../shared/tabbrowser/hourglass.svg)
+  skin/classic/browser/tabbrowser/loading.svg                  (../shared/tabbrowser/loading.svg)
+  skin/classic/browser/tabbrowser/loading-burst.svg            (../shared/tabbrowser/loading-burst.svg)
+  skin/classic/browser/tabbrowser/pendingpaint.png             (../shared/tabbrowser/pendingpaint.png)
+  skin/classic/browser/tabbrowser/tab-audio-playing-small.svg  (../shared/tabbrowser/tab-audio-playing-small.svg)
+  skin/classic/browser/tabbrowser/tab-audio-muted-small.svg    (../shared/tabbrowser/tab-audio-muted-small.svg)
+  skin/classic/browser/tabbrowser/tab-audio-blocked-small.svg  (../shared/tabbrowser/tab-audio-blocked-small.svg)
+  skin/classic/browser/tabbrowser/tab-connecting.png           (../shared/tabbrowser/tab-connecting.png)
+  skin/classic/browser/tabbrowser/tab-connecting@2x.png        (../shared/tabbrowser/tab-connecting@2x.png)
+  skin/classic/browser/tabbrowser/tab-drag-indicator.svg       (../shared/tabbrowser/tab-drag-indicator.svg)
+  skin/classic/browser/tabbrowser/tab-loading.png              (../shared/tabbrowser/tab-loading.png)
+  skin/classic/browser/tabbrowser/tab-loading@2x.png           (../shared/tabbrowser/tab-loading@2x.png)
+  skin/classic/browser/tabbrowser/tab-loading-inverted.png     (../shared/tabbrowser/tab-loading-inverted.png)
+  skin/classic/browser/tabbrowser/tab-loading-inverted@2x.png  (../shared/tabbrowser/tab-loading-inverted@2x.png)
+
+  skin/classic/browser/translating-16.png                      (../shared/translation/translating-16.png)
+  skin/classic/browser/translating-16@2x.png                   (../shared/translation/translating-16@2x.png)
+  skin/classic/browser/translation-16.png                      (../shared/translation/translation-16.png)
+  skin/classic/browser/translation-16@2x.png                   (../shared/translation/translation-16@2x.png)
+  skin/classic/browser/update-badge.svg                        (../shared/update-badge.svg)
+  skin/classic/browser/profiler-popup-backdrop.png             (../shared/profiler-popup-backdrop.png)
+  skin/classic/browser/tab-crashed.svg                         (../shared/incontent-icons/tab-crashed.svg)
+  skin/classic/browser/panic-panel/header.png                  (../shared/panic-panel/header.png)
+  skin/classic/browser/panic-panel/header@2x.png               (../shared/panic-panel/header@2x.png)
+  skin/classic/browser/panic-panel/icons.png                   (../shared/panic-panel/icons.png)
+  skin/classic/browser/panic-panel/icons@2x.png                (../shared/panic-panel/icons@2x.png)
+  skin/classic/browser/places/sidebar.css                      (../shared/places/sidebar.css)
+  skin/classic/browser/places/bookmarksMenu.svg                (../shared/places/bookmarksMenu.svg)
+  skin/classic/browser/places/bookmarksToolbar.svg             (../shared/places/bookmarksToolbar.svg)
+  skin/classic/browser/places/editBookmark.css                 (../shared/places/editBookmark.css)
+  skin/classic/browser/places/editBookmarkPanel.css            (../shared/places/editBookmarkPanel.css)
+  skin/classic/browser/places/folder-smart.svg                 (../shared/places/folder-smart.svg)
+  skin/classic/browser/places/tag.svg                          (../shared/places/tag.svg)
+  skin/classic/browser/places/tree-icons.css                   (../shared/places/tree-icons.css)
+  skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css)
+  skin/classic/browser/privatebrowsing/favicon.svg             (../shared/privatebrowsing/favicon.svg)
+
+  skin/classic/browser/syncedtabs/sidebar.css                  (../shared/syncedtabs/sidebar.css)
+
+  skin/classic/browser/weather/sunny.svg                       (../shared/weather/sunny.svg)
+  skin/classic/browser/weather/mostly-sunny.svg                (../shared/weather/mostly-sunny.svg)
+  skin/classic/browser/weather/partly-sunny.svg                (../shared/weather/partly-sunny.svg)
+  skin/classic/browser/weather/hazy-sunshine.svg               (../shared/weather/hazy-sunshine.svg)
+  skin/classic/browser/weather/cloudy.svg                      (../shared/weather/cloudy.svg)
+  skin/classic/browser/weather/fog.svg                         (../shared/weather/fog.svg)
+  skin/classic/browser/weather/showers.svg                     (../shared/weather/showers.svg)
+  skin/classic/browser/weather/mostly-cloudy-with-showers.svg  (../shared/weather/mostly-cloudy-with-showers.svg)
+  skin/classic/browser/weather/thunderstorms.svg               (../shared/weather/thunderstorms.svg)
+  skin/classic/browser/weather/mostly-cloudy-with-thunderstorms.svg (../shared/weather/mostly-cloudy-with-thunderstorms.svg)
+  skin/classic/browser/weather/rain.svg                        (../shared/weather/rain.svg)
+  skin/classic/browser/weather/flurries.svg                    (../shared/weather/flurries.svg)
+  skin/classic/browser/weather/partly-sunny-with-flurries.svg  (../shared/weather/partly-sunny-with-flurries.svg)
+  skin/classic/browser/weather/snow.svg                        (../shared/weather/snow.svg)
+  skin/classic/browser/weather/ice.svg                         (../shared/weather/ice.svg)
+  skin/classic/browser/weather/freezing-rain.svg               (../shared/weather/freezing-rain.svg)
+  skin/classic/browser/weather/hot.svg                         (../shared/weather/hot.svg)
+  skin/classic/browser/weather/windy.svg                       (../shared/weather/windy.svg)
+  skin/classic/browser/weather/night-clear.svg                 (../shared/weather/night-clear.svg)
+  skin/classic/browser/weather/night-mostly-clear.svg          (../shared/weather/night-mostly-clear.svg)
+  skin/classic/browser/weather/night-hazy-moonlight.svg        (../shared/weather/night-hazy-moonlight.svg)
+  skin/classic/browser/weather/night-partly-cloudy-with-showers.svg (../shared/weather/night-partly-cloudy-with-showers.svg)
+  skin/classic/browser/weather/night-partly-cloudy-with-thunderstorms.svg (../shared/weather/night-partly-cloudy-with-thunderstorms.svg)
+  skin/classic/browser/weather/night-mostly-cloudy-with-flurries.svg (../shared/weather/night-mostly-cloudy-with-flurries.svg)
diff --git a/browser/themes/shared/light-dark-overrides.css b/browser/themes/shared/light-dark-overrides.css
new file mode 100644
index 0000000000..5fa24219f5
--- /dev/null
+++ b/browser/themes/shared/light-dark-overrides.css
@@ -0,0 +1,110 @@
+/* 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/. */
+
+#urlbar {
+  --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color);
+  --urlbar-box-focus-bgcolor: var(--button-bgcolor);
+  --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor);
+}
+
+@media (-moz-platform: windows) {
+  /* The window background is white due to no accentcolor in the lightweight
+     theme. It can't be changed to transparent when there is no compositor
+     (Win 7 in classic / basic theme), or else dragging and focus become
+     broken. So instead just show the normal titlebar in that case, and override
+     the window color as transparent when the compositor is available. */
+  @media (-moz-windows-compositor: 0) {
+    :root[tabsintitlebar]:not([inDOMFullscreen]) #titlebar:-moz-lwtheme {
+      visibility: visible;
+    }
+
+    /* Prevent accent color overriding the window background for
+     * light and dark theme on Aero Basic. This is copied from browser-aero.css. */
+    @media (-moz-windows-default-theme) {
+      :root {
+        background-color: rgb(185,209,234) !important;
+      }
+      :root:-moz-window-inactive {
+        background-color: rgb(215,228,242) !important;
+      }
+    }
+  }
+
+  /* Add a fog for background tabs to be visible on Windows 7 glass window background */
+  @media (-moz-platform: windows-win7) {
+    @media (-moz-windows-default-theme) {
+      #TabsToolbar {
+        background-image: radial-gradient(ellipse at bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.5) 80%, transparent);
+        color: black;
+        --toolbarbutton-icon-fill: currentColor;
+      }
+    }
+  }
+
+  @media (-moz-windows-glass) {
+    /* Make the menubar text readable on aero glass (copied from browser-aero.css). */
+    #toolbar-menubar {
+      text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
+    }
+
+    #main-menubar:not(:-moz-window-inactive) {
+      background-color: rgba(255,255,255,.5);
+      color: black;
+      border-radius: 4px;
+    }
+  }
+
+  @media (-moz-platform: windows-win7),
+         (-moz-platform: windows-win8) {
+    @media (-moz-windows-compositor) {
+      :root {
+        background: transparent !important;
+      }
+
+      /* Remove lwtheme borders from toolbars in non-maximized windows. */
+      #toolbar-menubar,
+      #TabsToolbar {
+        border-inline-style: none !important;
+      }
+    }
+
+    /* Use proper menu text styling in Win7 classic mode. On Windows 8, we use
+       these colors so tabs and menus are legible against the window accent color.
+       These colors are copied from browser.css. */
+    @media (-moz-windows-compositor: 0),
+           (-moz-windows-default-theme: 0),
+           (-moz-platform: windows-win8) {
+      :root[tabsintitlebar] {
+        color: CaptionText;
+      }
+
+      :root[tabsintitlebar]:-moz-window-inactive {
+        color: InactiveCaptionText;
+      }
+    }
+  }
+
+  /* Restored windows get an artificial border on windows, because the lwtheme background
+   * overlaps the regular window border. That isn't the case for us, so we avoid painting
+   * over the native border with our custom borders. These are !important to avoid
+   * specificity-wars with the selectors that add these borders. */
+  @media (-moz-windows-classic),
+         (-moz-windows-compositor: 0) and (-moz-windows-default-theme) {
+    #navigator-toolbox {
+      background-image: none !important;
+    }
+  }
+  @media (-moz-windows-glass) {
+    #navigator-toolbox {
+      border-top: none !important;
+      box-shadow: none !important;
+      padding-top: 0 !important;
+    }
+  }
+  @media (-moz-platform: windows-win8) {
+    #navigator-toolbox {
+      border-top: none !important;
+    }
+  }
+}
diff --git a/browser/themes/shared/menupanel.css b/browser/themes/shared/menupanel.css
new file mode 100644
index 0000000000..e20b3cfaa4
--- /dev/null
+++ b/browser/themes/shared/menupanel.css
@@ -0,0 +1,27 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* Menu panel and palette styles */
+
+/**
+ * These are placeholder icons until we get the proper Proton
+ * assets for zoom/fullscreen/sync.
+ */
+#appMenu-zoomEnlarge-button2 {
+  list-style-image: url(chrome://browser/skin/add-circle-fill.svg);
+}
+
+#appMenu-zoomReduce-button2 {
+  list-style-image: url(chrome://browser/skin/subtract-circle-fill.svg);
+}
+
+#appMenu-fullscreen-button2 {
+  list-style-image: url(chrome://browser/skin/fullscreen.svg);
+}
+
+#appMenu-fullscreen-button2[checked] {
+  list-style-image: url(chrome://browser/skin/fullscreen-exit.svg);
+}
diff --git a/browser/themes/shared/migration/migration-dialog.css b/browser/themes/shared/migration/migration-dialog.css
new file mode 100644
index 0000000000..686f6cfe9c
--- /dev/null
+++ b/browser/themes/shared/migration/migration-dialog.css
@@ -0,0 +1,9 @@
+/* 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/. */
+
+@import url("chrome://global/skin/in-content/common.css");
+
+body {
+  padding: 24px;
+}
diff --git a/browser/themes/shared/migration/migration-wizard.css b/browser/themes/shared/migration/migration-wizard.css
new file mode 100644
index 0000000000..0140bd5795
--- /dev/null
+++ b/browser/themes/shared/migration/migration-wizard.css
@@ -0,0 +1,29 @@
+/* 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/. */
+
+@import url("chrome://global/skin/in-content/common.css");
+
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+h3 {
+  font-weight: normal;
+  margin-block-start: 0;
+  min-height: 1em;
+}
+
+fieldset {
+  border: 0;
+}
+
+label {
+  display: flex;
+  align-items: center;
+}
+
+button {
+  margin-block-end: 0;
+}
diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css
new file mode 100644
index 0000000000..bd6271f4b9
--- /dev/null
+++ b/browser/themes/shared/notification-icons.css
@@ -0,0 +1,404 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+#notification-popup-box {
+  height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
+  color: inherit;
+  border-radius: var(--urlbar-icon-border-radius);
+}
+#notification-popup-box:hover {
+  background-color: hsla(0,0%,70%,.2);
+}
+#notification-popup-box:hover:active,
+#notification-popup-box[open] {
+  background-color: hsla(0,0%,70%,.3);
+}
+
+.popup-notification-icon,
+.permission-popup-permission-icon {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+}
+
+.notification-anchor-icon:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+  border-radius: var(--urlbar-icon-border-radius);
+}
+
+.blocked-permission-icon:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: calc(var(--urlbar-icon-padding) + var(--focus-outline-inset));
+  border-radius: 1px;
+}
+
+/* This class can be used alone or in combination with the class defining the
+   type of icon displayed. This rule must be defined before the others in order
+   for its list-style-image to be overridden. */
+.notification-anchor-icon {
+  list-style-image: url(chrome://global/skin/icons/info-filled.svg);
+  padding: var(--urlbar-icon-padding);
+}
+
+/* INDIVIDUAL NOTIFICATIONS */
+
+.focus-tab-by-prompt-icon {
+  list-style-image: url(chrome://global/skin/icons/info.svg);
+}
+
+.storage-access-icon {
+  list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg);
+}
+
+.persistent-storage-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg);
+}
+
+.persistent-storage-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage-blocked.svg);
+}
+
+.desktop-notification-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg);
+}
+
+.desktop-notification-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification-blocked.svg);
+}
+
+.geo-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/geo.svg);
+}
+
+.geo-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/geo-blocked.svg);
+}
+
+.open-protocol-handler-icon {
+  list-style-image: url(chrome://global/skin/icons/open-in-new.svg);
+}
+
+.open-protocol-handler-icon:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.xr-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/xr.svg);
+}
+
+.xr-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/xr-blocked.svg);
+}
+
+.autoplay-media-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg);
+}
+
+.autoplay-media-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media-blocked.svg);
+}
+
+.storage-access-notification-content {
+  color: var(--panel-disabled-color);
+  font-style: italic;
+  margin-top: 15px;
+}
+
+.storage-access-notification-content .text-link {
+  color: -moz-nativehyperlinktext;
+}
+
+.storage-access-notification-content .text-link:hover {
+  text-decoration: underline;
+}
+
+#storage-access-notification .popup-notification-body-container {
+  padding: 20px;
+}
+
+.indexedDB-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg);
+}
+
+#password-notification-icon {
+  list-style-image: url(chrome://browser/skin/login.svg);
+}
+
+#password-notification-icon[extraAttr="attention"] {
+  fill: var(--toolbar-field-icon-fill-attention);
+  fill-opacity: 1;
+}
+
+.camera-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/camera.svg);
+}
+
+.camera-icon.in-use {
+  list-style-image: url(chrome://browser/skin/notification-icons/camera.svg);
+}
+
+.camera-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/camera-blocked.svg);
+}
+
+.microphone-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
+}
+
+.microphone-icon.in-use {
+  list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
+}
+
+.microphone-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/microphone-blocked.svg);
+}
+
+.popup-notification-icon.microphone-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
+}
+
+.screen-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/screen.svg);
+}
+
+.screen-icon.in-use {
+  list-style-image: url(chrome://browser/skin/notification-icons/screen.svg);
+}
+
+.screen-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/screen-blocked.svg);
+}
+
+.speaker-icon {
+  list-style-image: url(chrome://global/skin/media/audio.svg);
+}
+
+.midi-icon,
+.midi-sysex-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/midi.svg);
+}
+
+#canvas-notification-icon,
+.canvas-icon {
+  list-style-image: url(chrome://browser/skin/canvas.svg);
+}
+
+.canvas-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/canvas-blocked.svg);
+}
+
+#webauthn-notification-icon,
+.popup-notification-icon[popupid^="webauthn-prompt-"] {
+  list-style-image: url(chrome://browser/skin/fingerprint.svg);
+}
+
+#identity-credential-notification-icon {
+  list-style-image: url(chrome://browser/skin/fingerprint.svg);
+}
+
+#permission-popup-menulist {
+  margin-inline-end: 0;
+}
+
+#webRTC-preview:not([hidden]) {
+  -moz-box-orient: vertical;
+}
+
+#webRTC-previewVideo {
+  border-radius: 4px;
+  border: 1px solid var(--panel-separator-color);
+  min-width: 0;
+  min-height: 10em;
+  max-height: 250px;
+}
+
+#webRTC-all-windows-shared,
+#webRTC-previewWarning {
+  font-size: 0.8em;
+}
+
+@media not (prefers-contrast) {
+  #webRTC-all-windows-shared,
+  #webRTC-previewWarning {
+    opacity: 0.6;
+  }
+}
+
+#webRTC-previewWarning {
+  margin-block-start: 14px;
+}
+
+/**
+ * All learn-more links tend to have an !important margin-top, but
+ * the small one below the WebRTC preview warning is special and
+ * doesn't have one by design.
+ */
+#webRTC-previewWarning-learnMore {
+  margin-top: 0 !important;
+  font-size: 0.75em;
+}
+
+#webRTC-previewWarningBox:-moz-locale-dir(rtl) {
+  background-position: calc(100% - .75em) .75em;
+}
+
+#webRTC-previewWarning > .text-link {
+  margin-inline-start: 0;
+}
+
+/* This icon has a block sign in it, so we don't need a blocked version. */
+.popup-icon {
+  list-style-image: url("chrome://browser/skin/notification-icons/popup.svg");
+}
+
+/**
+ * Bug 1708716: The blocked popup icon is just slightly vertically offset from
+ * the other icons that can appear alongside it in the URL bar due to how it's
+ * placed in the SVG file. We nudge it a little here to make it line up in a
+ * more aesthetically pleasing way.
+ */
+#blocked-permissions-container > .popup-icon {
+  transform: translateY(1px);
+}
+
+#permission-popup-menulist,
+#permission-popup-menulist > menupopup {
+  min-width: 6.5em;
+}
+
+/* EME */
+
+.drm-icon {
+  list-style-image: url("chrome://browser/skin/drm-icon.svg");
+}
+
+.notification-anchor-icon[animate=true],
+#eme-notification-icon[firstplay=true] {
+  animation: emeTeachingMoment 0.2s linear 0s 5 normal;
+}
+
+@keyframes emeTeachingMoment {
+  0% {transform: translateX(0); }
+  25% {transform: translateX(3px) }
+  75% {transform: translateX(-3px) }
+  100% { transform: translateX(0); }
+}
+
+/* INSTALL ADDONS */
+
+.install-icon {
+  list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
+}
+
+.install-icon.blocked-permission-icon {
+  list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
+}
+
+/* PLUGINS */
+
+.plugin-icon {
+  list-style-image: url(chrome://global/skin/icons/plugin.svg);
+  transition: fill 1.5s;
+}
+
+#plugin-icon-badge {
+  list-style-image: url(chrome://browser/skin/notification-icons/plugin-badge.svg);
+  width: 16px;
+  height: 16px;
+  opacity: 0;
+  transition: opacity 1.5s;
+}
+
+#plugins-notification-icon:not(.plugin-blocked)[extraAttr="inactive"] > .plugin-icon {
+  fill-opacity: 0.25;
+}
+
+#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge {
+  opacity: 1;
+}
+
+#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge[animate] {
+  animation: blink-badge 1000ms ease 0s 5 alternate both;
+}
+
+@keyframes blink-badge {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.plugin-blocked > .plugin-icon {
+  list-style-image: url(chrome://global/skin/icons/plugin-blocked.svg);
+  fill: #d92215 !important;
+}
+
+.plugin-blocked > #plugin-icon-badge {
+  visibility: collapse;
+}
+
+#notification-popup-box[hidden] {
+  /* Override display:none to make the pluginBlockedNotification animation work
+     when showing the notification repeatedly. */
+  display: -moz-box;
+  visibility: collapse;
+}
+
+#plugins-notification-icon.plugin-blocked[showing] {
+  animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
+}
+
+@keyframes pluginBlockedNotification {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* TRANSLATION */
+
+.translation-icon {
+  list-style-image: url(chrome://browser/skin/translation-16.png);
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+.translation-icon.in-use {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+@media (-moz-platform: macos) and (min-resolution: 1.1dppx) {
+  .translation-icon {
+    list-style-image: url(chrome://browser/skin/translation-16@2x.png);
+    -moz-image-region: rect(0px, 32px, 32px, 0px);
+  }
+
+  .translation-icon.in-use {
+    -moz-image-region: rect(0px, 64px, 32px, 32px);
+  }
+}
+
+/* UPDATE */
+.popup-notification-icon[popupid="update-available"],
+.popup-notification-icon[popupid="update-manual"],
+.popup-notification-icon[popupid="update-other-instance"],
+.popup-notification-icon[popupid="update-restart"] {
+  background: url(chrome://browser/skin/update-badge.svg) no-repeat center;
+  -moz-context-properties: fill;
+  fill: var(--panel-banner-item-update-supported-bgcolor);
+}
+
+.popup-notification-icon[popupid="update-unsupported"] {
+  background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
+  -moz-context-properties: fill;
+  fill: var(--warning-icon-bgcolor);
+}
diff --git a/browser/themes/shared/notification-icons/autoplay-media-blocked.svg b/browser/themes/shared/notification-icons/autoplay-media-blocked.svg
new file mode 100644
index 0000000000..8710280b1f
--- /dev/null
+++ b/browser/themes/shared/notification-icons/autoplay-media-blocked.svg
@@ -0,0 +1,9 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m5 4.345 0-2.059L4.714 2 2.655 2z"/>
+  <path d="m10.239 9.584 1.709-.976a.7.7 0 0 0 0-1.215l-4.9-2.799A.7.7 0 0 0 6 5.201l0 .144 4.239 4.239z"/>
+  <path d="M1.067 2.183a.626.626 0 0 0-.885.885L1.79 4.674A7.461 7.461 0 0 0 1 8c0 4.136 3.364 7.5 7.5 7.5a7.388 7.388 0 0 0 3.321-.794l1.111 1.111a.627.627 0 0 0 .885 0 .628.628 0 0 0 0-.885L1.067 2.183zM8.5 14.25A6.257 6.257 0 0 1 2.25 8c0-.826.173-1.63.484-2.382L6 8.885l0 1.914a.7.7 0 0 0 1.047.608l.938-.536 2.89 2.89a6.166 6.166 0 0 1-2.375.489z"/>
+  <path d="M8.5 1.75c1.669 0 3.239.65 4.419 1.831A6.206 6.206 0 0 1 14.75 8a6.222 6.222 0 0 1-1.759 4.336l.884.884A7.474 7.474 0 0 0 16 8c0-2.003-.78-3.887-2.196-5.304A7.455 7.455 0 0 0 8.5.5a.625.625 0 0 0 0 1.25z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/autoplay-media.svg b/browser/themes/shared/notification-icons/autoplay-media.svg
new file mode 100644
index 0000000000..3ee92bcfc4
--- /dev/null
+++ b/browser/themes/shared/notification-icons/autoplay-media.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M13.804 2.696A7.455 7.455 0 0 0 8.5.5a.625.625 0 0 0 0 1.25c1.669 0 3.239.65 4.419 1.831A6.206 6.206 0 0 1 14.75 8c0 3.446-2.804 6.25-6.25 6.25S2.25 11.446 2.25 8c0-1.051.275-2.066.772-2.978l1.125 1.125A.5.5 0 0 0 5 5.793l0-3.52L4.727 2l-3.52 0a.5.5 0 0 0-.353.854l1.251 1.251A7.451 7.451 0 0 0 1 8c0 4.136 3.364 7.5 7.5 7.5S16 12.136 16 8c0-2.003-.78-3.887-2.196-5.304z"/>
+  <path d="m6 10.799 0-5.598a.7.7 0 0 1 1.047-.608l4.9 2.799a.7.7 0 0 1 0 1.215l-4.9 2.799A.7.7 0 0 1 6 10.799z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/camera-blocked.svg b/browser/themes/shared/notification-icons/camera-blocked.svg
new file mode 100644
index 0000000000..fdb7bf27d9
--- /dev/null
+++ b/browser/themes/shared/notification-icons/camera-blocked.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M1.067 2.933a.626.626 0 0 0-.885.885L1 4.635 1 12a2 2 0 0 0 2 2l7.333 0 .85.817a.621.621 0 0 0 .884 0 .628.628 0 0 0 0-.885l-11-10.999zM2.85 12.75l-.6-.6 0-6.265 6.865 6.865-6.265 0z"/>
+  <path d="M13.986 2.824c-.491 0-.992.182-1.4.59L12 4a2 2 0 0 0-2-2L3 2c-.32 0-.613.093-.88.228L3.142 3.25l7.008 0 .6.6 0 2.65.518 0 2.202-2.202a.713.713 0 0 1 .516-.224c.317 0 .764.234.764.754l0 6.343c0 .52-.447.754-.764.754a.71.71 0 0 1-.516-.224L11.268 9.5l-.518 0 0 1.266 1.836 1.819c.407.407.908.59 1.4.59 1.028 0 2.014-.798 2.014-2.004l0-6.343c0-1.205-.986-2.004-2.014-2.004z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/camera.svg b/browser/themes/shared/notification-icons/camera.svg
new file mode 100644
index 0000000000..f653b3bcc7
--- /dev/null
+++ b/browser/themes/shared/notification-icons/camera.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M13.986 2.824c-.491 0-.992.182-1.4.59L12 4a2 2 0 0 0-2-2L3 2a2 2 0 0 0-2 2l0 8a2 2 0 0 0 2 2l7 0a2 2 0 0 0 2-2l.586.586c.407.407.908.59 1.4.59 1.028 0 2.014-.798 2.014-2.004l0-6.344c0-1.205-.986-2.004-2.014-2.004zm.764 8.348c0 .52-.447.754-.764.754a.71.71 0 0 1-.516-.224l-.586-.586L11.268 9.5l-.518 0 0 2.65-.6.6-7.3 0-.6-.6 0-8.3.6-.6 7.3 0 .6.6 0 2.65.518 0 1.616-1.616.586-.586a.713.713 0 0 1 .516-.224c.317 0 .764.234.764.754l0 6.344z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/desktop-notification-blocked.svg b/browser/themes/shared/notification-icons/desktop-notification-blocked.svg
new file mode 100644
index 0000000000..d2f97a166c
--- /dev/null
+++ b/browser/themes/shared/notification-icons/desktop-notification-blocked.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M1.067.183a.626.626 0 0 0-.885.885l1.046 1.046A1.945 1.945 0 0 0 1 3l0 7a2 2 0 0 0 2 2l4 0 3.75 3L12 15l0-2.115 1.932 1.932a.625.625 0 0 0 .885-.885L1.067.183zm9.683 13.216-3.038-2.43a1 1 0 0 0-.625-.219l-4.237 0-.6-.6 0-7.015L6.115 7l-1.24 0a.625.625 0 0 0 0 1.25l2.49 0 3.385 3.385 0 1.764z"/>
+  <path d="M13 1 3.654 1l1.25 1.25 8.247 0 .6.6 0 7.3-.473.473.948.948c.467-.366.774-.93.774-1.571l0-7a2 2 0 0 0-2-2z"/>
+  <path d="m7.904 5.25 3.221 0a.625.625 0 0 0 0-1.25L6.654 4l1.25 1.25z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/desktop-notification.svg b/browser/themes/shared/notification-icons/desktop-notification.svg
new file mode 100644
index 0000000000..41d5fa9b40
--- /dev/null
+++ b/browser/themes/shared/notification-icons/desktop-notification.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m11.125 5.25-6.25 0a.625.625 0 0 1 0-1.25l6.25 0a.625.625 0 0 1 0 1.25z"/>
+  <path d="m9.125 8.25-4.25 0a.625.625 0 0 1 0-1.25l4.25 0a.625.625 0 0 1 0 1.25z"/>
+  <path d="m13.15 2.25.6.6 0 7.3-.6.6-1.9 0a.5.5 0 0 0-.5.5l0 2.149-3.038-2.43a1 1 0 0 0-.625-.219l-4.237 0-.6-.6 0-7.3.6-.6 10.3 0zM13 1 3 1a2 2 0 0 0-2 2l0 7a2 2 0 0 0 2 2l4 0 3.75 3L12 15l0-3 1 0a2 2 0 0 0 2-2l0-7a2 2 0 0 0-2-2z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/drag-indicator.svg b/browser/themes/shared/notification-icons/drag-indicator.svg
new file mode 100644
index 0000000000..78265cd155
--- /dev/null
+++ b/browser/themes/shared/notification-icons/drag-indicator.svg
@@ -0,0 +1,4 @@
+<!-- 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="4" height="22" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M3.5 21a.5.5 0 01.09.992L3.5 22h-3a.5.5 0 01-.09-.992L.5 21h3zm0-3a.5.5 0 01.09.992L3.5 19h-3a.5.5 0 01-.09-.992L.5 18h3zm0-3a.5.5 0 01.09.992L3.5 16h-3a.5.5 0 01-.09-.992L.5 15h3zm0-3a.5.5 0 01.09.992L3.5 13h-3a.5.5 0 01-.09-.992L.5 12h3zm0-3a.5.5 0 01.09.992L3.5 10h-3a.5.5 0 01-.09-.992L.5 9h3zm0-3a.5.5 0 01.09.992L3.5 7h-3a.5.5 0 01-.09-.992L.5 6h3zm0-3a.5.5 0 01.09.992L3.5 4h-3a.5.5 0 01-.09-.992L.5 3h3zm0-3a.5.5 0 01.09.992L3.5 1h-3A.5.5 0 01.41.008L.5 0h3z"/></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/notification-icons/geo-blocked.svg b/browser/themes/shared/notification-icons/geo-blocked.svg
new file mode 100644
index 0000000000..53b7d3ed14
--- /dev/null
+++ b/browser/themes/shared/notification-icons/geo-blocked.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M1.067 2.183a.626.626 0 0 0-.885.885l1.316 1.316A6.694 6.694 0 0 0 1 6.884c0 2.717 3.575 6.574 5.615 8.553a1.985 1.985 0 0 0 2.77 0 40.923 40.923 0 0 0 1.563-1.605l1.985 1.985a.623.623 0 0 0 .884 0 .628.628 0 0 0 0-.885L1.067 2.183zM8.514 14.54a.745.745 0 0 1-.213.145l-.602 0a.745.745 0 0 1-.213-.145C4.207 11.359 2.25 8.497 2.25 6.884c0-.53.08-1.042.222-1.528l7.588 7.588a37.7 37.7 0 0 1-1.546 1.596z"/>
+  <path d="M8 1.25c3.171 0 5.75 2.528 5.75 5.634 0 .986-.739 2.443-2.057 4.151l.891.891C13.906 10.237 15 8.387 15 6.884 15 3.082 11.866 0 8 0 5.97 0 4.148.855 2.87 2.212l.885.885A5.784 5.784 0 0 1 8 1.25z"/>
+  <path d="M6.608 5.951c.32-.423.822-.701 1.392-.701.965 0 1.75.785 1.75 1.75 0 .57-.278 1.072-.701 1.392l.884.884A2.977 2.977 0 0 0 11 7a3 3 0 0 0-3-3 2.98 2.98 0 0 0-2.276 1.066l.884.885z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/geo.svg b/browser/themes/shared/notification-icons/geo.svg
new file mode 100644
index 0000000000..fcfd085dcd
--- /dev/null
+++ b/browser/themes/shared/notification-icons/geo.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8 1.25c3.171 0 5.75 2.528 5.75 5.634 0 1.613-1.957 4.475-5.236 7.656a.745.745 0 0 1-.213.145l-.602 0a.745.745 0 0 1-.213-.145C4.207 11.359 2.25 8.497 2.25 6.884 2.25 3.778 4.829 1.25 8 1.25M8 0C4.134 0 1 3.082 1 6.884c0 2.717 3.575 6.574 5.615 8.553a1.985 1.985 0 0 0 2.77 0C11.425 13.458 15 9.602 15 6.884 15 3.082 11.866 0 8 0z"/>
+  <path d="M8 5.25c.965 0 1.75.785 1.75 1.75S8.965 8.75 8 8.75 6.25 7.965 6.25 7 7.035 5.25 8 5.25M8 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/microphone-blocked.svg b/browser/themes/shared/notification-icons/microphone-blocked.svg
new file mode 100644
index 0000000000..1f299eb9d6
--- /dev/null
+++ b/browser/themes/shared/notification-icons/microphone-blocked.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M15.817 14.933 1.067.183a.626.626 0 0 0-.885.885l5.861 5.861a2.494 2.494 0 0 0 2.029 2.029l1.176 1.176a3.181 3.181 0 0 1-.748.099 3.24 3.24 0 0 1-3.206-2.71.63.63 0 0 0-.72-.513.625.625 0 0 0-.513.72 4.468 4.468 0 0 0 3.525 3.648l.289.24 0 2.133-1.75 0a.625.625 0 0 0 0 1.249l4.75 0a.625.625 0 0 0 0-1.25l-1.75 0 0-2.133.272-.237c.29-.058.567-.152.833-.264l4.702 4.702a.63.63 0 0 0 .885-.001.625.625 0 0 0 0-.884z"/>
+  <path d="M7.25 3.5c0-.689.561-1.25 1.25-1.25.689 0 1.25.561 1.25 1.25l0 3c0 .177-.039.344-.106.497l.916.916A2.48 2.48 0 0 0 11 6.5l0-3A2.5 2.5 0 0 0 8.5 1a2.493 2.493 0 0 0-2.486 2.366L7.25 4.602l0-1.102z"/>
+  <path d="M12.938 7.729a.625.625 0 0 0-.513-.72.62.62 0 0 0-.72.513 3.25 3.25 0 0 1-.413 1.123l.902.902a4.442 4.442 0 0 0 .744-1.818z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/microphone.svg b/browser/themes/shared/notification-icons/microphone.svg
new file mode 100644
index 0000000000..183793d25c
--- /dev/null
+++ b/browser/themes/shared/notification-icons/microphone.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m7.875 11.617 0 2.133-1.75 0a.625.625 0 0 0 0 1.25l4.75 0a.625.625 0 0 0 0-1.25l-1.75 0 0-2.133.272-.237a4.468 4.468 0 0 0 3.541-3.651.625.625 0 0 0-.513-.72.62.62 0 0 0-.72.513c-.263 1.57-1.611 2.71-3.206 2.71s-2.943-1.14-3.206-2.71a.63.63 0 0 0-.72-.513.625.625 0 0 0-.513.72 4.468 4.468 0 0 0 3.525 3.648l.29.24z"/>
+  <path d="M8.5 2.25c.689 0 1.25.561 1.25 1.25l0 3c0 .689-.561 1.25-1.25 1.25S7.25 7.189 7.25 6.5l0-3c0-.689.561-1.25 1.25-1.25M8.5 1A2.5 2.5 0 0 0 6 3.5l0 3a2.5 2.5 0 1 0 5 0l0-3A2.5 2.5 0 0 0 8.5 1z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/midi.svg b/browser/themes/shared/notification-icons/midi.svg
new file mode 100644
index 0000000000..34e6ef569e
--- /dev/null
+++ b/browser/themes/shared/notification-icons/midi.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M15.987 3a2 2 0 0 0-2-2l-7 0a2 2 0 0 0-2 2l0 5.911a3.182 3.182 0 0 0-1.849-.048A3.1 3.1 0 0 0 .97 11.044a3.147 3.147 0 0 0 .542 2.74A3.107 3.107 0 0 0 3.987 15c.542 0 1.078-.142 1.55-.41.432-.248.7-.71.7-1.205l0-7.385 8.513 0 0 2.911a3.182 3.182 0 0 0-1.849-.048 3.098 3.098 0 0 0-2.167 2.181 3.143 3.143 0 0 0 .542 2.74A3.102 3.102 0 0 0 13.75 15c.543 0 1.078-.142 1.549-.41.432-.248.701-.71.701-1.205L15.987 3zm-11 10.385a.14.14 0 0 1-.071.12c-.788.449-1.855.237-2.415-.485a1.878 1.878 0 0 1-.322-1.659 1.836 1.836 0 0 1 1.807-1.359c.357 0 .701.098 1 .287l0 3.096zm9.763 0a.14.14 0 0 1-.072.12c-.786.449-1.855.237-2.414-.485a1.879 1.879 0 0 1-.322-1.66 1.834 1.834 0 0 1 1.28-1.289c.176-.047.353-.069.526-.069.357 0 .701.098 1 .287l0 3.096zm-.013-8.635-8.5 0 0-1.9.6-.6 7.3 0 .6.6 0 1.9z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/minimize.svg b/browser/themes/shared/notification-icons/minimize.svg
new file mode 100644
index 0000000000..9a5144ddf5
--- /dev/null
+++ b/browser/themes/shared/notification-icons/minimize.svg
@@ -0,0 +1,4 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M3 12h10v2H3z"/></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/notification-icons/persistent-storage-blocked.svg b/browser/themes/shared/notification-icons/persistent-storage-blocked.svg
new file mode 100644
index 0000000000..bd804c6976
--- /dev/null
+++ b/browser/themes/shared/notification-icons/persistent-storage-blocked.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m4 7-.75 0-.25.25L3 8l.25.25.75 0L4.25 8l0-.75z"/>
+  <path d="M1.567.183a.626.626 0 0 0-.885.885L2.615 3 2 3a2 2 0 0 0-2 2l0 5a2 2 0 0 0 2 2l9.615 0 2.818 2.818a.623.623 0 0 0 .884-.001.628.628 0 0 0 0-.885L1.567.183zM1.85 10.75l-.6-.6 0-5.3.6-.6 2.015 0 6.5 6.5-8.515 0z"/>
+  <path d="M14 3 6.157 3l1.25 1.25 6.743 0 .6.6 0 5.3-.6.6-.243 0 1.015 1.015A1.992 1.992 0 0 0 16 10l0-5a2 2 0 0 0-2-2z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/persistent-storage.svg b/browser/themes/shared/notification-icons/persistent-storage.svg
new file mode 100644
index 0000000000..dd80c09cf8
--- /dev/null
+++ b/browser/themes/shared/notification-icons/persistent-storage.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M2 3a2 2 0 0 0-2 2l0 5a2 2 0 0 0 2 2l12 0a2 2 0 0 0 2-2l0-5a2 2 0 0 0-2-2L2 3zm12.75 7.15-.6.6-12.3 0-.6-.6 0-5.3.6-.6 12.3 0 .6.6 0 5.3z"/>
+  <path d="m4 7-.75 0-.25.25L3 8l.25.25.75 0L4.25 8l0-.75z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/plugin-badge.svg b/browser/themes/shared/notification-icons/plugin-badge.svg
new file mode 100644
index 0000000000..1646dac7e1
--- /dev/null
+++ b/browser/themes/shared/notification-icons/plugin-badge.svg
@@ -0,0 +1,7 @@
+<!-- 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 fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <circle fill="#3088d4" cx="27" cy="5" r="5"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/popup.svg b/browser/themes/shared/notification-icons/popup.svg
new file mode 100644
index 0000000000..093fa952da
--- /dev/null
+++ b/browser/themes/shared/notification-icons/popup.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m6.013 11.75-4.163 0-.6-.6 0-5.9 11.5 0 0 .898c.439.102.858.257 1.25.457L14 2a2 2 0 0 0-2-2L2 0a2 2 0 0 0-2 2l0 9a2 2 0 0 0 2 2l4.212 0c-.113-.4-.18-.818-.199-1.25zM1.25 1.85l.6-.6 10.3 0 .6.6 0 2.15-11.5 0 0-2.15z"/>
+  <path d="M11.5 7a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 1.25c.671 0 1.294.204 1.812.554l-4.508 4.508A3.234 3.234 0 0 1 8.25 11.5a3.254 3.254 0 0 1 3.25-3.25zm0 6.5a3.224 3.224 0 0 1-1.812-.554l4.508-4.508c.349.518.554 1.142.554 1.812a3.254 3.254 0 0 1-3.25 3.25z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/screen-blocked.svg b/browser/themes/shared/notification-icons/screen-blocked.svg
new file mode 100644
index 0000000000..a9fd846e51
--- /dev/null
+++ b/browser/themes/shared/notification-icons/screen-blocked.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m13.15 3.25.6.6 0 5.991 1.25 1.25L15 4a2 2 0 0 0-2-2L5.909 2l1.25 1.25 5.991 0z"/>
+  <path d="M15.817 13.683 2.317.183a.625.625 0 1 0-.884.885L2.365 2 2 2a2 2 0 0 0-2 2l0 8.25a2 2 0 0 0 2 2l11 0c.455 0 .871-.154 1.205-.41l.728.728a.623.623 0 0 0 .884 0 .626.626 0 0 0 0-.885zM13.15 13l-11.3 0-.6-.6 0-8.55.6-.6 1.765 0L6.05 5.685 4.589 7.146A.5.5 0 0 0 4.943 8l2.056 0L7 11.375a.625.625 0 0 0 1.25 0L8.25 8l.115 0 4.892 4.892-.107.108z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/screen.svg b/browser/themes/shared/notification-icons/screen.svg
new file mode 100644
index 0000000000..bccfda43c7
--- /dev/null
+++ b/browser/themes/shared/notification-icons/screen.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m1 4 0 8.25a2 2 0 0 0 2 2l11 0a2 2 0 0 0 2-2L16 4a2 2 0 0 0-2-2L3 2a2 2 0 0 0-2 2zm13.75-.15 0 8.55-.6.6-11.3 0-.6-.6 0-8.55.6-.6 11.3 0 .6.6z"/>
+  <path d="M9.25 11.375a.625.625 0 0 1-1.25 0L7.999 8 5.943 8a.5.5 0 0 1-.354-.854l2.823-2.823.424 0 2.823 2.823a.5.5 0 0 1-.352.854L9.25 8l0 3.375z"/>
+</svg>
diff --git a/browser/themes/shared/notification-icons/xr-blocked.svg b/browser/themes/shared/notification-icons/xr-blocked.svg
new file mode 100644
index 0000000000..a023bb46d2
--- /dev/null
+++ b/browser/themes/shared/notification-icons/xr-blocked.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">

+  <path d="m7.658 7 4.717 0a.625.625 0 0 0 0-1.25l-5.967 0L7.658 7z"/>

+  <path d="m11.885 13 .004 0L.567 1.683a.626.626 0 0 0-.885.885l.97.97A1.973 1.973 0 0 0 0 5l0 6a2 2 0 0 0 2 2l2.93 0c.669 0 1.293-.334 1.664-.891l.574-.861a.976.976 0 0 1 .766-.429l3.499 3.499a.623.623 0 0 0 .884 0 .628.628 0 0 0 0-.885L11.885 13zm-5.757-2.445-.574.861a.75.75 0 0 1-.624.334l-3.08 0-.6-.6 0-6.3.289-.427L6.936 9.82c-.321.172-.6.422-.808.735z"/>

+  <path d="M14 3 3.658 3l1.25 1.25 9.242 0 .6.6 0 6.3-.6.6-1.742 0 1.25 1.25.342 0a2 2 0 0 0 2-2l0-6a2 2 0 0 0-2-2z"/>

+</svg>

diff --git a/browser/themes/shared/notification-icons/xr.svg b/browser/themes/shared/notification-icons/xr.svg
new file mode 100644
index 0000000000..d9a870902f
--- /dev/null
+++ b/browser/themes/shared/notification-icons/xr.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">

+  <path d="m14.15 4.25.6.6 0 6.3-.6.6-3.08 0a.749.749 0 0 1-.624-.334l-.574-.861C9.454 9.928 8.754 9.553 8 9.553s-1.454.375-1.872 1.002l-.574.861a.75.75 0 0 1-.624.334l-2.93 0-.75-.75 0-6.15.6-.6 12.3 0zM14 3 2 3a2 2 0 0 0-2 2l0 6a2 2 0 0 0 2 2l2.93 0c.669 0 1.293-.334 1.664-.891l.574-.861c.198-.297.515-.445.832-.445s.634.148.832.445l.574.861A2 2 0 0 0 11.07 13L14 13a2 2 0 0 0 2-2l0-6a2 2 0 0 0-2-2z"/>

+  <path d="m12.375 7-8.75 0a.625.625 0 0 1 0-1.25l8.75 0a.625.625 0 0 1 0 1.25z"/>

+</svg>

diff --git a/browser/themes/shared/panic-panel/header.png b/browser/themes/shared/panic-panel/header.png
new file mode 100644
index 0000000000..1646804e43
--- /dev/null
+++ b/browser/themes/shared/panic-panel/header.png
diff --git a/browser/themes/shared/panic-panel/header@2x.png b/browser/themes/shared/panic-panel/header@2x.png
new file mode 100644
index 0000000000..dd1d07087e
--- /dev/null
+++ b/browser/themes/shared/panic-panel/header@2x.png
diff --git a/browser/themes/shared/panic-panel/icons.png b/browser/themes/shared/panic-panel/icons.png
new file mode 100644
index 0000000000..436ce8e7d6
--- /dev/null
+++ b/browser/themes/shared/panic-panel/icons.png
diff --git a/browser/themes/shared/panic-panel/icons@2x.png b/browser/themes/shared/panic-panel/icons@2x.png
new file mode 100644
index 0000000000..99b33184dd
--- /dev/null
+++ b/browser/themes/shared/panic-panel/icons@2x.png
diff --git a/browser/themes/shared/places/bookmarksMenu.svg b/browser/themes/shared/places/bookmarksMenu.svg
new file mode 100644
index 0000000000..97154aadb6
--- /dev/null
+++ b/browser/themes/shared/places/bookmarksMenu.svg
@@ -0,0 +1,9 @@
+<!-- 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="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path fill-opacity=".05" d="M15,2H1v12c0,0.6,0.5,1,1,1h12c0.6,0,1-0.4,1-1V2L15,2z"/>
+  <path d="M3,5v1h2V5H3z M3,9h2V8H3V9z M3,12h2v-1H3V12z"/>
+  <path fill-opacity=".9" d="M6,5v1h7V5H6z M12,8H6v1h6V8z M6,12h7v-1H6V12z"/>
+  <path d="M7,2V1H1v1v1v11c0,0.5,0.5,1,1,1h12c0.5,0,1-0.5,1-1V2H7z M13.5,14h-11C2.2,14,2,13.8,2,13.5V3h12v10.5 C14,13.8,13.8,14,13.5,14z"/>
+</svg>
diff --git a/browser/themes/shared/places/bookmarksToolbar.svg b/browser/themes/shared/places/bookmarksToolbar.svg
new file mode 100644
index 0000000000..2b031295be
--- /dev/null
+++ b/browser/themes/shared/places/bookmarksToolbar.svg
@@ -0,0 +1,8 @@
+<!-- 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="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path fill-opacity=".15" d="M15,14H1c-0.6,0-1-0.4-1-1V3c0-0.5,0.4-1,1-1h14c0.6,0,1,0.5,1,1v10C16,13.6,15.6,14,15,14z"/>
+  <path d="M8.4,4.2l1,2.1l2.3,0.3c0.3,0,0.5,0.4,0.2,0.7l-1.7,1.7l0.4,2.4c0.1,0.3-0.3,0.6-0.6,0.4L8,10.8L6,12 c-0.3,0.1-0.6-0.1-0.6-0.4l0.4-2.4L4.1,7.4C3.9,7.2,4,6.8,4.3,6.7l2.3-0.3l1-2.1C7.8,3.9,8.2,3.9,8.4,4.2z"/>
+  <path d="M15,2H1C0.5,2,0,2.5,0,3v10c0,0.5,0.5,1,1,1h14c0.5,0,1-0.5,1-1V3C16,2.5,15.5,2,15,2z M15,12.5 c0,0.3-0.2,0.5-0.5,0.5h-13C1.2,13,1,12.8,1,12.5v-9C1,3.2,1.2,3,1.5,3h13C14.8,3,15,3.2,15,3.5V12.5z"/>
+</svg>
diff --git a/browser/themes/shared/places/editBookmark.css b/browser/themes/shared/places/editBookmark.css
new file mode 100644
index 0000000000..54cd75548a
--- /dev/null
+++ b/browser/themes/shared/places/editBookmark.css
@@ -0,0 +1,161 @@
+/* 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/. */
+
+#editBookmarkPanelContent {
+  display: grid;
+  grid-template-columns: auto;
+}
+
+#editBMPanel_folderTree,
+#editBMPanel_tagsSelector {
+  height: 12.5em;
+}
+
+#editBMPanel_folderMenuList::part(icon) {
+  width: 16px;
+  height: 16px;
+}
+
+@media (-moz-platform: macos) {
+  /* FIXME(emilio): Is this rule needed at all? */
+  .folder-icon > .menu-iconic-left > .menu-iconic-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.folder-icon > .menu-iconic-left {
+  display: -moz-box;
+}
+
+.folder-icon {
+  list-style-image: url("chrome://global/skin/icons/folder.svg") !important;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#editBMPanel_folderTree {
+  margin-block: 2px;
+}
+
+@media (-moz-platform: macos) {
+  #editBMPanel_folderTree {
+    margin: 6px 4px 0;
+  }
+}
+
+#editBMPanel_tagsSelector > richlistitem > image {
+  appearance: auto;
+  -moz-default-appearance: checkbox;
+  -moz-box-align: center;
+  margin: 0 2px;
+  min-width: 13px;
+  min-height: 13px;
+}
+
+@media (-moz-platform: windows) {
+  #editBMPanel_tagsSelector > richlistitem > image {
+    border: 1px solid -moz-DialogText;
+    background: Field no-repeat 50% 50%;
+  }
+}
+
+#bookmarkpropertiesdialog #editBMPanel_tagsSelector {
+  border-color: var(--in-content-border-color);
+  padding: 12px;
+}
+
+/* Reset default margins for tags so we can apply custom ones */
+#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > image,
+#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > label {
+  margin: 0;
+}
+
+/* Set spacing between tags */
+#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > image {
+  margin-inline-end: 8px;
+}
+
+/* Bookmark panel dropdown icons */
+
+#editBMPanel_folderMenuList[selectedGuid="toolbar_____"],
+#editBMPanel_toolbarFolderItem {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
+}
+
+#editBMPanel_folderMenuList[selectedGuid="menu________"],
+#editBMPanel_bmRootItem {
+  list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent > label:not(.editBMPanel_nameRow),
+#bookmarkpropertiesdialog #editBookmarkPanelContent > #editBMPanel_folderTreeRow,
+#bookmarkpropertiesdialog #editBookmarkPanelContent > #editBMPanel_tagsSelectorRow {
+  padding-block: var(--editbookmarkdialog-padding) 0;
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent label[control] {
+  margin-inline-start: 0;
+  margin-block: 0 4px;
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent {
+  padding: calc(var(--editbookmarkdialog-padding) / 2) var(--editbookmarkdialog-padding) var(--editbookmarkdialog-padding);
+}
+
+#bookmarkpropertiesdialog .expander-up,
+#bookmarkpropertiesdialog .expander-down {
+  appearance: none;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin: 0;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 0;
+}
+
+#bookmarkpropertiesdialog .expander-up {
+  list-style-image: url("chrome://global/skin/icons/arrow-up.svg");
+}
+
+#bookmarkpropertiesdialog .expander-down {
+  list-style-image: url("chrome://global/skin/icons/arrow-down.svg");
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent > input,
+#bookmarkpropertiesdialog #editBookmarkPanelContent > hbox > input,
+#bookmarkpropertiesdialog #editBMPanel_folderMenuList {
+  margin: 0;
+}
+
+/* dialog-specific #editBookmarkPanel styles */
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent {
+  padding-inline: 0;
+  margin-inline: 4px;
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent,
+#bookmarkpropertiesdialog vbox#editBMPanel_nameRow {
+  padding-top: 0;
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent #editBMPanel_tagsField,
+#bookmarkpropertiesdialog #editBookmarkPanelContent #editBMPanel_folderMenuList {
+  margin-inline-end: 16px;
+}
+
+#bookmarkpropertiesdialog .caption-label {
+  margin: 4px;
+  color: var(--in-content-deemphasized-text);
+}
+
+.caption-label {
+  font-size: 0.9em;
+  margin: 2px 4px;
+}
diff --git a/browser/themes/shared/places/editBookmarkPanel.css b/browser/themes/shared/places/editBookmarkPanel.css
new file mode 100644
index 0000000000..1250f1e1c1
--- /dev/null
+++ b/browser/themes/shared/places/editBookmarkPanel.css
@@ -0,0 +1,218 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/**
+ * Our OS integration code toggles whether system colors should return light or
+ * dark values based on the luminosity of the toolbar background. Because themes
+ * can style panels to have a different background color than the toolbar, we
+ * need specific overrides for system colors used in light or dark themes.
+ */
+#editBookmarkPanel:-moz-lwtheme {
+  color-scheme: light;
+}
+
+:root[lwt-popup-brighttext] #editBookmarkPanel {
+  color-scheme: dark;
+}
+
+#editBookmarkPanel > .panel-subview-body {
+  padding-bottom: 0;
+}
+
+html|div#editBookmarkPanelFaviconContainer {
+  display: flex;
+}
+
+#editBookmarkPanelInfoArea {
+  overflow: hidden;
+  padding: 4px var(--arrowpanel-padding) 0;
+}
+
+html|img#editBookmarkPanelFavicon[src] {
+  box-sizing: content-box;
+  width: 32px;
+  height: 32px;
+  padding: 5px;
+  background-color: #F9F9FA;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
+  border-radius: 6px;
+  margin-top: 10px;
+  margin-inline-start: 10px;
+  margin-bottom: -52px; /* margin-top + paddings + height */
+}
+
+#editBookmarkPanelImage {
+  border-radius: 4px;
+  height: 150px;
+  background-image: -moz-element(#editBookmarkPanelImageCanvas);
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0;
+}
+
+#editBookmarkPanelContent,
+#editBookmarkPanelBottomContent {
+  padding: var(--arrowpanel-padding);
+}
+
+#editBookmarkPanelContent {
+  padding-bottom: 0;
+}
+
+/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
+#editBMPanel_folderTree {
+  min-width: 27em;
+}
+
+#editBMPanel_newFolderButton {
+  appearance: none;
+  border: 0;
+  border-radius: 4px;
+  background-color: var(--button-bgcolor);
+  color: var(--button-color, inherit);
+  font-weight: 600;
+  min-width: 0;
+  padding: 8px 16px;
+
+  /* This button is deeper in the visual hierarchy than others (notably the
+     buttons at the bottom of the panel), so it should be slightly smaller. */
+  font-size: 90%;
+
+  /* This button needs to align with the tree above it. */
+  margin-inline-start: 4px;
+}
+
+#editBMPanel_newFolderButton:hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+#editBMPanel_newFolderButton:hover:active {
+  background-color: var(--button-active-bgcolor);
+}
+
+#editBookmarkPanel > #editBookmarkHeaderSeparator,
+#editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator {
+  margin-bottom: 0;
+  margin-inline: 16px;
+}
+
+#editBookmarkPanel {
+  font: caption;
+}
+
+#editBookmarkPanelContent > label:not(.editBMPanel_nameRow),
+#editBookmarkPanelContent > #editBMPanel_folderTreeRow,
+#editBookmarkPanelContent > #editBMPanel_tagsSelectorRow {
+  padding-block: var(--arrowpanel-padding) 0;
+}
+
+#editBookmarkPanelContent label[control] {
+  margin-inline-start: 0;
+  margin-block: 0 4px;
+}
+
+#editBookmarkPanel .caption-label {
+  display: none;
+}
+
+#editBookmarkPanelContent {
+  padding: 0.8em var(--arrowpanel-padding) var(--arrowpanel-padding);
+}
+
+#editBMPanel_selectionCount {
+  padding-top: 0.8em;
+}
+
+#editBookmarkPanelBottomContent {
+  padding: 0 var(--arrowpanel-padding) calc(var(--arrowpanel-padding) / 2);
+}
+
+#editBookmarkPanelBottomContent > checkbox {
+  margin-inline-start: 0;
+}
+
+#editBookmarkPanel_showForNewBookmarks > .checkbox-label-box > .checkbox-label {
+  opacity: 0.7;
+}
+
+#editBookmarkPanelBottomButtons > button {
+  margin-top: 0;
+}
+
+#editBookmarkPanel .expander-up > .button-box > .button-text,
+#editBookmarkPanel .expander-down > .button-box > .button-text {
+  display: none;
+}
+
+#editBookmarkPanel .expander-up,
+#editBookmarkPanel .expander-down {
+  appearance: none; /* override button.css */
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin: 0;
+  margin-inline-start: 4px;
+  min-width: 32px;
+  min-height: 32px;
+  color: var(--button-color);
+  background-color: var(--button-bgcolor);
+  border-radius: 4px;
+}
+
+#editBookmarkPanel .expander-up:hover,
+#editBookmarkPanel .expander-down:hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+#editBookmarkPanel .expander-up:hover:active,
+#editBookmarkPanel .expander-down:hover:active {
+  /**
+   * We override the colour here because on macOS, buttons default to
+   * having :hover:active buttons have color -moz-buttonactivetext
+   */
+  color: var(--button-color);
+  background-color: var(--button-active-bgcolor);
+}
+
+#editBookmarkPanel .expander-up {
+  list-style-image: url("chrome://global/skin/icons/arrow-up.svg");
+}
+
+#editBookmarkPanel .expander-down {
+  list-style-image: url("chrome://global/skin/icons/arrow-down.svg");
+}
+
+#editBMPanel_folderMenuList {
+  margin: 0;
+}
+
+#editBookmarkPanelContent > html|input,
+#editBookmarkPanelContent > hbox > html|input {
+  appearance: none;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--input-border-color, ThreeDShadow);
+  background-color: var(--input-bgcolor, Field);
+  color: var(--input-color, FieldText);
+  margin: 0;
+}
+
+/* Focus outlines */
+
+#editBookmarkPanel .expander-up:focus-visible,
+#editBookmarkPanel .expander-down:focus-visible,
+#editBMPanel_newFolderButton:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+#editBMPanel_folderTree:focus-visible,
+#editBMPanel_tagsSelector:focus-visible,
+#editBookmarkPanelContent > html|input:focus-visible,
+#editBookmarkPanelContent > hbox > html|input:focus-visible {
+  border-color: transparent;
+  outline: var(--focus-outline);
+  outline-offset: -1px;
+}
diff --git a/browser/themes/shared/places/folder-smart.svg b/browser/themes/shared/places/folder-smart.svg
new file mode 100644
index 0000000000..c38c606efc
--- /dev/null
+++ b/browser/themes/shared/places/folder-smart.svg
@@ -0,0 +1,6 @@
+<!-- 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="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path  d="M14,7H12.9a4.967,4.967,0,0,0-.732-1.753l.782-.783A1,1,0,1,0,11.535,3.05l-.782.783A4.968,4.968,0,0,0,9,3.1V2A1,1,0,0,0,7,2V3.1a4.968,4.968,0,0,0-1.753.732L4.464,3.05A1,1,0,0,0,3.05,4.464l.783.783A4.968,4.968,0,0,0,3.1,7H2A1,1,0,0,0,2,9H3.1a4.968,4.968,0,0,0,.732,1.753l-.783.782a1,1,0,1,0,1.414,1.414l.783-.782A4.967,4.967,0,0,0,7,12.9V14a1,1,0,0,0,2,0V12.9a4.968,4.968,0,0,0,1.753-.732l.782.782a1,1,0,0,0,1.414-1.414l-.782-.782A4.968,4.968,0,0,0,12.9,9H14a1,1,0,0,0,0-2ZM8,11a3,3,0,1,1,3-3A3,3,0,0,1,8,11Z"/>
+</svg>
diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css
new file mode 100644
index 0000000000..c4c7db5701
--- /dev/null
+++ b/browser/themes/shared/places/sidebar.css
@@ -0,0 +1,216 @@
+/* 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/. */
+
+.sidebar-panel {
+  appearance: none;
+  background-color: transparent;
+}
+
+/* Themed sidebars */
+
+.sidebar-panel[lwt-sidebar] {
+  background-color: var(--lwt-sidebar-background-color);
+  color: var(--lwt-sidebar-text-color);
+  scrollbar-color: rgba(204,204,204,.5) rgba(230,230,235,.5);
+  color-scheme: light;
+}
+
+.sidebar-panel[lwt-sidebar-brighttext] {
+  scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
+  color-scheme: dark;
+}
+
+.sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren::-moz-tree-row(selected) {
+  background-color: hsla(0,0%,80%,.3);
+}
+
+.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-row(selected) {
+  background-color: rgba(249,249,250,.1);
+}
+
+.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-image(selected),
+.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-twisty(selected),
+.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-cell-text(selected) {
+  color: var(--lwt-sidebar-text-color);
+}
+
+.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-row(selected,focus) {
+  background-color: var(--lwt-sidebar-highlight-background-color);
+}
+
+.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-image(selected, focus),
+.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-twisty(selected, focus),
+.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-cell-text(selected, focus) {
+  color: var(--lwt-sidebar-highlight-text-color, var(--lwt-sidebar-text-color, var(--sidebar-text-color)));
+}
+
+/* Sidebar tree */
+
+.sidebar-placesTree {
+  appearance: none;
+  background-color: transparent;
+  color: inherit;
+  border: 0;
+  margin: 0;
+}
+
+/* View button */
+
+#viewButton {
+  appearance: none;
+  border-radius: 4px;
+  padding: 2px 4px;
+  color: inherit;
+}
+
+#viewButton:hover {
+  /* Matches --toolbarbutton-hover-background: */
+  background-color: color-mix(in srgb, currentColor 17%, transparent);
+}
+
+#viewButton[open] {
+  /* Matches --toolbarbutton-active-background: */
+  background-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+#viewButton:focus-visible {
+  outline: var(--focus-outline);
+}
+
+#viewButton > .button-box > .button-menu-dropmarker {
+  appearance: none !important;
+  display: -moz-box;
+  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  width: 12px;
+  height: 12px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+@media (-moz-platform: windows) {
+  :root[uidensity=touch] #search-box,
+  :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+    min-height: 32px;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell,
+  .sidebar-placesTreechildren::-moz-tree-twisty {
+    padding: 0 4px;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
+  .sidebar-placesTreechildren::-moz-tree-image(leaf) {
+    cursor: pointer;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell(separator) {
+    cursor: default;
+  }
+
+  @media (-moz-windows-default-theme) {
+    .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
+      text-decoration: none;
+    }
+  }
+
+  /* Default button vert. margins are 1px/2px, and this can cause misalignment */
+  #viewButton {
+    margin: 0;
+    margin-inline-start: 4px;
+    border-radius: 2px;
+  }
+
+  #sidebar-search-container {
+    padding: 8px;
+  }
+
+  #search-box {
+    margin: 0;
+  }
+}
+
+@media (-moz-platform: linux) {
+  #sidebar-search-container {
+    padding: 8px;
+  }
+
+  #search-box {
+    margin: 0;
+  }
+
+  #viewButton {
+    margin: 1px 0;
+    margin-inline-start: 4px;
+  }
+
+  :root[uidensity=touch] #search-box,
+  :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+    min-height: 32px;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
+  .sidebar-placesTreechildren::-moz-tree-image(leaf) {
+    cursor: pointer;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell(separator) {
+    cursor: default;
+  }
+}
+
+@media (-moz-platform: macos) {
+  .sidebar-placesTree {
+    margin: 0;
+    /* Default font size is 11px on mac, so this is 12px */
+    font-size: 1.0909rem;
+  }
+
+  :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+    min-height: 32px;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-separator {
+    border-top: 1px solid #505d6d;
+    margin: 0 10px;
+  }
+
+  .sidebar-panel:not([lwt-sidebar]) .sidebar-placesTreechildren::-moz-tree-row(selected,blur) {
+    appearance: auto;
+    -moz-default-appearance: -moz-mac-source-list-selection;
+    -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
+  }
+
+  .sidebar-panel:not([lwt-sidebar-highlight]) .sidebar-placesTreechildren::-moz-tree-row(selected,focus) {
+    appearance: auto;
+    -moz-default-appearance: -moz-mac-active-source-list-selection;
+    -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell-text {
+    margin-inline-end: 6px;
+  }
+
+  #sidebar-search-container {
+    /* Native searchbar styling already adds 4px margin on Mac, so
+     * adding 4px padding results in 8px of total whitespace. */
+    padding: 4px;
+  }
+
+  #viewButton {
+    margin: 4px 0;
+    margin-inline-end: 4px;
+    /* Default font size is 11px on mac, so this is 12px */
+    font-size: 1.0909rem;
+  }
+}
diff --git a/browser/themes/shared/places/tag.svg b/browser/themes/shared/places/tag.svg
new file mode 100644
index 0000000000..3be1d0e1be
--- /dev/null
+++ b/browser/themes/shared/places/tag.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path fill-opacity=".1" d="M1 1h6l8 8-6 6-8-8V1zm3 5a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
+  <path d="M1 1v6l8 8 6-6-8-8H1zm0-1h6a1 1 0 0 1 .707.293l8 8a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-8-8A1 1 0 0 1 0 7V1a1 1 0 0 1 1-1zm3 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
+  <path fill-opacity=".4" d="M8.146 6.854a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1-.708.708l-3-3zm-2 2a.5.5 0 1 1 .708-.708l2 2a.5.5 0 0 1-.708.708l-2-2z"/>
+</svg>
diff --git a/browser/themes/shared/places/tree-icons.css b/browser/themes/shared/places/tree-icons.css
new file mode 100644
index 0000000000..38df3ea4d1
--- /dev/null
+++ b/browser/themes/shared/places/tree-icons.css
@@ -0,0 +1,95 @@
+/* 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/. */
+
+treechildren::-moz-tree-image {
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0.7;
+}
+
+treechildren::-moz-tree-image(title) {
+  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+  padding-inline-end: 2px;
+  margin: 0 2px;
+  width: 16px;
+  height: 16px;
+}
+
+treechildren::-moz-tree-image(title, container),
+treechildren::-moz-tree-image(title, open) {
+  list-style-image: url("chrome://global/skin/icons/folder.svg");
+}
+
+treechildren::-moz-tree-image(title, separator) {
+  list-style-image: none;
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0;
+}
+
+treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg");
+}
+
+treechildren::-moz-tree-image(container, queryFolder_menu________) {
+  list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg");
+}
+
+/* query-nodes should be styled even if they're not expandable */
+treechildren::-moz-tree-image(query) {
+  list-style-image: url("chrome://browser/skin/places/folder-smart.svg");
+}
+
+treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+
+treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
+  list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
+}
+
+treechildren::-moz-tree-image(title, query, tagContainer),
+treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
+  list-style-image: url("chrome://browser/skin/places/tag.svg");
+}
+
+/* calendar icon for folders grouping items by date */
+treechildren::-moz-tree-image(title, query, dayContainer) {
+  list-style-image: url("chrome://browser/skin/history.svg");
+}
+
+treechildren::-moz-tree-image(title, query, hostContainer) {
+  list-style-image: url("chrome://global/skin/icons/folder.svg");
+}
+
+treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
+  list-style-image: url("chrome://browser/skin/history.svg");
+}
+
+/* We want some queries to look like ordinary folders. This must come
+   after the (title, query) selector, or it would get overridden. */
+treechildren::-moz-tree-image(title, query, folder) {
+  list-style-image: url("chrome://global/skin/icons/folder.svg");
+}
+
+treechildren::-moz-tree-cell-text(title, separator) {
+  color: ThreeDShadow;
+  margin: 0 5px;
+}
+
+treechildren::-moz-tree-cell-text(title, separator, selected, focus) {
+  color: SelectedItemText;
+}
+
+/* Remove tiny spacing in separators appearing after the twisty column */
+treechildren::-moz-tree-twisty(title, separator) {
+  padding: 0;
+}
+
+treechildren::-moz-tree-image(cutting) {
+  opacity: 0.5;
+}
+
+treechildren::-moz-tree-cell-text(cutting) {
+  opacity: 0.7;
+}
diff --git a/browser/themes/shared/preferences/android-menu.svg b/browser/themes/shared/preferences/android-menu.svg
new file mode 100644
index 0000000000..1084f264a8
--- /dev/null
+++ b/browser/themes/shared/preferences/android-menu.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="context-fill" d="M14 6a2 2 0 11-4.001-.001A2 2 0 0114 6zm0 6a2 2 0 11-4.001-.001A2 2 0 0114 12zm-2 8a2 2 0 10-.001-4.001A2 2 0 0012 20z"/>
+</svg>
diff --git a/browser/themes/shared/preferences/category-general.svg b/browser/themes/shared/preferences/category-general.svg
new file mode 100644
index 0000000000..952164e863
--- /dev/null
+++ b/browser/themes/shared/preferences/category-general.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m10.791 20-1.574 0a2.009 2.009 0 0 1-1.922-1.448l-.51-1.777a7.641 7.641 0 0 1-1.037-.604l-1.801.448a2.01 2.01 0 0 1-2.215-.94l-.787-1.364a2.012 2.012 0 0 1 .281-2.377l1.299-1.37A6.652 6.652 0 0 1 2.528 9.4L1.241 8.067a2.008 2.008 0 0 1-.293-2.389l.787-1.363a2.009 2.009 0 0 1 2.199-.945l1.84.442c.326-.225.664-.42 1.01-.586l.51-1.777A2.011 2.011 0 0 1 9.217 0l1.574 0c.879 0 1.668.589 1.918 1.432l.535 1.805c.334.162.663.354.981.574l1.84-.442a2.02 2.02 0 0 1 2.199.945l.787 1.363c.444.768.323 1.75-.293 2.389L17.472 9.4a6.606 6.606 0 0 1 .003 1.168l1.299 1.37a2.01 2.01 0 0 1 .281 2.376l-.787 1.363a2.005 2.005 0 0 1-2.215.94l-1.801-.448a7.558 7.558 0 0 1-1.009.593l-.535 1.805A2.01 2.01 0 0 1 10.791 20zm-5.066-5.37.637.132c.423.323.872.585 1.336.778l.432.485.606 2.112a.503.503 0 0 0 .481.362l1.574 0c.22 0 .417-.147.479-.358l.632-2.134.428-.478c.45-.19.89-.448 1.307-.768l.637-.132 2.141.533a.504.504 0 0 0 .554-.236l.787-1.363a.503.503 0 0 0-.07-.594l-1.537-1.621-.201-.608c.031-.241.052-.488.052-.74a5.94 5.94 0 0 0-.056-.771l.204-.617 1.531-1.587a.5.5 0 0 0 .073-.596l-.787-1.364a.503.503 0 0 0-.55-.236l-2.175.522-.627-.131a6.042 6.042 0 0 0-1.283-.75l-.427-.478-.632-2.133a.503.503 0 0 0-.48-.359l-1.574 0a.503.503 0 0 0-.481.362L8.13 3.974l-.433.485a5.972 5.972 0 0 0-1.31.759l-.628.133-2.175-.522a.504.504 0 0 0-.55.236l-.787 1.363a.503.503 0 0 0 .073.597l1.531 1.587.204.617A6.123 6.123 0 0 0 4 10c0 .252.021.499.051.742l-.2.608-1.537 1.621a.503.503 0 0 0-.07.594l.787 1.363a.503.503 0 0 0 .554.235l2.14-.533z"/>
+  <path d="M10 13.5c-1.93 0-3.5-1.57-3.5-3.5S8.07 6.5 10 6.5s3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5zM10 8c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z"/>
+</svg>
diff --git a/browser/themes/shared/preferences/category-privacy-security.svg b/browser/themes/shared/preferences/category-privacy-security.svg
new file mode 100644
index 0000000000..deecf8702f
--- /dev/null
+++ b/browser/themes/shared/preferences/category-privacy-security.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M15.5 9 15 9l0-4A5 5 0 0 0 5 5l0 4-.5 0A2.5 2.5 0 0 0 2 11.5l0 6A2.5 2.5 0 0 0 4.5 20l11 0a2.5 2.5 0 0 0 2.5-2.5l0-6A2.5 2.5 0 0 0 15.5 9zm-9-4c0-1.93 1.57-3.5 3.5-3.5 1.93 0 3.5 1.57 3.5 3.5l0 4-7 0 0-4zm10 12.7-.8.8-11.4 0-.8-.8 0-6.4.8-.8 11.4 0 .8.8 0 6.4z"/>
+</svg>
diff --git a/browser/themes/shared/preferences/category-search.svg b/browser/themes/shared/preferences/category-search.svg
new file mode 100644
index 0000000000..942846b673
--- /dev/null
+++ b/browser/themes/shared/preferences/category-search.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M13.685 12.074A6.957 6.957 0 0 0 15 8c0-3.859-3.14-7-7-7S1 4.141 1 8s3.14 7 7 7a6.953 6.953 0 0 0 4.087-1.324l.524-.006 5.11 5.11a.748.748 0 0 0 1.06 0 .75.75 0 0 0 0-1.061l-5.106-5.107.01-.538zM8 13.5c-3.033 0-5.5-2.468-5.5-5.5S4.967 2.5 8 2.5s5.5 2.468 5.5 5.5-2.467 5.5-5.5 5.5z"/>
+</svg>
diff --git a/browser/themes/shared/preferences/category-sync.svg b/browser/themes/shared/preferences/category-sync.svg
new file mode 100644
index 0000000000..0af29ec1e1
--- /dev/null
+++ b/browser/themes/shared/preferences/category-sync.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m10 2.675 0-2.174a.5.5 0 0 0-.852-.355L6.295 2.97l0 .926 2.853 2.825A.5.5 0 0 0 10 6.366l0-2.191a5.823 5.823 0 0 1 4.434 9.602.75.75 0 0 0 1.141.974 7.327 7.327 0 0 0 1.749-4.75c.001-4.04-3.285-7.326-7.324-7.326z"/>
+  <path d="m10 13.634 0 2.191A5.831 5.831 0 0 1 4.175 10c0-1.372.486-2.704 1.369-3.751a.75.75 0 0 0-1.147-.967A7.328 7.328 0 0 0 2.675 10c0 4.039 3.286 7.325 7.325 7.325l0 2.174a.5.5 0 0 0 .852.355l2.853-2.825 0-.926-2.853-2.824a.5.5 0 0 0-.852.355z"/>
+</svg>
diff --git a/browser/themes/shared/preferences/containers-dialog.css b/browser/themes/shared/preferences/containers-dialog.css
new file mode 100644
index 0000000000..870c4141eb
--- /dev/null
+++ b/browser/themes/shared/preferences/containers-dialog.css
@@ -0,0 +1,50 @@
+/* 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/. */
+
+@import url("chrome://browser/content/usercontext/usercontext.css");
+
+#name {
+  -moz-box-flex: 1;
+}
+
+.radio-buttons {
+  -moz-box-orient: horizontal;
+  margin-inline-start: 0.35rem;
+}
+
+.radio-buttons > radio {
+  user-select: none;
+  outline: 2px solid transparent;
+  outline-offset: 4px;
+  min-block-size: 24px;
+  min-inline-size: 24px;
+  border-radius: 50%;
+  padding: 2px;
+  margin: 9px;
+}
+
+.icon-buttons > radio > .userContext-icon {
+  fill: var(--in-content-text-color);
+}
+
+.radio-buttons > radio {
+  padding-inline-start: 2px;
+}
+
+radio > .userContext-icon {
+  inline-size: 22px;
+  block-size: 22px;
+}
+
+.radio-buttons > radio[selected=true] {
+  outline-color: var(--in-content-text-color);
+}
+
+.radio-buttons > radio[focused=true] {
+  outline-color: var(--in-content-accent-color);
+}
+
+.radio-buttons > radio:hover:active {
+  outline-color: var(--in-content-accent-color-active);
+}
diff --git a/browser/themes/shared/preferences/containers.css b/browser/themes/shared/preferences/containers.css
new file mode 100644
index 0000000000..43081ce8a4
--- /dev/null
+++ b/browser/themes/shared/preferences/containers.css
@@ -0,0 +1,54 @@
+/* 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/. */
+
+@import url("chrome://browser/content/usercontext/usercontext.css");
+
+#category-containers {
+  display: none;
+}
+
+.container-header-links {
+  margin-block-end: 15px;
+}
+
+[data-identity-icon] {
+  margin: 0;
+  margin-inline-end: 16px;
+}
+
+#containersView {
+  border: 0;
+  background: transparent;
+  margin-block-end: 8px;
+}
+
+#containersView richlistitem {
+  padding-block: 4px;
+  border-block-end: 1px solid var(--in-content-border-color);
+}
+
+#containersView richlistitem > .container-buttons {
+  margin-inline-end: 4px;
+}
+
+/* Crop the label at the end using CSS. This isn't using XUL crop
+ * and a value attribute because those labels cannot be highlighted
+ * by the prefs' find-in-page feature.
+ */
+.userContext-label-inprefs {
+  display: -moz-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.userContext-icon-inprefs {
+  margin-inline: 4px 10px;
+  width: 24px;
+  height: 24px;
+}
+
+#containersView richlistitem:last-of-type {
+  border-block-end: 0;
+}
diff --git a/browser/themes/shared/preferences/dialog.css b/browser/themes/shared/preferences/dialog.css
new file mode 100644
index 0000000000..dcd7783cca
--- /dev/null
+++ b/browser/themes/shared/preferences/dialog.css
@@ -0,0 +1,42 @@
+/* - 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/. */
+
+window,
+dialog {
+  appearance: none;
+  background-color: var(--in-content-page-background);
+  color: var(--in-content-page-color);
+  margin: 0;
+  padding: 0;
+}
+
+/* Add some padding around the contents of the dialog */
+dialog {
+  padding: 6px;
+}
+
+.contentPane,
+dialog::part(content-box) {
+  -moz-box-flex: 1;
+  /* This allows the focus ring to display fully when scrolling is enabled. */
+  padding: 4px;
+}
+
+.contentPane.doScroll,
+dialog.doScroll::part(content-box) {
+  overflow-y: auto;
+  contain: size;
+}
+
+tree:not(#rejectsTree) {
+  height: 15em;
+}
+
+.actionButtons {
+  margin: 3px 0 0;
+}
+
+menulist label {
+  font-weight: unset;
+}
diff --git a/browser/themes/shared/preferences/face-sad.svg b/browser/themes/shared/preferences/face-sad.svg
new file mode 100644
index 0000000000..7e50710648
--- /dev/null
+++ b/browser/themes/shared/preferences/face-sad.svg
@@ -0,0 +1,9 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path fill="#00D3E7" d="M9.94.8a9.01 9.01 0 0 0-9 9.42 1.07 1.07 0 0 0 .13 2.12h.21A9.01 9.01 0 1 0 9.94.8"/>
+  <path fill="#00A1C1" d="M18.93 10.21v-.4c0-2.4-.93-4.6-2.47-6.2A9.26 9.26 0 0 1 3.72 16.34a9 9 0 0 0 14.85-4l.21-.01c.6 0 1.07-.48 1.07-1.07.01-.54-.4-.99-.92-1.06"/>
+  <path fill="#323B59" d="M5.47 6.55a.99.99 0 0 0-.99.99v2.22a.99.99 0 1 0 1.98 0V7.54a.99.99 0 0 0-1-.99m8.98 0a.99.99 0 0 0-1 .99v2.22a.99.99 0 1 0 1.98 0V7.54a.99.99 0 0 0-.98-.99m-4.5 5.47a2.27 2.27 0 0 0-2.34 2.13c-.02.23.09.45.27.58.19.14.43.17.64.09 0 0 .47-.17 1.34-.17.91 0 1.55.19 1.56.19a.69.69 0 0 0 .61-.11.67.67 0 0 0 .26-.58 2.27 2.27 0 0 0-2.34-2.13"/>
+  <path fill="#00A1C1" d="M4.59 7.02c-.36 0-.72-.11-1.03-.32a.318.318 0 1 1 .35-.53 1.25 1.25 0 0 0 1.8-.47.313.313 0 1 1 .56.28 1.88 1.88 0 0 1-1.68 1.04m10.47 0a1.88 1.88 0 0 1-1.68-1.04.313.313 0 1 1 .56-.28 1.24 1.24 0 0 0 1.8.48.32.32 0 0 1 .35.53c-.3.2-.66.3-1.03.3"/>
+</svg>
diff --git a/browser/themes/shared/preferences/face-smile.svg b/browser/themes/shared/preferences/face-smile.svg
new file mode 100644
index 0000000000..6ab7f26131
--- /dev/null
+++ b/browser/themes/shared/preferences/face-smile.svg
@@ -0,0 +1,14 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path fill="#FFBF49" d="M9.95.8A9.03 9.03 0 0 0 .92 9.83l.01.4a1.07 1.07 0 0 0 .14 2.13h.21A9.04 9.04 0 1 0 9.95.8"/>
+  <path fill="#323B59" d="M14.44 6.7c.55 0 1 .44 1 .99V9.9c0 .55-.45.12-1 .12s-.99.42-.99-.12V7.69c0-.55.45-1 1-1"/>
+  <path fill="#FFA500" d="M13.54 10.46a.31.31 0 0 1-.14-.59 2.36 2.36 0 0 1 2.08-.03.3.3 0 0 1 .14.41.3.3 0 0 1-.41.15 1.75 1.75 0 0 0-1.53.02.28.28 0 0 1-.14.04"/>
+  <path fill="#323B59" d="M5.46 6.7c.55 0 .99.44.99.99V9.9c0 .55-.44.12-.99.12s-.99.42-.99-.12V7.69c0-.55.45-1 .99-1"/>
+  <path fill="#FFA500" d="M4.56 10.46a.31.31 0 0 1-.14-.59 2.36 2.36 0 0 1 2.07-.03.3.3 0 0 1 .15.41.3.3 0 0 1-.41.15 1.75 1.75 0 0 0-1.53.02.3.3 0 0 1-.14.04"/>
+  <path fill="#323B59" d="M16.06 12.42l-.62-.05c-.06.02-.21.06-.45.1-.3.04-.73.15-1.25.2-.51.04-1.12.14-1.76.17-.65.04-1.33.05-2.03.06-.68-.01-1.37-.02-2.02-.07-.65-.03-1.25-.12-1.76-.17-.52-.04-.95-.15-1.25-.2l-.45-.09a30.35 30.35 0 0 0-.7.07.17.17 0 0 0-.04.23l.1.17a7.67 7.67 0 0 0 1.54 1.75c.5.45 1.01.78 1.53 1.06l.41.19c.78-.55 1.68.2 2.64.2.97 0 1.87-.74 2.64-.2.14-.05.28-.1.42-.18a8.34 8.34 0 0 0 3.06-2.82l.1-.18c.02-.02.03-.04.03-.07a.16.16 0 0 0-.14-.17"/>
+  <path fill="#FFF" d="M6.17 12.66c.51.05 1.12.14 1.76.17.65.05 1.33.06 2.02.07.7-.01 1.38-.02 2.03-.06.65-.04 1.25-.13 1.76-.17.52-.05.95-.15 1.25-.2.24-.04.4-.08.45-.1l-.9-.05-1.53-.06c-1.02-.03-2.04-.03-3.06-.05-1.02.02-2.04.02-3.05.05l-1.53.06-.9.05c.05.02.21.06.45.1.3.04.73.15 1.25.2"/>
+  <path fill="#FFA500" d="M18.96 10.23v-.4c0-2.42-.94-4.6-2.48-6.22A9.27 9.27 0 0 1 3.72 16.37a9.02 9.02 0 0 0 14.87-4l.22-.01c.6 0 1.08-.48 1.08-1.07 0-.55-.4-1-.93-1.06"/>
+  <path fill="#FF7664" d="M12.58 15.85h.01c-.77-.55-1.68-.37-2.64-.25-.96-.12-1.87-.3-2.64.25.87.39 1.73.57 2.6.58H10c.86 0 1.73-.2 2.6-.58h-.02"/>
+</svg>
diff --git a/browser/themes/shared/preferences/fxaPairDevice.css b/browser/themes/shared/preferences/fxaPairDevice.css
new file mode 100644
index 0000000000..51183b84c7
--- /dev/null
+++ b/browser/themes/shared/preferences/fxaPairDevice.css
@@ -0,0 +1,122 @@
+/* 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/. */
+
+#fxaPairDeviceDialog {
+  padding-bottom: 2em;
+}
+
+#pairTitle {
+  font-size: 2.1rem;
+  font-weight: bold;
+  padding-top: 12px;
+  text-align: center;
+}
+
+.pairHeading {
+  font-size: 1.08em;
+}
+
+.menu-icon {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#qrCodeDisplay {
+  width: 450px;
+  margin: auto;
+}
+
+#qrWrapper {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  margin: auto;
+  margin-top: 28px;
+}
+
+#qrContainer {
+  height: 200px;
+  width: 200px;
+  background-size: contain;
+  image-rendering: -moz-crisp-edges;
+  transition: filter 250ms cubic-bezier(.07,.95,0,1);
+}
+
+#qrWrapper:not([pairing-status="ready"]) #qrContainer {
+  opacity: 0.05;
+  filter: blur(3px);
+}
+
+#qrWrapper:not([pairing-status="loading"]) #qrSpinner {
+  opacity: 0;
+}
+
+#qrSpinner {
+  display: block;
+  position: absolute;
+  height: 250px;
+  width: 250px;
+}
+
+#qrSpinner::before {
+  background-image: url("chrome://browser/skin/fxa/fxa-spinner.svg");
+  animation: 0.9s spin infinite linear;
+  background-size: 36px;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: block;
+  position: absolute;
+  height: 200px;
+  width: 200px;
+  content: "";
+  transition: opacity 250ms cubic-bezier(.07,.95,0,1);
+  will-change: transform;
+  margin-inline: auto;
+}
+
+#qrWrapper:not([pairing-status="error"]) #qrError {
+  display: none;
+}
+
+#qrError {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 200px; /* Same as #qrContainer */
+  position: absolute;
+  inset: 0;
+  margin-inline: auto;
+  transition: opacity 250ms cubic-bezier(.07,.95,0,1);
+  cursor: pointer;
+}
+
+.qr-error-text {
+  text-align: center;
+  user-select: none;
+  display: block;
+  color: #2484C6;
+  cursor: pointer;
+}
+
+#refresh-qr {
+  width: 36px;
+  height: 36px;
+  background-image: url("chrome://global/skin/icons/reload.svg");
+  background-size: contain;
+  -moz-context-properties: fill;
+  fill: #2484C6;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/browser/themes/shared/preferences/ios-menu.svg b/browser/themes/shared/preferences/ios-menu.svg
new file mode 100644
index 0000000000..15183a814d
--- /dev/null
+++ b/browser/themes/shared/preferences/ios-menu.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="context-fill" d="M5 5h14a1 1 0 100-2H5a1 1 0 100 2M19 11H5a1 1 0 100 2h14a1 1 0 100-2M19 19H5a1 1 0 100 2h14a1 1 0 100-2"/>
+</svg>
diff --git a/browser/themes/shared/preferences/mozilla-logo.svg b/browser/themes/shared/preferences/mozilla-logo.svg
new file mode 100644
index 0000000000..af66da5135
--- /dev/null
+++ b/browser/themes/shared/preferences/mozilla-logo.svg
@@ -0,0 +1,5 @@
+<!-- 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="20" height="20" xmlns="http://www.w3.org/2000/svg"><path fill="context-fill" fill-rule="evenodd" d="M0 .5h20v20H0z
+M17.702 13.46h1.256v2.04h-3.96v-5.476c0-1.72-.548-2.365-1.61-2.365-1.289 0-1.804.977-1.804 2.325v3.438h1.255v2.042H8.884V10.02c0-1.719-.547-2.365-1.61-2.365-1.289 0-2.01.977-2.01 2.325v3.438h2.002v2.046H1.474v-2.04H2.66V8.108H1.417v-2.43h3.578v1.535A3.873 3.873 0 0 1 8.3 5.505a3.03 3.03 0 0 1 3.058 2.123 3.14 3.14 0 0 1 3.06-2.123 3.123 3.123 0 0 1 3.252 3.404v4.551h.032z"/></svg>
diff --git a/browser/themes/shared/preferences/no-search-bar.svg b/browser/themes/shared/preferences/no-search-bar.svg
new file mode 100644
index 0000000000..b5c17b5f26
--- /dev/null
+++ b/browser/themes/shared/preferences/no-search-bar.svg
@@ -0,0 +1,20 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="631" height="36">
+  <style>
+    .addressBarOutline {
+      stroke: context-stroke;
+      stroke-linejoin: round;
+      stroke-width: 1px
+    }
+    .addressBarIcons {
+      fill: context-stroke;
+      fill-rule: evenodd;
+    }
+  </style>
+  <rect width="630" height="35" x=".5" y=".5" fill="context-fill" class="addressBarOutline" rx="4" ry="4"/>
+  <rect width="434" height="23" x="110.5" y="6.5" fill="rgba(255,255,255,0.05)" class="addressBarOutline" rx="4" ry="4"/>
+  <path d="M604 .5h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574zm500.57-1.986h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0 3.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0-7.5h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m-34.98 0a.75.75 0 0 0-.52 1.28l3.18 3.22-3.18 3.22a.746.746 0 1 0 1.05 1.06l3.7-3.75a.774.774 0 0 0 0-1.06l-3.7-3.75a.754.754 0 0 0-.53-.22m4.44 0a.715.715 0 0 0-.52.22.754.754 0 0 0 0 1.06l3.17 3.22-3.17 3.22a.754.754 0 0 0 0 1.06.715.715 0 0 0 .52.22.754.754 0 0 0 .53-.22l3.69-3.75a.754.754 0 0 0 0-1.06l-3.69-3.75a.754.754 0 0 0-.53-.22m-22.84 2.25h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm2.63-3h-9a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5zm-4.5 9H561v-7.5h4.5v7.5zm4.5 0h-3.75v-7.5H570v7.5zm-2.63-4.5h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm0 1.5h.75a.375.375 0 1 0 0-.75h-.75a.375.375 0 0 0 0 .75zm-477.54 2.5a.375.375 0 1 1 .37-.375.356.356 0 0 1-.37.375m-2.6 1.5a.7.7 0 0 1-.742-.75v-4.95l2.961-3 2.97 3V22a.706.706 0 0 1-.74.75h-.74V19a.706.706 0 0 0-.74-.75h-1.49a.706.706 0 0 0-.74.75v3.75h-.739m2.219-10.5a.7.7 0 0 0-.51.225l-5.193 5.25a.738.738 0 1 0 1.037 1.05l.223-.225v4.2a1.5 1.5 0 0 0 1.482 1.5h5.931a1.491 1.491 0 0 0 1.48-1.5v-4.2l.22.225a.678.678 0 0 0 .52.225.663.663 0 0 0 .52-.225.725.725 0 0 0 0-1.05l-5.19-5.25a.709.709 0 0 0-.52-.225M70.375 13a.749.749 0 0 0-.75.75v1.808a5.245 5.245 0 1 0-.788 6.4.75.75 0 0 0-1.061-1.061 3.755 3.755 0 1 1 .776-4.151h-1.927a.75.75 0 0 0 0 1.5h3.75a.749.749 0 0 0 .75-.75v-3.75a.749.749 0 0 0-.75-.75m-34.158 4.296h8.649l-3.206-3.2a.738.738 0 0 1 1.044-1.043l4.474 4.47a.72.72 0 0 1 0 1.043l-4.474 4.47a.72.72 0 0 1-1.044 0 .72.72 0 0 1 0-1.043l3.206-3.2h-8.649a.749.749 0 1 1 0-1.497z" class="addressBarIcons"/>
+  <path d="M23.783 17.292h-8.649l3.206-3.2a.738.738 0 0 0-1.044-1.043l-4.474 4.47a.72.72 0 0 0 0 1.043l4.474 4.47a.72.72 0 0 0 1.044 0 .72.72 0 0 0 0-1.043l-3.206-3.2h8.649a.749.749 0 1 0 0-1.497z" class="addressBarIcons"/>
+</svg>
diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css
new file mode 100644
index 0000000000..12beaa7e01
--- /dev/null
+++ b/browser/themes/shared/preferences/preferences.css
@@ -0,0 +1,1471 @@
+/* - 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/. */
+
+@namespace html "http://www.w3.org/1999/xhtml";
+
+/* Global rules */
+* {
+  user-select: text;
+}
+
+#preferences-root {
+  text-rendering: optimizeLegibility;
+  -moz-box-layout: flex;
+}
+
+@media not print {
+  #preferences-root,
+  #preferences-body {
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+#preferences-root,
+#preferences-body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+#preferences-body {
+  vertical-align: top; /* See bug 1606130 */
+  display: -moz-box;
+  -moz-box-orient: vertical;
+
+  --main-pane-width: 664px;
+}
+
+/*
+  The stack has some very tall content but it shouldn't be taller than the
+  viewport (and we know the tall content will still be accessible via scrollbars
+  regardless if the stack has a shorter height). So we use min-height: 0 to allow
+  the stack to be smaller than its content height so it can fit the viewport size.
+*/
+#preferences-stack {
+  min-height: 0;
+}
+
+.main-content {
+  padding-top: 0;
+  /* the 32px min-height, plus 20+30px margin below, plus some leeway: */
+  scroll-padding-top: 90px;
+  contain: inline-size;
+}
+
+.pane-container {
+  /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */
+  display: block;
+  width: min(100%, var(--main-pane-width));
+  min-width: min-content;
+}
+
+#mainPrefPane {
+  width: 100%;
+  padding: 0;
+}
+
+groupbox[data-category] {
+  margin: 0 0 32px;
+}
+
+html|h1 {
+  margin: 0 0 8px;
+  font-size: 1.46em;
+  font-weight: 300;
+  line-height: 1.3em;
+}
+
+html|h2 {
+  margin: 16px 0 4px;
+  font-size: 1.14em;
+  line-height: normal;
+}
+
+description.indent,
+.indent:not(#browserPrivateEngineSelection) > description {
+  color: var(--in-content-deemphasized-text);
+}
+
+button,
+treecol,
+html|option {
+  /* override the * rule */
+  user-select: none;
+}
+
+/* Buttons get a default min-width in XUL. When they also have flex, they will
+ * be large enough anyway, and we don't want them to become smaller than their inner
+ * text which would then overflow the button. Set min-width back to auto for that:
+ */
+button[flex] {
+  min-width: auto;
+}
+
+description,
+label {
+  line-height: 1.8em;
+  margin: 0;
+}
+
+.tip-caption {
+  font-size: .9em;
+}
+
+menulist::part(label),
+menuitem > label,
+button > hbox > label {
+  line-height: unset;
+}
+
+.indent {
+  /* This should match the checkboxes/radiobuttons' width and inline margin,
+     such that when we have a toggle with a label followed by another element
+     with this class, the other element's text aligns with the toggle label. */
+  margin-inline-start: 22px !important;
+}
+
+checkbox {
+  margin-inline: 0;
+}
+
+.tail-with-learn-more {
+  margin-inline: 0 10px;
+}
+
+/* Add a bit of space to the end of descriptions to
+ * leave margin with e.g. additional buttons on the side. */
+.description-with-side-element {
+  margin-inline-end: 10px !important;
+}
+
+.learnMore {
+  margin-inline-start: 0;
+  font-weight: normal;
+  white-space: nowrap;
+}
+
+.accessory-button {
+  min-width: 150px;
+  margin: 4px 0;
+}
+
+.spotlight {
+  background-color: color-mix(in srgb, var(--in-content-accent-color) 15%, transparent);
+  outline: var(--in-content-accent-color) 1px dotted;
+  animation: fade-out 0.5s ease-out 2s forwards;
+  /* Show the border to spotlight the components in high-contrast mode. */
+  border: 1px solid transparent;
+  border-radius: 2px;
+}
+
+@keyframes fade-out {
+  100% {
+    background-color: transparent;
+    outline-color: transparent;
+  }
+}
+
+[data-subcategory] {
+  margin-inline: -4px;
+  padding-inline: 4px;
+}
+
+.ac-site-icon {
+  display: -moz-box;
+}
+
+/* Subcategory title */
+
+/**
+ * The first subcategory title for each category should not have margin-top.
+ */
+
+.subcategory:not([hidden]) ~ .subcategory {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--in-content-border-color);
+}
+
+/* Category List */
+
+#categories {
+  overflow: visible !important; /* Cancel scrollbar and do not clip overflow content when window size goes very small */
+  padding: 1px; /* Adding padding around richlistitem in order to make entire keyboard focusing outline visible */
+}
+
+#category-general > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/category-general.svg");
+}
+
+#category-home > .category-icon {
+  list-style-image: url("chrome://browser/skin/home.svg");
+}
+
+#category-search > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/category-search.svg");
+}
+
+#category-privacy > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/category-privacy-security.svg");
+}
+
+#category-sync > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/category-sync.svg");
+}
+
+#category-experimental > .category-icon {
+  list-style-image: url("chrome://global/skin/icons/experiments.svg");
+}
+
+#category-more-from-mozilla > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/mozilla-logo.svg");
+}
+
+/* All panes */
+
+.info-icon,
+.androidIcon,
+.iOSIcon {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* General Pane */
+
+.is-default > #isNotDefaultPane,
+:not(.is-default) > #isDefaultPane {
+  visibility: hidden;
+}
+
+#isDefaultLabel,
+#isNotDefaultLabel {
+  font-weight: 600;
+}
+
+#browserContainersExtensionContent {
+  padding-block: 5px;
+}
+
+.extension-controlled {
+  margin-block: 18px;
+}
+
+.extension-controlled-icon {
+  height: 20px;
+  margin: 2px 0 6px;
+  vertical-align: middle;
+  width: 20px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.extension-controlled-disabled {
+  -moz-context-properties: fill;
+  color: GrayText;
+  fill: currentColor;
+}
+
+.extension-controlled-disabled > .extension-controlled-button {
+  display: none;
+}
+
+.extension-controlled-icon.close-icon {
+  height: 30px;
+  width: 30px;
+  margin-inline-start: 5px;
+}
+
+#getStarted {
+  font-size: 90%;
+}
+
+#colors {
+  margin-inline-start: 5px;
+}
+
+#FontsDialog menulist:empty {
+  /* When there's no menupopup, while the font builder is running,
+   * the height of the menulist would otherwise shrink. This throws
+   * off the height determination SubDialog.sys.mjs does, which then
+   * leads to content being cut off. Fix by enforcing a minimum height
+   * when there's no content: */
+  min-height: max(32px, calc(1.4em + 16px));
+}
+
+#useDocumentColors {
+  margin: 4px 0;
+}
+
+#translationAttributionImage {
+  width: 70px;
+  cursor: pointer;
+}
+
+#activeLanguages > richlistitem {
+  padding: 0.3em;
+}
+
+#saveWhere {
+  -moz-box-align: center;
+}
+
+#saveTo {
+  margin-inline-end: 1em;
+}
+
+#downloadFolder {
+  -moz-box-flex: 1;
+  margin-block: 4px;
+  margin-inline-start: 0;
+  padding-inline-start: 30px;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: center left 8px;
+}
+
+#downloadFolder:-moz-locale-dir(rtl) {
+  background-position-x: right 8px;
+}
+
+#updateBox {
+  margin-block: 4px 32px;
+}
+
+/* Work around bug 560067 - animated images in visibility: hidden
+ * still eat CPU. */
+#updateDeck > *:not(.deck-selected) > .update-throbber {
+  display: none;
+}
+
+#updateDeck > hbox > button {
+  margin-block: 0;
+  margin-inline-end: 0;
+}
+
+#updateDeck > hbox > label {
+  -moz-box-flex: 1;
+}
+
+.manualLink {
+  margin-inline-start: 6px !important;
+}
+
+#updateRadioGroup > radio {
+  min-height: 30px;
+  margin: 2px 0;
+}
+
+#filter {
+  margin: 4px 0 8px;
+}
+
+#handlersView {
+  height: 25em;
+  margin-inline-end: 0;
+}
+
+#handlersView > richlistitem {
+  min-height: 30px;
+}
+
+#handlersViewHeader > treecol,
+#handlersView > richlistitem > hbox {
+  width: 50%;
+}
+
+#handlersView .actionsMenu {
+  margin: 0;
+  min-height: 0;
+  padding: 0;
+  border: none;
+  padding-inline-end: 8px;
+}
+
+#handlersView .actionsMenu::part(label) {
+  margin: 0;
+}
+
+.typeIcon,
+.actionIcon,
+.actionsMenu::part(icon) {
+  height: 16px;
+  width: 16px;
+}
+
+.typeIcon {
+  margin-inline: 10px 9px !important;
+}
+
+#handlersView .actionsMenu::part(icon),
+.actionIcon {
+  margin-inline: 11px 8px !important;
+}
+
+.actionsMenu > menupopup > menuitem {
+  padding-inline-start: 10px !important;
+}
+
+.actionsMenu > menupopup > menuitem > .menu-iconic-left {
+  margin-inline-end: 8px !important;
+}
+
+/* Increase the specifity to override common.inc.css */
+richlistitem[selected] .actionsMenu:focus-visible {
+  outline-offset: -3px;
+}
+
+/* Home Pane */
+
+#homepageGroup menulist,
+#homepageGroup html|input {
+  margin: 5px 0;
+}
+
+#homepageGroup html|input {
+  text-align: match-parent;
+}
+
+#homepageGroup:-moz-locale-dir(rtl) html|input {
+  unicode-bidi: plaintext;
+}
+
+#homepageAndNewWindowsOption {
+  margin-top: 20px;
+}
+
+#homepageGroup:-moz-locale-dir(rtl) panel[type="autocomplete-richlistbox"] {
+  direction: rtl;
+}
+
+.homepage-button:first-of-type {
+  margin-inline-start: 0;
+}
+
+.homepage-button:last-of-type {
+  margin-inline-end: 0;
+}
+
+#homeContentsGroup .checkbox-icon[src] {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-inline: 2px 8px;
+  width: 16px;
+}
+
+#homeContentsGroup [data-subcategory] {
+  margin-top: 14px;
+}
+
+#homeContentsGroup [data-subcategory] .section-checkbox {
+  font-weight: 600;
+}
+
+#homeContentsGroup [data-subcategory] > vbox menulist {
+  margin-block: 0;
+}
+
+.addon-with-favicon .menu-iconic-icon {
+  margin-inline-start: 0;
+}
+
+/* Search Pane */
+
+#engineList {
+  margin: 2px 0 5px;
+}
+
+#engineList > treechildren::-moz-tree-image(engineShown, checked),
+#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
+  list-style-image: url("chrome://global/skin/icons/check.svg");
+  -moz-context-properties: fill, stroke;
+  fill: var(--in-content-accent-color);
+}
+
+#engineList > treechildren::-moz-tree-image(engineShown, checked, selected),
+#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) {
+  fill: var(--in-content-item-selected-text);
+  stroke: var(--in-content-item-selected);
+}
+
+@media (prefers-contrast) {
+  #engineList > treechildren::-moz-tree-image(hover),
+  #blocklistsTree > treechildren::-moz-tree-image(hover) {
+    fill: var(--in-content-item-hover-text);
+    stroke: var(--in-content-item-hover);
+  }
+}
+
+#engineList > treechildren::-moz-tree-row,
+#blocklistsTree > treechildren::-moz-tree-row {
+  min-height: 36px;
+}
+
+#selectionCol {
+  min-width: 26px;
+}
+
+#addEnginesBox {
+  margin: 4px 0 0;
+}
+
+/* Privacy Pane */
+
+#allowSmartSize {
+  margin-block: 0 4px;
+}
+
+#doNotTrackLearnMoreBox {
+  margin-top: 32px;
+}
+
+#historyPane {
+  margin-top: 4px;
+}
+
+#historyButtons {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+#blockCookies,
+#keepRow {
+  margin-top: 1.5em;
+}
+
+/* Collapse the non-active vboxes in decks to use only the height the
+   active vbox needs */
+#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
+#historyPane:not([selectedIndex="2"]) > #historyCustomPane,
+#weavePrefsDeck:not([selectedIndex="1"]) > #hasFxaAccount,
+#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
+#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected,
+#syncStatus:not([selectedIndex="1"]) > #syncConfigured {
+  visibility: collapse;
+}
+
+#tabsElement {
+  margin-inline-end: 4px; /* add the 4px end-margin of other elements */
+}
+
+.text-link {
+  margin-bottom: 0;
+}
+
+.text-link[disabled="true"] {
+  pointer-events: none;
+}
+
+#showUpdateHistory {
+  margin-inline-start: 0;
+}
+
+@media (-moz-platform: windows-win7),
+       (-moz-platform: windows-win8) {
+  #windows-sso,
+  #windows-sso-caption {
+    display: none;
+  }
+}
+
+/**
+ * Dialog
+ */
+
+.dialogOverlay {
+  visibility: hidden;
+}
+
+.dialogOverlay[topmost="true"] {
+  background-color: rgba(0,0,0,0.5);
+}
+
+.dialogBox {
+  background-color: var(--in-content-page-background);
+  background-clip: content-box;
+  color: var(--in-content-page-color);
+  /* `transparent` will use the dialogText color in high-contrast themes and
+     when page colors are disabled */
+  border: 1px solid transparent;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
+  display: -moz-box;
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+}
+
+@media (prefers-color-scheme: dark) {
+  @media not (prefers-contrast) {
+    .dialogBox {
+      --in-content-page-background: #42414d;
+    }
+  }
+}
+
+.dialogBox[resizable="true"] {
+  resize: both;
+  overflow: hidden;
+  min-height: 20em;
+  min-width: 66ch;
+}
+
+.dialogTitleBar {
+  padding: .4em .2em;
+  border-bottom: 1px solid var(--in-content-border-color);
+}
+
+.dialogTitle {
+  font-weight: 600;
+  text-align: center;
+  user-select: none;
+}
+
+.fxaPairDeviceIcon {
+  background-image: url("chrome://browser/content/logos/fxa-logo.svg");
+  background-position: center center;
+  background-repeat: no-repeat;
+  position: relative;
+  height: 80px;
+  padding-top: 42px;
+  margin-top: -40px;
+}
+
+.fxaPairDeviceIcon .close-icon {
+  margin-top: 10px;
+}
+
+.close-icon {
+  border: none;
+  background-color: transparent; /* override common.css, but keep hover/active states */
+  min-width: 0;
+  min-height: auto;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin-inline: 0 8px;
+}
+
+.dialogFrame {
+  margin: 10px;
+  -moz-box-flex: 1;
+  /* Default dialog dimensions */
+  min-width: 66ch;
+}
+
+/**
+ * End Dialog
+ */
+
+/**
+ * Font group and font dialog menulist fixes
+ */
+
+#font-chooser-group {
+  display: grid;
+  grid-template-columns: max-content 1fr max-content max-content;
+}
+
+#defaultFont {
+  width: 25ch;
+}
+
+#defaultFontType,
+#serif,
+#sans-serif,
+#monospace {
+  width: 0; /* Might be able to be removed */
+  min-width: 30ch;
+}
+
+/**
+ * Sync
+ */
+
+.fxaProfileImage {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  border: 1px solid transparent;
+  list-style-image: url(chrome://browser/skin/fxa/avatar-color.svg);
+  margin-inline-end: 24px;
+  -moz-user-focus: normal;
+}
+
+.fxaProfileImage.actionable {
+  cursor: pointer;
+}
+
+.fxaProfileImage.actionable:hover {
+  border-color: #0095DD;
+}
+
+.fxaProfileImage.actionable:hover:active {
+  border-color: #ff9500;
+}
+
+#useFirefoxSync {
+  font-size: 90%;
+  margin-inline-end: 8px !important;
+}
+
+#fxaNoLoginStatus {
+  margin-block: 46px 64px;
+}
+
+#fxaSyncComputerName {
+  -moz-box-flex: 1;
+  margin-block: 4px;
+  margin-inline-start: 0;
+}
+
+#fxaChangeDeviceName {
+  margin-block: 4px;
+  margin-inline-end: 0;
+}
+
+#noFxaAccount {
+  line-height: 1.2em;
+}
+
+#noFxaAccount > label:first-child {
+  margin-bottom: 0.6em;
+}
+
+#noFxaCaption {
+  line-height: 30px;
+  margin-block: 0 4px;
+}
+
+#noFxaSignIn {
+  margin-inline-start: 8px;
+}
+
+.fxaSyncIllustration {
+  list-style-image: url(chrome://browser/skin/fxa/sync-devices.svg);
+  width: 312px;
+  height: 136px;
+}
+
+#noFxaDescription {
+  padding-inline-end: 52px;
+}
+
+.separator {
+  border-bottom: 1px solid var(--in-content-box-border-color);
+}
+
+#fxaGroup {
+  margin-bottom: 32px;
+}
+
+.openLink {
+  line-height: 30px;
+  cursor: pointer;
+}
+
+.openLink:visited {
+  color: var(--in-content-link-color);
+}
+
+#fxaDisplayName {
+  margin-inline-end: 10px !important;
+}
+
+.fxaLoginRejectedWarning {
+  list-style-image: url(chrome://global/skin/icons/warning.svg);
+  -moz-context-properties: fill;
+  fill: #FFBF00;
+  margin-inline: 4px 8px;
+}
+
+#syncStatus {
+  margin-top: 32px;
+}
+
+.sync-group {
+  margin-block: 16px;
+  border: 1px solid var(--in-content-border-color);
+}
+
+.sync-configured {
+  display: block;
+}
+
+.sync-engines-list > div,
+.sync-engines-list + hbox {
+  margin-top: 0;
+  padding-top: 16px;
+  max-width: 300px;
+  height: auto;
+}
+
+dialog > .sync-engines-list > div,
+dialog > .sync-engines-list + hbox {
+  padding-top: 0;
+}
+
+.sync-engines-list checkbox .checkbox-icon,
+.sync-engine-image {
+  margin-inline: 2px 8px;
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  align-self: center;
+}
+
+.sync-engines-list checkbox {
+  min-width: max-content;
+  max-width: calc(50vw - 10px);
+}
+
+.sync-engines-list .checkbox-label-box {
+  -moz-box-align: center;
+}
+
+.sync-engines-list {
+  column-count: 2;
+  column-fill: balance;
+}
+
+.sync-engines-list > div:not([hidden]) {
+  display: flex;
+}
+
+.sync-engine-bookmarks .checkbox-icon,
+.sync-engine-bookmarks.sync-engine-image {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+
+.sync-engine-history .checkbox-icon,
+.sync-engine-history.sync-engine-image {
+  list-style-image: url("chrome://browser/skin/history.svg");
+}
+
+.sync-engine-tabs .checkbox-icon,
+.sync-engine-tabs.sync-engine-image {
+  list-style-image: url("chrome://browser/skin/synced-tabs.svg");
+}
+
+.sync-engine-passwords .checkbox-icon,
+.sync-engine-passwords.sync-engine-image {
+  list-style-image: url("chrome://browser/skin/login.svg");
+}
+
+.sync-engine-addons .checkbox-icon,
+.sync-engine-addons.sync-engine-image {
+  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
+}
+
+.sync-engine-prefs .checkbox-icon,
+.sync-engine-prefs.sync-engine-image {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+.sync-engine-addresses .checkbox-icon,
+.sync-engine-addresses.sync-engine-image {
+  list-style-image: url("chrome://formautofill/content/formfill-anchor.svg");
+}
+
+.sync-engine-creditcards .checkbox-icon,
+.sync-engine-creditcards.sync-engine-image {
+  list-style-image: url("chrome://formautofill/content/icon-credit-card-generic.svg");
+}
+
+.fxaMobilePromo {
+  margin-top: 2px !important;
+}
+
+.androidIcon,
+.iOSIcon {
+  margin-inline: 2px 4px;
+  width: 20px;
+  height: 20px;
+  vertical-align: text-bottom;
+}
+
+#updateDeck > hbox > label {
+  margin-inline-end: 5px ! important;
+}
+
+.update-throbber {
+  width: 16px;
+  min-height: 16px;
+  margin-block: 7px;
+  margin-inline-end: 8px;
+}
+
+html|img.update-throbber {
+  vertical-align: middle;
+}
+
+image.update-throbber {
+  list-style-image: url("chrome://global/skin/icons/loading.png");
+}
+
+@media (min-resolution: 1.1dppx) {
+  .update-throbber {
+    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
+  }
+}
+
+.navigation {
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+}
+
+@media (prefers-reduced-motion) {
+  /* Setting border-inline-end on .navigation makes it a focusable element */
+  .navigation::after {
+    content: "";
+    width: 1px;
+    height: 100%;
+    background-color: var(--in-content-border-color);
+    top: 0;
+    inset-inline-end: 0;
+    position: absolute;
+  }
+}
+
+.face-sad {
+  list-style-image: url("chrome://browser/skin/preferences/face-sad.svg");
+  width: 20px;
+  height: 20px;
+  margin-block: 5px;
+  margin-inline-end: 8px;
+}
+
+.face-smile {
+  list-style-image: url("chrome://browser/skin/preferences/face-smile.svg");
+  width: 20px;
+  height: 20px;
+  margin-block: 5px;
+  margin-inline-end: 8px;
+}
+
+#policies-container,
+#searchInput {
+  min-height: 32px;
+  margin: 20px 0 30px;
+}
+
+#policies-container {
+  margin-inline-end: 16px;
+  /* Make sure the container is at least the same height as the searchbox.
+     This is needed in addition to the min-height above to make the info icon
+     the same height as the first line in the policies label.
+     Searchbox's height - line-height - border top and bottom */
+  padding-block: max(0px, calc((32px - 1.8em - 2px) / 2));
+}
+
+.info-box-container {
+  background-color: var(--in-content-box-info-background);
+  padding: 9px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.info-box-container.smaller-font-size {
+  font-size: 85%;
+}
+
+.info-icon-container {
+  display: flex;
+}
+
+.info-icon {
+  list-style-image: url("chrome://global/skin/icons/info.svg");
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 6px;
+  align-self: start;
+  margin-top: 0.4em;
+  flex-shrink: 0;
+}
+
+.info-box-container.smaller-font-size .info-icon {
+  margin-top: 0.3em;
+}
+
+.sticky-container {
+  position: sticky;
+  background-color: var(--in-content-page-background);
+  top: 0;
+  z-index: 1;
+  /* The sticky-container should have the capability to cover all spotlight area. */
+  width: calc(100% + 8px);
+  margin-inline: -4px;
+  padding-inline: 4px;
+}
+
+.sticky-inner-container {
+  -moz-box-flex: 1;
+  max-width: var(--main-pane-width);
+}
+
+.search-tooltip {
+  max-width: 10em;
+  font-size: 1rem;
+  position: absolute;
+  padding: 0 .7em;
+  background-color: #ffe900;
+  color: #000;
+  border: 1px solid #d7b600;
+  margin-top: -18px;
+  opacity: .85;
+}
+
+.search-tooltip:hover {
+  opacity: .1;
+}
+
+.search-tooltip::before {
+  position: absolute;
+  content: "";
+  border: 7px solid transparent;
+  border-top-color: #d7b600;
+  top: 100%;
+  inset-inline-start: calc(50% - 7px);
+}
+
+.search-tooltip::after {
+  position: absolute;
+  content: "";
+  border: 6px solid transparent;
+  border-top-color: #ffe900;
+  top: 100%;
+  inset-inline-start: calc(50% - 6px);
+}
+
+.search-tooltip-parent {
+  position: relative;
+}
+
+.search-tooltip > span {
+  display: block;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.visually-hidden {
+  visibility: collapse;
+}
+
+menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left {
+  display: -moz-box;
+  min-width: auto; /* Override the min-width defined in menu.css */
+  margin-inline-end: 6px;
+}
+
+menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left > .menu-iconic-icon {
+  width: 8px;
+  height: 10px;
+  margin: 0;
+}
+
+menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon {
+  list-style-image: url(chrome://browser/skin/preferences/search-arrow-indicator.svg);
+}
+
+menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.menu-iconic-highlightable-text {
+  margin: 0; /* Align with the margin of xul:label.menu-iconic-text */
+}
+
+#no-results-message > label {
+  margin: 2px 0;
+  line-height: 30px;
+}
+
+/* Proxy port input */
+
+.proxy-port-input {
+  width: calc(5ch + 18px); /* 5 chars + (8px padding + 1px border) on both sides */
+  margin-inline-start: 4px;
+}
+
+#primaryBrowserLocale {
+  margin-inline-start: 0;
+  min-width: 20em;
+}
+
+#availableLanguages,
+#availableLocales {
+  margin-inline-start: 0;
+}
+
+#availableLanguages,
+#availableLocales,
+#activeLanguages,
+#selectedLocales {
+  margin-inline-end: 4px;
+}
+
+#selectedLocales > richlistitem {
+  padding-inline-start: 13px;
+}
+
+#warning-message > .message-bar-description {
+  width: 32em;
+}
+
+#warning-message {
+  margin-top: 8px;
+}
+
+.action-button {
+  margin-inline-end: 0;
+}
+
+/* Menulist styles */
+.label-item {
+  font-size: 0.8em;
+}
+
+.updateSettingCrossUserWarningContainer {
+  margin-block-end: 17px;
+}
+
+#updateSettingCrossUserWarningDesc {
+  padding-inline-start: calc(16px + 6px); /* radio-check's width + margin-inline-end */
+  margin-block-start: 20px;
+}
+
+richlistitem .text-link {
+  color: inherit;
+  text-decoration: underline;
+}
+
+richlistitem .text-link:hover {
+  color: inherit;
+}
+
+#proxy-grid,
+#dnsOverHttps-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+}
+
+.proxy-grid-row:not([hidden]),
+.dnsOverHttps-grid-row:not([hidden]) {
+  display: contents;
+}
+
+#proxy-grid > .thin {
+  grid-column: span 2;
+  height: 20px;
+}
+
+#pane-experimental-search-results-header,
+#pane-experimental-subtitle {
+  background-image: url("chrome://global/skin/icons/warning.svg");
+  background-repeat: no-repeat;
+  background-position: 0 center;
+  background-size: contain;
+  min-height: 30px;
+  padding-inline-start: 38px;
+  display: flex;
+  align-items: center;
+  -moz-context-properties: fill;
+  fill: #FFBF00;
+}
+
+#pane-experimental-search-results-header:-moz-locale-dir(rtl),
+#pane-experimental-subtitle:-moz-locale-dir(rtl) {
+  background-position-x: right;
+}
+
+#pane-experimental-featureGates {
+  margin-top: 16px;
+}
+
+.featureGate {
+  margin-bottom: 16px;
+}
+
+.featureGateCheckbox {
+  font-size: 1.14em;
+  -moz-box-align: center;
+}
+
+.featureGateCheckbox > .checkbox-label-box {
+  -moz-box-align: center;
+}
+
+.featureGateDescription {
+  margin-inline-start: 28px;
+}
+
+.checkbox-row {
+  display: flex;
+  align-items: baseline;
+}
+
+.checkbox-row input[type=checkbox] {
+  translate: 0 2px
+}
+
+.checkbox-row a {
+  margin-inline-start: 6px;
+}
+
+#moreFromMozillaCategory-header .title {
+  margin-block-end: 4px;
+}
+
+#moreFromMozillaCategory-header .subtitle {
+  color: var(--in-content-text-color);
+  margin-block-end: 24px;
+  line-height: 1.4em;
+}
+
+#moreFromMozillaCategory:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+}
+
+#moreFromMozillaCategory .mozilla-product-item {
+  margin-top: 30px;
+}
+
+#moreFromMozillaCategory .product-title {
+  margin: 4px 0 3px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  padding-inline-start: 30px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#moreFromMozillaCategory .product-title:-moz-locale-dir(rtl) {
+  background-position-x: right;
+}
+
+#moreFromMozillaCategory .product-description-box {
+  padding-inline-start: 30px;
+  margin: 2px 0;
+  line-height: 1.4em;
+}
+
+#moreFromMozillaCategory .description {
+  display: inline;
+}
+
+#moreFromMozillaCategory .small-button {
+  margin-block: 14px 2px;
+  margin-inline: 30px 0;
+}
+
+#firefox-mobile {
+  background-image: url("chrome://browser/skin/device-phone.svg");
+}
+
+#mozilla-vpn {
+  background-image: url("chrome://browser/skin/preferences/vpn-logo.svg");
+}
+
+#firefox-relay {
+  background-image: url("chrome://browser/skin/preferences/relay-logo.svg");
+}
+
+/*
+ * The :not clause is required because hiding an element with `display: flex` only
+ * partially hides it.
+ */
+.qr-code-box:not([hidden="true"]) {
+  max-width: 320px; /* a unit better than px for this & next? */
+  min-height: 204px;
+  margin-block: 10px 0;
+  margin-inline-start: 30px;
+  background-color: var(--in-content-box-info-background);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  border-radius: 4px;
+}
+
+@media (prefers-contrast) {
+  .qr-code-box:not([hidden="true"]) {
+    border: 1px solid currentColor;
+  }
+}
+
+.qr-code-box-image {
+  border-radius: 4px;
+  padding: 2px;
+  width: 80px;
+  flex: 0 0 auto;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.qr-code-title-label {
+  flex: 1 1 auto;
+}
+
+.qr-code-box-title {
+  font-size: .87em;
+  font-weight: normal;
+  line-height: 1.42em;
+
+  text-align: center;
+
+  margin-block: 20px 0;
+  margin-inline: 40px;
+}
+
+.simple .qr-code-box-title {
+  margin-block: 0;
+  width: 296px;
+}
+
+.simple .qr-code-box {
+  padding-inline: 24px;
+  padding-block: 20px
+}
+
+.simple .qr-code-box-image {
+  padding: 10px;
+}
+
+#moreFromMozillaCategory .qr-code-link {
+  font-size: .87em;
+  line-height: 1.42em;
+}
+
+@media (prefers-color-scheme: dark) {
+  .qr-code-box:not([hidden="true"]) {
+    background-color: rgba(91,91,102,0.45);
+  }
+
+  .qr-code-box-title {
+    color: #fbfbfe;
+  }
+}
+
+#websiteAppearanceGroup {
+  display: block;
+}
+
+#web-appearance-chooser {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+#web-appearance-chooser,
+#web-appearance-override-warning {
+  margin: 12px 0;
+}
+
+#web-appearance-override-warning:not([hidden]) {
+  display: flex;
+}
+
+.web-appearance-choice {
+  width: 100%;
+  border: 1px solid var(--in-content-box-border-color);
+  background-color: var(--in-content-box-background-color);
+  color: var(--in-content-text-color);
+  border-radius: 4px;
+  overflow: clip;
+}
+
+.web-appearance-choice-image-container {
+  background-color: var(--in-content-button-background);
+  padding: 12px 0;
+}
+
+.web-appearance-choice:hover > .web-appearance-choice-image-container {
+  background-color: var(--in-content-button-background-hover);
+}
+
+.web-appearance-choice:hover:active > .web-appearance-choice-image-container {
+  background-color: var(--in-content-button-background-active);
+}
+
+.web-appearance-choice img {
+  display: block;
+  margin: 0 auto;
+
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 4px;
+  box-shadow: 0 0 2px 0 rgba(0,0,0,0.2);
+
+  transform: scaleX(1);
+  content: url("chrome://browser/content/preferences/web-appearance-light.svg")
+}
+
+.web-appearance-choice.dark img {
+  content: url("chrome://browser/content/preferences/web-appearance-dark.svg")
+}
+
+.web-appearance-choice img:dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.web-appearance-choice-footer {
+  border-top: 1px solid var(--in-content-box-border-color);
+  padding: 4px 8px;
+  overflow-wrap: anywhere;
+  display: flex;
+}
+
+.web-appearance-choice input {
+  margin-top: 0.4em;
+}
+
+/* Platform-specific tweaks & overrides */
+
+@media (-moz-platform: macos) {
+  tabpanels {
+    padding: 20px 7px 7px;
+  }
+
+  #browserUseCurrent,
+  #browserUseBookmark,
+  #browserUseBlank {
+    margin-top: 10px;
+  }
+
+  #privacyPrefs {
+    padding: 0 4px;
+  }
+
+  #privacyPrefs > tabpanels {
+    padding: 18px 10px 10px;
+  }
+
+  #OCSPDialogPane {
+    font: message-box !important;
+  }
+
+  /**
+   * Update Preferences
+   */
+  #autoInstallOptions {
+    margin-inline-start: 20px;
+  }
+
+  .updateControls {
+    margin-inline-start: 10px;
+  }
+}
+
+@media (-moz-platform: linux) {
+  .treecol-sortdirection {
+    /* override the Linux only toolkit rule */
+    appearance: none;
+  }
+}
diff --git a/browser/themes/shared/preferences/privacy.css b/browser/themes/shared/preferences/privacy.css
new file mode 100644
index 0000000000..69342135b6
--- /dev/null
+++ b/browser/themes/shared/preferences/privacy.css
@@ -0,0 +1,364 @@
+/* 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/. */
+
+/* Permissions */
+
+#trackingGroup {
+  --section-highlight-background-color: color-mix(in srgb, var(--in-content-accent-color) 20%, transparent);
+}
+
+.permission-icon {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  margin-inline-end: 0.2em;
+}
+
+.permission-icon,
+.content-blocking-category .checkbox-label-box,
+.extra-information-label > image,
+.arrowhead,
+.reload-tabs-button,
+.content-blocking-warning-image {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.geo-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/geo.svg);
+}
+
+.xr-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/xr.svg);
+}
+
+.camera-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/camera.svg);
+}
+
+.microphone-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
+}
+
+.desktop-notification-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg);
+}
+
+.autoplay-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg);
+}
+
+.midi-icon {
+  list-style-image: url(chrome://browser/skin/notification-icons/midi.svg);
+}
+
+/* Content Blocking */
+
+/* Override styling that sets descriptions as grey */
+#trackingGroup description.indent,
+#trackingGroup .indent > description {
+  color: inherit;
+}
+
+[data-subcategory="trackingprotection"] {
+  margin-top: 10px;
+}
+
+#trackingProtectionShield {
+  list-style-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.5;
+  width: 64px;
+  height: 64px;
+  margin-inline-end: 10px;
+}
+
+.content-blocking-category,
+#fpiIncompatibilityWarning {
+  margin: 3px 0;
+}
+
+#fpiIncompatibilityWarning {
+  background-color: var(--section-highlight-background-color);
+}
+
+#fpiIncompatibilityWarning,
+#contentBlockingCategories {
+  margin-top: 16px;
+}
+
+.content-blocking-category {
+  border-color: var(--in-content-box-border-color);
+}
+
+.content-blocking-category.disabled {
+  opacity: 0.5;
+}
+
+.content-blocking-category.disabled .radio-check {
+  opacity: 1;
+}
+
+.content-blocking-category > .indent {
+  margin-inline-end: 22px;
+}
+
+.arrowhead {
+  border-radius: 2px;
+  min-height: 20px;
+  min-width: 20px;
+  max-height: 20px;
+  max-width: 20px;
+  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  background-color: transparent;
+  padding: 3px;
+}
+
+.arrowhead:not([disabled]):hover {
+  cursor: pointer;
+}
+
+.arrowhead.up {
+  list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
+}
+
+.content-blocking-category.expanded:not(.selected) .reload-tabs {
+  display: none;
+}
+
+.content-blocking-warning.reload-tabs:not([hidden]) {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.content-blocking-reload-desc-container {
+  /* 345px is enough for (almost) twice the size of the default English
+   * string at default font sizes. If this and the button do not fit
+   * on one line, the button will get wrapped to the next line and this
+   * item will stretch to fill all available space. */
+  flex: 1 1 345px;
+  display: flex;
+  align-self: center;
+}
+
+.content-blocking-reload-description {
+  line-height: 1.8em;
+  margin-inline-end: 5px;
+}
+
+.reload-tabs-button {
+  max-height: 30px;
+  min-height: 30px;
+  padding: 0 20px;
+  list-style-image: url("chrome://global/skin/icons/reload.svg");
+  align-self: center;
+}
+
+.reload-tabs-button .button-icon {
+  margin: 0 6px;
+  color: inherit;
+}
+
+.reload-tabs-button .button-text {
+  color: inherit;
+}
+
+.content-blocking-category.selected .content-blocking-warning {
+  background-color: var(--section-highlight-background-color);
+}
+
+.content-blocking-category.selected .arrowhead {
+  display: none;
+}
+
+.content-blocking-category.selected {
+  border-color: var(--in-content-accent-color);
+}
+
+@media (prefers-contrast) {
+  .content-blocking-category.selected {
+    outline: 2px solid var(--in-content-accent-color);
+  }
+}
+
+@media not (prefers-contrast) {
+  .content-blocking-category {
+    background-color: rgba(215, 215, 219, 0.1);
+  }
+
+  .content-blocking-category.selected {
+    background-color: var(--section-highlight-background-color);
+  }
+}
+
+.content-blocking-warning-title,
+.content-blocking-category .radio-label-box {
+  font-weight: bold;
+}
+
+.content-blocking-category:not(.expanded, .selected) .content-blocking-extra-information {
+  visibility: collapse;
+}
+
+.extra-information-label {
+  margin-top: 18px;
+}
+
+/* Apply display: block to the containers of all the category information, as
+ * without this the flex-wrapped blocks inside don't stretch vertically to
+ * enclose their content. */
+.content-blocking-category > .indent {
+  display: block;
+}
+
+.content-blocking-category.expanded .content-blocking-extra-information,
+.content-blocking-category.selected .content-blocking-extra-information {
+  display: flex;
+  flex-direction: column;
+  align-content: stretch;
+}
+
+.content-blocking-extra-information > .indent {
+  margin-bottom: 18px;
+}
+
+.content-blocking-extra-information > .custom-option {
+  margin: 10px 0;
+}
+
+.content-blocking-warning {
+  /* Match .indent's horizontal padding, minus the border added via .info-box-container: */
+  padding-inline: calc(22px - 1px);
+  margin: 10px 0;
+}
+
+.content-blocking-warning:not([hidden]) + .content-blocking-warning {
+  margin-top: 0;
+}
+
+.content-blocking-extra-blocking-desc {
+  margin-inline-start: 0.5em;
+  position: relative;
+  top: 0.65em;
+}
+
+.content-blocking-label {
+  display: list-item;
+  line-height: 1.2em;
+}
+
+.content-blocking-warning-image {
+  list-style-image: url("chrome://global/skin/icons/warning.svg");
+  margin-inline-end: 6px;
+}
+
+#blockCookiesMenu {
+  width: 450px;
+}
+
+#blockCookiesMenu,
+#trackingProtectionMenu {
+  margin: 0;
+}
+
+#changeBlockListLink {
+  margin-inline-start: 56px;
+}
+
+#telemetry-container {
+  margin-block: 4px;
+  line-height: 1.8em;
+  width: 100%;
+}
+
+.content-blocking-category-description {
+  font-size: 90%;
+  opacity: 0.6;
+}
+
+.warning-description {
+  background: url(chrome://global/skin/icons/warning.svg) no-repeat 0 5px;
+  opacity: 0.6;
+  -moz-context-properties: fill, stroke;
+  fill: #d7b600;
+  stroke: white;
+  padding-inline-start: 20px;
+}
+
+.reject-trackers-warning-icon:-moz-locale-dir(rtl) {
+  background-position-x: right 0;
+}
+
+#contentBlockingChangeCookieSettings {
+  padding: 0.25em 0.75em;
+  margin: 4px 8px;
+}
+
+#deleteOnCloseNote {
+  margin-top: 8px;
+  margin-inline-end: 32px;
+}
+
+#submitHealthReportBox {
+  display: -moz-inline-box;
+}
+
+/* Address bar */
+
+.firefoxSuggestOptionBox {
+  /* With this value we're trying to keep the apparent vertical space between
+     option boxes the same as the apparent vertical space between the labels of
+     the checkboxes above the Firefox Suggest subsection. */
+  margin-block-start: 11px;
+}
+
+.firefoxSuggestOptionBox:first-of-type {
+  /* Similar here: Make the apparent vertical space between the last checkbox
+     and first option box the same as elsewhere. */
+  margin-block-start: 5px;
+}
+
+.firefoxSuggestToggle {
+  /* These variables and comments are copied from and override
+     toggle-button.css. We include values for all variables, even those that are
+     the same at the time this comment was written, for sanity and locality of
+     reference. */
+  --button-height: 16px !important;
+  --button-half-height: 8px !important;
+  --button-width: 32px !important;
+  --button-border-width: 1px !important;
+  /* dot-size = button-height - 2*dot-margin - 2*button-border-width */
+  --dot-size: 14px !important;
+  --dot-margin: 0px !important;
+  /* --dot-transform-x = button-width - 2*dot-margin - dot-size - 2*button-border-width */
+  --dot-transform-x: 16px !important;
+}
+
+.firefoxSuggestOptionDescription {
+  /* Prevent the description from flowing under the toggle button.
+     32px = toggle button width
+     1em = a little extra */
+  padding-inline-end: calc(32px + 1em);
+  color: var(--in-content-deemphasized-text);
+}
+
+#firefoxSuggestInfoBox {
+  margin-block-start: 16px;
+  padding: 12px;
+}
+
+#firefoxSuggestInfoBox > description {
+  margin-inline-start: 2px;
+  margin-block: 2px;
+}
+
+#openSearchEnginePreferences {
+  margin-block-start: 6px;
+  line-height: 30px;
+}
+
+#openSearchEnginePreferences.extraMargin {
+  margin-block-start: 24px;
+}
diff --git a/browser/themes/shared/preferences/relay-logo.svg b/browser/themes/shared/preferences/relay-logo.svg
new file mode 100644
index 0000000000..bf99230a1f
--- /dev/null
+++ b/browser/themes/shared/preferences/relay-logo.svg
@@ -0,0 +1,7 @@
+<!-- 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="22" height="22" viewBox="0 0 22 22" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">

+	<path

+		d="M20.054,4.777l-8.112-4.542c-0.579-0.313-1.277-0.313-1.856,0l-8.14,4.542C1.347,5.115,0.977,5.748,0.975,6.434v9.112c-0.005,0.689,0.368,1.324,0.971,1.655l8.112,4.542c0.283,0.17,0.61,0.26,0.942,0.257c0.331-0.001,0.657-0.089,0.943-0.257l8.112-4.542c0.598-0.337,0.969-0.969,0.971-1.655V6.434C21.022,5.748,20.652,5.115,20.054,4.777z M6.421,14.289c-0.054,0.194-0.183,0.357-0.359,0.455l-0.485,0.285c-0.115,0.055-0.243,0.085-0.371,0.087c-0.275-0.004-0.528-0.158-0.657-0.4c-0.1-0.173-0.126-0.381-0.073-0.573c0.054-0.194,0.183-0.357,0.359-0.454l0.481-0.283c0.371-0.228,0.826-0.087,1.033,0.312C6.449,13.889,6.475,14.095,6.421,14.289z M6.348,8.205c-0.131,0.242-0.382,0.396-0.657,0.4C5.562,8.603,5.435,8.574,5.32,8.519L4.834,8.233C4.649,8.141,4.508,7.978,4.447,7.78C4.385,7.582,4.408,7.367,4.51,7.186c0.102-0.18,0.274-0.312,0.474-0.362C5.185,6.773,5.398,6.809,5.573,6.92l0.485,0.285C6.431,7.404,6.572,7.861,6.348,8.205z M9.416,12.576c-0.054,0.193-0.183,0.357-0.357,0.454l-1.001,0.572c-0.115,0.055-0.242,0.084-0.37,0.085c-0.276-0.004-0.527-0.157-0.657-0.4c-0.1-0.173-0.126-0.381-0.073-0.573c0.054-0.192,0.183-0.356,0.359-0.454l1-0.572c0.177-0.095,0.386-0.115,0.579-0.056c0.192,0.059,0.355,0.193,0.448,0.371C9.442,12.176,9.468,12.382,9.416,12.576z M9.343,9.918c-0.131,0.243-0.381,0.396-0.656,0.4c-0.128-0.001-0.256-0.03-0.371-0.085l-1-0.572C6.952,9.442,6.827,8.976,7.03,8.605c0.098-0.176,0.261-0.304,0.454-0.357c0.194-0.054,0.4-0.028,0.573,0.073l1,0.571c0.176,0.098,0.304,0.261,0.357,0.455C9.469,9.537,9.443,9.745,9.343,9.918z M12.342,11.604c-0.081,0.164-0.225,0.287-0.4,0.342v5.793c0,0.426-0.345,0.771-0.771,0.771s-0.771-0.345-0.771-0.771v-5.767c-0.173-0.055-0.318-0.179-0.4-0.342c-0.107-0.203-0.118-0.445-0.028-0.657c-0.091-0.212-0.08-0.454,0.029-0.657c0.081-0.164,0.225-0.287,0.4-0.342V4.206c0-0.426,0.345-0.771,0.771-0.771s0.771,0.345,0.771,0.771v5.741c0.175,0.055,0.319,0.179,0.4,0.344c0.109,0.203,0.12,0.444,0.029,0.656C12.461,11.158,12.45,11.4,12.342,11.604z M15.313,13.26c-0.131,0.242-0.382,0.395-0.657,0.4c-0.128-0.001-0.256-0.03-0.371-0.085l-1-0.572c-0.349-0.212-0.467-0.661-0.267-1.017s0.648-0.487,1.009-0.297l1,0.572C15.398,12.46,15.513,12.946,15.313,13.26z M15.385,9.207c-0.054,0.194-0.183,0.357-0.359,0.455l-1,0.571c-0.115,0.055-0.242,0.085-0.371,0.085c-0.275-0.004-0.527-0.157-0.657-0.4c-0.099-0.173-0.125-0.379-0.071-0.573c0.054-0.194,0.183-0.357,0.359-0.455l1-0.571c0.179-0.095,0.386-0.115,0.58-0.056c0.192,0.059,0.355,0.192,0.45,0.371C15.414,8.807,15.44,9.014,15.385,9.207z M17.798,14.657c-0.131,0.242-0.382,0.396-0.657,0.4c-0.128-0.001-0.256-0.03-0.371-0.085l-0.487-0.286c-0.344-0.213-0.459-0.66-0.258-1.013c0.199-0.352,0.642-0.484,1.002-0.298l0.485,0.285C17.883,13.887,17.997,14.345,17.798,14.657z M17.868,7.806c-0.054,0.192-0.181,0.356-0.356,0.455l-0.485,0.286c-0.115,0.055-0.242,0.084-0.371,0.085c-0.271,0.01-0.525-0.135-0.657-0.371c-0.1-0.173-0.126-0.381-0.073-0.573s0.183-0.356,0.358-0.454l0.487-0.286c0.175-0.099,0.379-0.124,0.573-0.07c0.192,0.054,0.356,0.181,0.455,0.356C17.895,7.407,17.922,7.613,17.868,7.806z"/>

+</svg>

diff --git a/browser/themes/shared/preferences/search-arrow-indicator.svg b/browser/themes/shared/preferences/search-arrow-indicator.svg
new file mode 100644
index 0000000000..8ac83df260
--- /dev/null
+++ b/browser/themes/shared/preferences/search-arrow-indicator.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 10">
+  <defs>
+    <path id="anchor" d="M33 20l5 8H28z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" transform="rotate(90 28 0)">
+    <use fill="#FFEB19" href="#anchor"/>
+    <path stroke="#0C0C0D" stroke-opacity=".2" d="M33 20.94l-4.1 6.56h8.2L33 20.94z"/>
+  </g>
+</svg>
diff --git a/browser/themes/shared/preferences/search-bar.svg b/browser/themes/shared/preferences/search-bar.svg
new file mode 100644
index 0000000000..0f592bf476
--- /dev/null
+++ b/browser/themes/shared/preferences/search-bar.svg
@@ -0,0 +1,25 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="631" height="36">
+  <style>
+    .addressBarOutline {
+      stroke: context-stroke;
+      stroke-linejoin: round;
+      stroke-width: 1px;
+    }
+    .addressBarIcons {
+      fill: context-stroke;
+      fill-rule: evenodd;
+    }
+    .searchBarFill {
+      fill: #0a84ff;
+    }
+  </style>
+  <rect width="630" height="35" x=".5" y=".5" fill="context-fill" class="addressBarOutline" rx="4" ry="4"/>
+  <rect width="314" height="23" x="110.5" y="6.5" fill="rgba(255,255,255,0.05)" class="addressBarOutline" rx="4" ry="4"/>
+  <path d="M604 .5h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574z" class="addressBarIcons"/>  <rect width="115" height="23" x="429.5" y="6.5" fill-opacity=".2" stroke="#0a84ff" rx="4" ry="4" class="searchBarFill"/>
+  <path fill-rule="evenodd" d="M445.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574z" class="searchBarFill"/>
+  <path d="M620.75 17.25h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0 3.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0-7.5h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m-34.98 0a.75.75 0 0 0-.52 1.28l3.18 3.22-3.18 3.22a.746.746 0 1 0 1.05 1.06l3.7-3.75a.774.774 0 0 0 0-1.06l-3.7-3.75a.754.754 0 0 0-.53-.22m4.44 0a.715.715 0 0 0-.52.22.754.754 0 0 0 0 1.06l3.17 3.22-3.17 3.22a.754.754 0 0 0 0 1.06.715.715 0 0 0 .52.22.754.754 0 0 0 .53-.22l3.69-3.75a.754.754 0 0 0 0-1.06l-3.69-3.75a.754.754 0 0 0-.53-.22m-22.84 2.25h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm2.63-3h-9a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5zm-4.5 9H561v-7.5h4.5v7.5zm4.5 0h-3.75v-7.5H570v7.5zm-2.63-4.5h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm0 1.5h.75a.375.375 0 1 0 0-.75h-.75a.375.375 0 0 0 0 .75zm-477.54 2.5a.375.375 0 1 1 .37-.375.356.356 0 0 1-.37.375m-2.6 1.5a.7.7 0 0 1-.742-.75v-4.95l2.961-3 2.97 3V22a.706.706 0 0 1-.74.75h-.74V19a.706.706 0 0 0-.74-.75h-1.49a.706.706 0 0 0-.74.75v3.75h-.739m2.219-10.5a.7.7 0 0 0-.51.225l-5.193 5.25a.738.738 0 1 0 1.037 1.05l.223-.225v4.2a1.5 1.5 0 0 0 1.482 1.5h5.931a1.491 1.491 0 0 0 1.48-1.5v-4.2l.22.225a.678.678 0 0 0 .52.225.663.663 0 0 0 .52-.225.725.725 0 0 0 0-1.05l-5.19-5.25a.709.709 0 0 0-.52-.225M70.375 13a.749.749 0 0 0-.75.75v1.808a5.245 5.245 0 1 0-.788 6.4.75.75 0 0 0-1.061-1.061 3.755 3.755 0 1 1 .776-4.151h-1.927a.75.75 0 0 0 0 1.5h3.75a.749.749 0 0 0 .75-.75v-3.75a.749.749 0 0 0-.75-.75m-34.158 4.296h8.649l-3.206-3.2a.738.738 0 0 1 1.044-1.043l4.474 4.47a.72.72 0 0 1 0 1.043l-4.474 4.47a.72.72 0 0 1-1.044 0 .72.72 0 0 1 0-1.043l3.206-3.2h-8.649a.749.749 0 1 1 0-1.497z" class="addressBarIcons"/>
+  <path d="M23.783 17.292h-8.649l3.206-3.2a.738.738 0 0 0-1.044-1.043l-4.474 4.47a.72.72 0 0 0 0 1.043l4.474 4.47a.72.72 0 0 0 1.044 0 .72.72 0 0 0 0-1.043l-3.206-3.2h8.649a.749.749 0 1 0 0-1.497z" class="addressBarIcons"/>
+</svg>
diff --git a/browser/themes/shared/preferences/search.css b/browser/themes/shared/preferences/search.css
new file mode 100644
index 0000000000..65651e5583
--- /dev/null
+++ b/browser/themes/shared/preferences/search.css
@@ -0,0 +1,100 @@
+/* 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/. */
+
+.searchBarImage {
+  height: 36px;
+  width: 631px;
+  -moz-context-properties: fill, stroke;
+  fill: var(--in-content-box-background);
+  stroke: var(--in-content-box-border-color);
+}
+
+.searchBarImage,
+#searchShowSearchTermCheckbox {
+  margin-inline-start: 33px;
+}
+
+.searchBarImage:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.searchBarHiddenImage {
+  list-style-image: url("chrome://browser/skin/preferences/no-search-bar.svg");
+}
+
+#searchBarShownRadio {
+  /* Allow a little visual space to separate the radio from the image above it. */
+  margin-top: 10px;
+}
+
+.searchBarShownImage {
+  list-style-image: url("chrome://browser/skin/preferences/search-bar.svg");
+}
+
+#defaultEngine,
+#defaultPrivateEngine {
+  margin-inline-start: 0;
+}
+
+#defaultEngine::part(icon),
+#defaultPrivateEngine::part(icon) {
+  height: 16px;
+  width: 16px;
+}
+
+/* work around a display: none in Linux's menu.css, see bug 1112310 */
+.searchengine-menuitem > .menu-iconic-left {
+  display: -moz-box;
+}
+
+#engineList {
+  margin: .5em 0;
+}
+
+#engineList treechildren::-moz-tree-image(engineName) {
+  margin-inline: 1px 10px;
+  width: 16px;
+  height: 16px;
+}
+
+#engineList treechildren::-moz-tree-drop-feedback {
+  background-color: SelectedItem;
+  width: 10000px; /* 100% doesn't work; 10k is hopefully larger than any window
+                     we may have, overflow isn't visible. */
+  height: 2px;
+  margin-inline-start: 0;
+}
+
+#engineList treechildren::-moz-tree-image(bookmarks),
+#engineList treechildren::-moz-tree-image(tabs),
+#engineList treechildren::-moz-tree-image(history) {
+  -moz-context-properties: fill;
+}
+
+/* Local search shortcut icon colors.  These should match the values in
+   urlbarView.inc.css. */
+#engineList treechildren::-moz-tree-image(bookmarks) {
+  fill: #0060df; /* Blue-60 */
+}
+#engineList treechildren::-moz-tree-image(tabs) {
+  fill: #008eaf; /* Teal-70 */
+}
+#engineList treechildren::-moz-tree-image(history),
+#engineList treechildren::-moz-tree-image(bookmarks, selected),
+#engineList treechildren::-moz-tree-image(tabs, selected) {
+  fill: currentColor;
+}
+
+#engineShown {
+  min-width: 26px;
+}
+
+#addEnginesBox {
+  margin-bottom: 1em;
+}
+
+#removeEngineButton,
+#restoreDefaultSearchEngines {
+  margin-inline: 0;
+}
diff --git a/browser/themes/shared/preferences/siteDataSettings.css b/browser/themes/shared/preferences/siteDataSettings.css
new file mode 100644
index 0000000000..c793fb740a
--- /dev/null
+++ b/browser/themes/shared/preferences/siteDataSettings.css
@@ -0,0 +1,64 @@
+/* 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/. */
+
+/**
+ * Site Data - Settings dialog
+ */
+#sitesList {
+  height: 20em;
+}
+
+/* Show selected items in high contrast mode. */
+#sitesList > richlistitem[selected] {
+  outline: 1px solid transparent;
+}
+
+#sitesList > richlistitem > hbox,
+.item-box > label {
+  -moz-box-flex: 1;
+}
+
+.item-box {
+  padding: 5px 8px;
+  -moz-box-align: center;
+  width: 50px;
+}
+
+/**
+ * Confirmation dialog of removing sites selected
+ */
+#SiteDataRemoveSelectedDialog {
+  -moz-box-layout: flex;
+  padding: 16px;
+  min-width: 50px;
+}
+
+#SiteDataRemoveSelectedDialog.single-entry {
+  min-height: 8em;
+}
+
+#SiteDataRemoveSelectedDialog.single-entry .multi-site {
+  display: none;
+}
+
+#SiteDataRemoveSelectedDialog.multi-entry #removalList {
+  max-height: 20em;
+}
+
+#SiteDataRemoveSelectedDialog > dialog {
+  padding: 0; /* override dialog.css */
+}
+
+#contentContainer {
+  font-size: 1.2em;
+  margin-bottom: 10px;
+}
+
+.question-icon {
+  margin: 6px;
+}
+
+#removing-label {
+  font-weight: bold;
+}
diff --git a/browser/themes/shared/preferences/vpn-logo.svg b/browser/themes/shared/preferences/vpn-logo.svg
new file mode 100644
index 0000000000..5300d3bf5c
--- /dev/null
+++ b/browser/themes/shared/preferences/vpn-logo.svg
@@ -0,0 +1,4 @@
+<!-- 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="22" height="22" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 2.256a1.692 1.692 0 1 0 0 3.384 1.692 1.692 0 0 0 0-3.384zM7.05 3.948a3.949 3.949 0 1 1 2.071 3.474l-1.7 1.7c.13.236.234.487.313.75h6.533a3.948 3.948 0 1 1 1.906 4.602l-1.7 1.7a3.949 3.949 0 1 1-1.595-1.597l1.7-1.699a3.916 3.916 0 0 1-.311-.75H7.734a3.95 3.95 0 1 1-1.907-4.603l1.698-1.698a3.931 3.931 0 0 1-.474-1.879zm2.258 14.103a1.692 1.692 0 1 1 3.384 0 1.692 1.692 0 0 1-3.384 0zm-5.36-8.744a1.693 1.693 0 1 0 0 3.385 1.693 1.693 0 0 0 0-3.385zM16.36 11a1.692 1.692 0 1 1 3.384 0 1.692 1.692 0 0 1-3.384 0z"/></svg>
diff --git a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
new file mode 100644
index 0000000000..3af748c9cc
--- /dev/null
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -0,0 +1,458 @@
+/* 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/. */
+
+@import url("chrome://global/skin/in-content/info-pages.css");
+
+@media not (prefers-contrast) {
+html.private {
+  --in-content-page-color: white;
+  --in-content-text-color: white;
+  --in-content-page-background: #25003e;
+  --in-content-link-color-hover: white;
+  --in-content-link-color-active: white;
+  --in-content-banner-background: #f9f9fe;
+  --in-content-banner-text-color: #0c0c0d;
+  --in-content-button-background-hover: rgba(12,12,13,.1);
+  --in-content-button-background-active: rgba(12,12,13,.15);
+}
+}
+
+/**
+ * When the showBanner class is applied, the banner is displayed at the top
+ * of the page, and we need to adjust the padding, so that the banner is
+ * spread across the full page width.
+ */
+body.showBanner {
+  padding: 0 0 40px;
+  min-height: 0;
+}
+
+.showBanner > .showPrivate {
+  padding: 40px 48px 0;
+}
+
+a:link {
+  color: inherit;
+  text-decoration: underline;
+}
+
+a:link:hover {
+  color: inherit;
+}
+
+.container {
+  max-width: 768px;
+}
+
+p {
+  line-height: 1.5em;
+}
+
+.logo-and-wordmark {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 50px;
+}
+
+.logo {
+  /* The new private browsing logo, shown for
+  "browser.privatebrowsing.enable-new-logo" == true */
+  background: url("chrome://branding/content/about-logo-private.png") no-repeat center center;
+  background-size: 96px;
+  display: inline-block;
+  height: 96px;
+  width: 96px;
+}
+
+.logo[legacy] {
+  /* The legacy private browsing logo, shown for
+  "browser.privatebrowsing.enable-new-logo" == false */
+  background-image: url("chrome://branding/content/about-logo.png");
+}
+
+@media (min-resolution: 2x) {
+  .logo {
+    background-image: url('chrome://branding/content/about-logo-private@2x.png');
+  }
+  .logo[legacy] {
+    background-image: url('chrome://branding/content/about-logo@2x.png');
+  }
+}
+
+.wordmark {
+  display: inline-block;
+  background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center;
+  background-size: 172px;
+  margin-inline-start: 15px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  height: 96px;
+  width: 172px;
+}
+
+.search-inner-wrapper {
+  display: flex;
+  height: 48px;
+  padding: 0 22px;
+  min-width: 70vw;
+}
+
+.promo-image-large {
+  margin-inline-end: 6px;
+  min-width: 160px;
+}
+
+.promo-image-small {
+  display: none;
+}
+
+.promo.top {
+  background: rgba(255, 255, 255, .2);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, .3);
+}
+
+.promo.top .promo-image-large {
+  min-width: 100px;
+  margin-inline: 6px;
+}
+
+.promo.top ~ .container {
+  margin-top: 120px;
+}
+
+@media (min-width: 764px) {
+  .search-inner-wrapper {
+    min-width: 680px;
+  }
+
+  .promo-image-large {
+    margin-inline-end: 36px;
+    min-width: 200px;
+  }
+
+  .promo-image-small {
+    display: block;
+  }
+
+  .promo.top {
+    padding: 10px 22%;
+  }
+
+  .promo.top .promo-image-large {
+    min-width: 120px;
+  }
+
+  .promo.top .vpn-promo {
+    margin: 10px 0;
+  }
+}
+
+@media (max-height: 780px) {
+  /* On screens with not enough height we need to push down the content
+   * to make room for the banner */
+  .promo.top ~ .container {
+    margin-top: 140px;
+  }
+}
+
+.search-handoff-button,
+.search-handoff-button:active,
+.search-handoff-button:enabled:hover:active {
+  background: #fff var(--newtab-search-icon) 12px center no-repeat;
+  background-size: 24px;
+  border: solid 1px rgba(249, 249, 250, 0.2);
+  border-radius: 3px;
+  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
+  cursor: text;
+  font-size: 15px;
+  font-weight: normal;
+  margin: 0;
+  padding-block: 0;
+  padding-inline: 46px 48px;
+  position: relative;
+  opacity: 1;
+  width: 100%;
+  -moz-context-properties: fill;
+  fill: rgba(12, 12, 13, 0.4);
+}
+
+.search-handoff-button.focused:not(.disabled) {
+  border: solid 1px #0060df;
+  box-shadow: 0 0 0 1px #0060df, 0 0 0 4px rgba(0, 96, 223, 0.3);
+}
+
+.search-handoff-button.disabled {
+  opacity: 0.5;
+  box-shadow: none;
+}
+
+.search-handoff-button:dir(rtl),
+.search-handoff-button:active:dir(rtl),
+.search-handoff-button:enabled:hover:active:dir(rtl) {
+  background-position-x: right 12px;
+}
+
+.search-inner-wrapper .search-handoff-button:hover,
+.search-inner-wrapper .search-handoff-button:hover:active {
+  background-color: #fff;
+  color: inherit;
+}
+
+.search-handoff-button.focused:not(.disabled) .fake-caret {
+  display: block;
+}
+
+.fake-editable:focus {
+  outline: none;
+  caret-color: transparent;
+}
+
+.fake-editable {
+  border: 0;
+  height: 100%;
+  top: 0;
+  inset-inline-start: 0;
+  opacity: 0;
+  padding: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.fake-textbox {
+  color: rgb(12, 12, 13);
+  opacity: 0.54;
+  text-align: start;
+}
+
+@keyframes caret-animation {
+  to {
+    visibility: hidden;
+  }
+}
+
+.fake-caret {
+  animation: caret-animation 1.3s steps(5, start) infinite;
+  background-color: rgb(12, 12, 13);
+  display: none;
+  inset-inline-start: 47px;
+  height: 17px;
+  position: absolute;
+  top: 16px;
+  width: 1px;
+}
+
+@media (prefers-contrast) {
+  .fake-caret {
+    background-color: ButtonText;
+  }
+}
+
+.search-banner {
+  width: 100%;
+  background-color: var(--in-content-banner-background);
+  color: var(--in-content-banner-text-color);
+}
+
+.banner-body {
+  margin: auto;
+  width: max-content;
+  background-image: url("chrome://global/skin/icons/settings.svg");
+  background-position: left 0 top 50px;
+  background-repeat: no-repeat;
+  background-size: 32px;
+  letter-spacing: -.2px;
+  padding: 50px 0;
+  padding-inline-start: 44px;
+}
+
+.banner-body:dir(rtl) {
+  background-position-x: right;
+}
+
+.banner-body h1 {
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--in-content-banner-text-color);
+  line-height: 1em;
+  margin: 7px 0;
+}
+
+.banner-body p {
+  font-size: 15px;
+  line-height: 1em;
+  margin: 4px 0;
+}
+
+.info {
+  margin-top: 64px;
+  background-color: rgba(0, 0, 0, 0.2);
+  background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
+  background-position: left 32px top 20px;
+  background-repeat: no-repeat;
+  background-size: 32px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  letter-spacing: -0.2px;
+  padding: 20px;
+  padding-inline-start: 76px;
+}
+
+.info:dir(rtl) {
+  background-position-x: right 32px;
+}
+
+.info h1,
+.promo h1 {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 28px;
+}
+
+.info p {
+  margin-top: 0;
+  font-size: 15px;
+  line-height: 25px;
+}
+
+.info #info-title + p {
+  margin-top: 15px;
+}
+
+.search-banner-close-button {
+  float: inline-end;
+  /* min-width and min-height override values set on button elements. */
+  min-width: 28px;
+  min-height: 28px;
+  /* Forcing height and line-height ensure the button hover is displayed correctly
+     as a square box (and focus box). No text gets displayed here so that's ok. */
+  height: 28px;
+  line-height: 0;
+  margin: 16px;
+  padding: 0;
+  background-color: inherit;
+  border: 0;
+}
+
+.search-banner-close-image {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  width: 22px;
+}
+
+.promo {
+  text-align: center;
+  align-items: center;
+}
+
+.promo-visible {
+  display: flex;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.promo-dismiss {
+  padding: 10px;
+  min-width: 16px;
+  min-height: 16px;
+  display: inline flow-root;
+  background: url("chrome://global/skin/icons/close.svg") center no-repeat;
+  cursor: pointer;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  position: relative;
+  top: -90px;
+}
+
+@media not (prefers-contrast) {
+  .promo-dismiss {
+    opacity: 0.6;
+  }
+
+  .promo-dismiss:hover {
+    background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
+  }
+
+  .promo-dismiss:hover:active {
+    background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
+  }
+}
+
+.promo-content {
+  width: 100%;
+}
+
+.promo-image-large img {
+  width: 100%;
+}
+
+.promo-cta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.promo-cta .primary {
+  padding-block: 11px;
+  margin: 8px 0;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.promo.bottom .promo-cta {
+  display: unset;
+}
+
+.promo.bottom h1 {
+  margin-bottom: 1em;
+}
+
+.promo a {
+  color: inherit;
+  text-decoration: underline;
+  flex: 1;
+}
+
+.promo.top a,
+.promo.below-search a {
+  flex: unset;
+}
+
+.promo.top,
+.promo.below-search {
+  text-align: start;
+}
+
+.promo.below-search {
+  padding: 25px 22px 10px;
+  margin-top: 25px;
+}
+
+.promo.bottom {
+  margin-top: 30px;
+}
+
+.promo.bottom .promo-image-small {
+  margin-top: 40px;
+}
+
+.promo.bottom .promo-image-small img {
+  height: 40px;
+}
+
+.promo.top > .promo-content {
+  padding: 10px 6px;
+}
+
+.promo-link {
+  margin: 0;
+  cursor: pointer;
+  color: var(--in-content-link-color-active);
+  text-decoration: underline;
+}
diff --git a/browser/themes/shared/privatebrowsing/favicon.svg b/browser/themes/shared/privatebrowsing/favicon.svg
new file mode 100644
index 0000000000..9a6acd3b16
--- /dev/null
+++ b/browser/themes/shared/privatebrowsing/favicon.svg
@@ -0,0 +1,9 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle fill="#8000D7" cx="8" cy="8" r="7.5"/>
+  <path fill="#FFFFFF" d="M13.948 5.886c-1.143-1.501-3.388-1.693-4.785-.409l-.782.718-.765 0-.782-.718c-1.398-1.284-3.642-1.092-4.786.409-.148.585.081 2.745.21 3.085.26 1.372 1.382 2.404 2.726 2.404.671 0 1.279-.268 1.76-.697l.293-.251a1.451 1.451 0 0 1 1.883-.016l.44.364 0-.002a2.622 2.622 0 0 0 1.652.601c1.344 0 2.466-1.032 2.726-2.404.13-.339.367-2.49.21-3.084z"/>
+  <path fill="#8000D7" d="M5.3 6.843c-.558 0-1.054.233-1.374.594a.519.519 0 0 0 0 .678c.32.362.816.594 1.374.594s1.054-.233 1.374-.594a.519.519 0 0 0 0-.678A1.828 1.828 0 0 0 5.3 6.843z"/>
+  <path fill="#8000D7" d="M10.7 6.843c-.558 0-1.054.233-1.374.594a.519.519 0 0 0 0 .678c.32.362.816.594 1.374.594s1.054-.233 1.374-.594a.519.519 0 0 0 0-.678 1.828 1.828 0 0 0-1.374-.594z"/>
+</svg>
diff --git a/browser/themes/shared/profiler-popup-backdrop.png b/browser/themes/shared/profiler-popup-backdrop.png
new file mode 100644
index 0000000000..675b49a234
--- /dev/null
+++ b/browser/themes/shared/profiler-popup-backdrop.png
diff --git a/browser/themes/shared/protections/breached-password.svg b/browser/themes/shared/protections/breached-password.svg
new file mode 100644
index 0000000000..d080744740
--- /dev/null
+++ b/browser/themes/shared/protections/breached-password.svg
@@ -0,0 +1,6 @@
+<!-- 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="20" height="20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 1.755A1.755 1.755 0 0112.279.081l6.55 2.046A1.67 1.67 0 0120 3.72v12.546c0 .73-.475 1.375-1.171 1.592l-6.551 2.047A1.754 1.754 0 0110 18.232zM7 2a1 1 0 010 2H2.491A.491.491 0 002 4.491V15.51c0 .271.22.491.491.491h4.51a1 1 0 010 2H2.49A2.494 2.494 0 010 15.51V4.49a2.494 2.494 0 012.491-2.49zm8 11.993c-.552 0-1 .45-1 1.004S14.448 16 15 16s1-.449 1-1.003c0-.555-.448-1.004-1-1.004zM15 4a1 1 0 00-1 1v6a1 1 0 002 0V5a1 1 0 00-1-1z" fill="#C50143" fill-rule="evenodd"/>
+</svg>
diff --git a/browser/themes/shared/protections/new-feature.svg b/browser/themes/shared/protections/new-feature.svg
new file mode 100644
index 0000000000..00ae3843a6
--- /dev/null
+++ b/browser/themes/shared/protections/new-feature.svg
@@ -0,0 +1,10 @@
+<!-- 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="20" height="20" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M.066 10.022c0-5.498 4.458-9.956 9.956-9.956 5.498 0 9.956 4.458 9.956 9.956-.008 5.495-4.46 9.948-9.956 9.956-5.498 0-9.956-4.458-9.956-9.956z" fill="#9059FF"/>
+    <path d="M11.64 14.226a.328.328 0 01-.329-.278c-.101-.656-.501-2.45-1.101-3.05-.6-.6-2.407-1-3.053-1.105a.328.328 0 110-.655C7.813 9.026 9.61 8.603 10.213 8c.603-.603 1-2.38 1.102-3.016a.328.328 0 01.328-.276.328.328 0 01.327.269c.115.636.538 2.423 1.138 3.023.6.6 2.387 1.026 3.023 1.138a.328.328 0 110 .655c-.636.105-2.416.505-3.02 1.105-.603.6-1.022 2.41-1.134 3.056a.328.328 0 01-.338.272zM8.661 9.46c.735.21 1.568.528 2.013.984.446.455.764 1.278.984 2.013.22-.735.548-1.57.984-2.013.436-.443 1.275-.761 2.003-.984-.728-.22-1.56-.548-2.003-.984-.443-.436-.77-1.275-.984-2.003-.213.728-.531 1.56-.984 2.003-.452.443-1.275.768-2.013.984zM6.338 15.738a.328.328 0 01-.328-.276c-.069-.43-.262-1.128-.469-1.337-.207-.21-.908-.4-1.338-.47a.328.328 0 01-.275-.327A.328.328 0 014.2 13c.43-.075 1.131-.275 1.341-.485.21-.21.4-.899.469-1.312a.328.328 0 01.328-.275c.161-.002.3.113.328.272.075.423.275 1.115.485 1.311.21.197.901.41 1.311.486a.328.328 0 01.272.328.328.328 0 01-.275.327c-.423.07-1.111.263-1.311.47-.2.206-.41.91-.486 1.34a.328.328 0 01-.324.276zm-.87-2.41c.2.074.384.185.542.328.142.158.253.341.328.54a1.75 1.75 0 01.328-.54c.159-.143.343-.254.544-.328A1.833 1.833 0 016.666 13a1.833 1.833 0 01-.328-.544c-.075.2-.186.385-.328.544a1.75 1.75 0 01-.541.328zM7.05 7.705a.16.16 0 01-.161-.138 2.367 2.367 0 00-.355-.983 2.367 2.367 0 00-.983-.354.16.16 0 01-.138-.161.16.16 0 01.135-.16c.35-.05.685-.174.983-.365.19-.297.311-.633.354-.983a.164.164 0 01.16-.138.16.16 0 01.162.134c.05.35.173.686.363.984.299.19.634.314.984.364a.164.164 0 010 .328c-.35.043-.686.164-.984.354-.19.298-.314.633-.363.983a.16.16 0 01-.158.135zm-.81-1.64c.194.057.374.154.527.286.133.155.23.338.285.534a1.43 1.43 0 01.292-.528c.153-.131.332-.228.525-.285a1.413 1.413 0 01-.525-.292 1.413 1.413 0 01-.292-.524 1.407 1.407 0 01-.285.524 1.43 1.43 0 01-.537.282l.01.004z" fill="#FFF" fill-rule="nonzero"/>
+  </g>
+</svg>
+
diff --git a/browser/themes/shared/protections/resolved-breach-gray.svg b/browser/themes/shared/protections/resolved-breach-gray.svg
new file mode 100644
index 0000000000..0bfda007fa
--- /dev/null
+++ b/browser/themes/shared/protections/resolved-breach-gray.svg
@@ -0,0 +1,9 @@
+<!-- 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="20" height="20" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M10 20a10 10 0 1110-10c-.006 5.52-4.48 9.994-10 10z" fill="#8F8F9D"/>
+    <path d="M8.263 15.296a.881.881 0 01-.613-.252l-2.623-2.622a.875.875 0 011.243-1.233l1.878 1.878 5.492-7.869a.868.868 0 011.422.997l-6.085 8.697a.86.86 0 01-.635.367l-.079.037z" fill="#FFF"/>
+  </g>
+</svg>
diff --git a/browser/themes/shared/protections/resolved-breach.svg b/browser/themes/shared/protections/resolved-breach.svg
new file mode 100644
index 0000000000..274cd570c8
--- /dev/null
+++ b/browser/themes/shared/protections/resolved-breach.svg
@@ -0,0 +1,9 @@
+<!-- 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="20" height="20" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M10 20a10 10 0 1110-10c-.006 5.52-4.48 9.994-10 10z" fill="#2AC3A2"/>
+    <path d="M8.263 15.296a.881.881 0 01-.613-.252l-2.623-2.622a.875.875 0 011.243-1.233l1.878 1.878 5.492-7.869a.868.868 0 011.422.997l-6.085 8.697a.86.86 0 01-.635.367l-.079.037z" fill="#FFF"/>
+  </g>
+</svg>
diff --git a/browser/themes/shared/search/search-engine-placeholder.png b/browser/themes/shared/search/search-engine-placeholder.png
new file mode 100644
index 0000000000..bff355bf48
--- /dev/null
+++ b/browser/themes/shared/search/search-engine-placeholder.png
diff --git a/browser/themes/shared/search/search-engine-placeholder@2x.png b/browser/themes/shared/search/search-engine-placeholder@2x.png
new file mode 100644
index 0000000000..1565fc55df
--- /dev/null
+++ b/browser/themes/shared/search/search-engine-placeholder@2x.png
diff --git a/browser/themes/shared/search/search-indicator-badge-add.svg b/browser/themes/shared/search/search-indicator-badge-add.svg
new file mode 100644
index 0000000000..eef74b2c72
--- /dev/null
+++ b/browser/themes/shared/search/search-indicator-badge-add.svg
@@ -0,0 +1,8 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
+  <circle fill="#fff" cx="5.5" cy="5.5" r="5.5"/>
+  <circle fill="#12bc00" class="cls-2" cx="5.5" cy="5.5" r="4.5"/>
+  <path fill="#fff" d="M7.5 6H6v1.5a.5.5 0 0 1-1 0V6H3.5a.5.5 0 0 1 0-1H5V3.5a.5.5 0 0 1 1 0V5h1.5a.5.5 0 0 1 0 1z"/>
+</svg>
diff --git a/browser/themes/shared/searchbar.css b/browser/themes/shared/searchbar.css
new file mode 100644
index 0000000000..9afb692ddd
--- /dev/null
+++ b/browser/themes/shared/searchbar.css
@@ -0,0 +1,180 @@
+/* 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/. */
+
+.searchbar-engine-image {
+  width: 16px;
+  height: 16px;
+  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.search-one-offs:not([hidden]) {
+  display: block;
+  width: 100%;
+}
+
+.search-panel-one-offs-header {
+  display: block;
+}
+
+.search-panel-header {
+  font-weight: normal;
+  margin: 0;
+}
+
+.search-panel-header > label {
+  margin-top: 2px;
+  margin-bottom: 1px;
+  opacity: .6;
+}
+
+/* Make the contrast stronger in dark mode */
+:root[lwt-toolbar-field-focus-brighttext] .search-panel-header > label {
+  opacity: 1;
+}
+
+/**
+ * The borders of the various elements are specified as follows.
+ *
+ * The current engine always has a bottom border.
+ * The search results never have a border.
+ *
+ * When the search results are not collapsed:
+ * - The elements underneath the search results all have a top border.
+ *
+ * When the search results are collapsed:
+ * - The elements underneath the search results all have a bottom border.
+ */
+
+.search-panel-current-engine {
+  -moz-box-align: center;
+  border-top: none !important;
+  padding-inline: 8px;
+}
+
+.search-panel-one-offs:not([hidden]),
+.search-panel-one-offs-container {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
+
+.search-panel-one-offs {
+  margin: 0 !important;
+  /* Bug 1108841: prevent font-size from affecting the layout */
+  line-height: 0;
+  flex-wrap: wrap;
+}
+
+.searchbar-engine-one-off-item {
+  appearance: none;
+  display: -moz-inline-box;
+  background-color: transparent;
+  border: none;
+  min-width: 32px;
+  height: 32px;
+  margin-inline-end: 8px;
+  margin-block: 0;
+  padding: 0;
+  color: inherit;
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+@media (-moz-platform: windows) {
+  .searchbar-engine-one-off-item:focus-visible {
+    outline: none;
+  }
+}
+
+/* We don't handle `:active` because it doesn't work on the search or settings
+   buttons due to event.preventDefault() in SearchOneOffs._on_mousedown(). */
+.searchbar-engine-one-off-item:not([selected]):hover {
+  background-color: var(--autocomplete-popup-hover-background);
+  color: inherit;
+}
+
+.searchbar-engine-one-off-item[selected] {
+  background-color: var(--autocomplete-popup-highlight-background);
+  color: var(--autocomplete-popup-highlight-color);
+}
+
+.searchbar-engine-one-off-item > .button-box > .button-text {
+  display: none;
+}
+
+.searchbar-engine-one-off-item > .button-box > .button-icon {
+  margin-inline: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.search-panel-tree {
+  background: transparent;
+  color: inherit;
+}
+
+.search-panel-tree > .autocomplete-richlistitem {
+  padding: 1px 3px;
+}
+
+.search-panel-tree > .autocomplete-richlistitem:hover {
+  background-color: var(--autocomplete-popup-hover-background);
+}
+
+.search-panel-tree > .autocomplete-richlistitem > .ac-type-icon {
+  display: -moz-box;
+  width: 14px;
+  height: 14px;
+  margin-inline-end: 7px;
+}
+
+.search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"] > .ac-type-icon {
+  list-style-image: url("chrome://browser/skin/history.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+  fill-opacity: 0.6;
+}
+
+.search-panel-tree > .autocomplete-richlistitem[originaltype="fromhistory"][selected] > .ac-type-icon {
+  fill-opacity: 1;
+}
+
+.searchbar-separator {
+  appearance: none;
+  margin: var(--panel-separator-margin);
+  padding: 0;
+  border: 0;
+  border-top: 1px solid var(--autocomplete-popup-separator-color);
+  color: inherit;
+}
+
+.search-panel-tree[collapsed=true] + .searchbar-separator {
+  display: none;
+}
+
+.search-setting-button {
+  max-height: 32px;
+  align-self: end;
+  margin-inline: 0;
+}
+
+.search-setting-button > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
+}
+
+@media (-moz-platform: windows-win10) {
+  #PopupSearchAutoComplete {
+    --panel-border-radius: var(--arrowpanel-border-radius);
+  }
+}
+
+@media (-moz-platform: macos) {
+  #PopupSearchAutoComplete {
+    border-radius: 4px;
+  }
+}
diff --git a/browser/themes/shared/setDesktopBackground.css b/browser/themes/shared/setDesktopBackground.css
new file mode 100644
index 0000000000..768bc7c949
--- /dev/null
+++ b/browser/themes/shared/setDesktopBackground.css
@@ -0,0 +1,23 @@
+/* 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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+html|canvas#screen {
+  border-style: solid;
+  border-width: 12px 11px;
+  border-image: url("chrome://browser/skin/monitor-border.png") 12 11 stretch;
+}
+
+#monitor-base {
+  list-style-image: url("chrome://browser/skin/monitor-base.png");
+}
+
+html|p#preview-unavailable {
+  margin: 12px 11px;
+  text-align: center;
+  color: #9B2423;
+  font-weight: bold;
+}
diff --git a/browser/themes/shared/sidebar.css b/browser/themes/shared/sidebar.css
new file mode 100644
index 0000000000..fb879bc73f
--- /dev/null
+++ b/browser/themes/shared/sidebar.css
@@ -0,0 +1,135 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+#sidebar-box {
+  --sidebar-background-color: Field;
+  --sidebar-text-color: FieldText;
+  background-color: var(--sidebar-background-color);
+  color: var(--sidebar-text-color);
+  text-shadow: none;
+}
+
+#sidebar-header {
+  font-size: 1.333em;
+  padding: 8px;
+  border-bottom: 1px solid var(--sidebar-border-color);
+}
+
+#sidebar-spacer {
+  /* To ensure the button doesn't expand unnecessarily for short labels, the
+     spacer should significantly out-flex the button. */
+  -moz-box-flex: 1000;
+}
+
+#sidebar {
+  -moz-box-flex: 1;
+}
+
+@media not (-moz-platform: linux) {
+  /* We don't let the splitter overlap the sidebar on Linux since the sidebar's
+  scrollbar is too narrow on Linux. */
+  .sidebar-splitter {
+    appearance: none;
+    border: 0 solid;
+    border-inline-end-width: 1px;
+    border-color: var(--sidebar-border-color);
+    min-width: 1px;
+    width: 4px;
+    background-image: none !important;
+    background-color: transparent;
+    margin-inline-start: -4px;
+    position: relative;
+  }
+
+  #sidebar-box[positionend] + .sidebar-splitter {
+    border-inline-width: 1px 0;
+    margin-inline: 0 -4px;
+  }
+}
+
+#sidebar-throbber[loading="true"] {
+  list-style-image: url("chrome://global/skin/icons/loading.png");
+}
+
+@media (min-resolution: 2dppx) {
+  #sidebar-throbber[loading="true"] {
+    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
+    width: 16px;
+  }
+}
+
+#sidebar-title {
+  margin: 0;
+  padding: 0;
+  padding-inline: 8px 4px;
+  -moz-box-flex: 1;
+}
+
+#sidebar-switcher-arrow {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.8;
+}
+
+#sidebar-switcher-arrow {
+  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  width: 12px;
+  height: 12px;
+}
+
+#sidebar-switcher-target {
+  appearance: none;
+  color: inherit;
+  margin-inline-end: 4px;
+  border-radius: var(--toolbarbutton-border-radius);
+  border: 1px solid transparent;
+  padding: 2px 4px;
+  -moz-box-flex: 1;
+}
+
+#sidebar-switcher-target:hover {
+  background-color: var(--toolbarbutton-hover-background);
+}
+
+#sidebar-switcher-target:hover:active,
+#sidebar-switcher-target.active {
+  background-color: var(--toolbarbutton-active-background);
+}
+
+#sidebar-switcher-target:focus-visible,
+#sidebar-close:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 0;
+}
+
+#sidebarMenu-popup .subviewbutton {
+  min-width: 190px;
+}
+
+toolbarseparator + #sidebar-extensions-separator {
+  display: none;
+}
+
+#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+  list-style-image: url(chrome://browser/skin/bookmark.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.8;
+}
+
+#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+  list-style-image: url(chrome://browser/skin/history.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.8;
+}
+
+#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
+  list-style-image: url(chrome://browser/skin/synced-tabs.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.8;
+}
diff --git a/browser/themes/shared/spotlight.css b/browser/themes/shared/spotlight.css
new file mode 100644
index 0000000000..8f09943238
--- /dev/null
+++ b/browser/themes/shared/spotlight.css
@@ -0,0 +1,85 @@
+/* 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/. */
+
+/* Whether this is actually still required
+ * is not totally clear, but better to be safe than sorry:
+ *
+ * For some reason SubDialog browser sizing can result in scrollbars, so just
+ * hide the horizontal scrollbar that would have then required vertical
+ * scrollbar. This should be okay as we wrap content for this fixed width
+ * dialog unless the window is actually narrow and really does need
+ * horizontal scrollbars. */
+@media (min-width: 544px) {
+body {
+  overflow-x: hidden;
+}
+}
+
+body {
+  padding: 20px 40px;
+  /* Keep as multiple of 4px. Match min-width media query above + padding. */
+  width: 464px;
+}
+
+#dialog-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  text-align: center;
+}
+
+.logo {
+  width: 100px;
+  height: 100px;
+  object-fit: contain;
+  margin-bottom: 8px;
+}
+
+#title {
+  font-weight: 500;
+  font-size: 26px;
+  margin-bottom: 0;
+  white-space: pre-wrap;
+}
+
+#content {
+  font-weight: 400;
+  font-size: 13px;
+  margin-block: 10px 18px;
+}
+
+#learn-more-toggle::after {
+  background: url("chrome://global/skin/icons/arrow-right.svg") center / 12px no-repeat;
+  content: "";
+  -moz-context-properties: fill;
+  fill: currentColor;
+  padding-inline: .5em;
+}
+
+#learn-more-toggle:dir(rtl)::after {
+  background-image: url("chrome://global/skin/icons/arrow-left.svg");
+}
+
+#learn-more-toggle[aria-expanded="true"]::after {
+  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+}
+
+#learn-more-toggle[aria-expanded="false"] + .expanded {
+  visibility: hidden;
+}
+
+.expanded {
+  margin-bottom: 0;
+}
+
+#primary {
+  font-size: 13px;
+}
+
+#secondary {
+  /* make the font look like the mock */
+  font-size: 13px;
+  padding: 4px;
+}
diff --git a/browser/themes/shared/swipe-gesture-icons/history-swipe-arrow.svg b/browser/themes/shared/swipe-gesture-icons/history-swipe-arrow.svg
new file mode 100644
index 0000000000..db91aff0c8
--- /dev/null
+++ b/browser/themes/shared/swipe-gesture-icons/history-swipe-arrow.svg
@@ -0,0 +1,15 @@
+<!-- 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="768" height="768" xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <filter id="f1" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="30" />
+    </filter>
+  </defs>
+
+  <ellipse ry="260" rx="260" cy="384" cx="384" stroke-width="0" stroke="#000" fill="context-fill rgba(0,0,0,0)" filter="url(#f1)"/>
+  <ellipse ry="256" rx="256" cy="384" cx="384" stroke-width="0" stroke="#000" fill="#38383d"/>
+  <path d="M 496.10297,368.34523 H 310.64452 l 68.71849,-68.71857 a 16.007116,16.007116 0 0 0 -22.63403,-22.63404 l -96.04269,96.04264 a 16.007116,16.007116 0 0 0 0,22.63331 l 96.04269,96.04274 a 16.007116,16.007116 0 0 0 22.63403,-22.63405 L 310.64452,400.3587 h 185.45845 a 16.007116,16.007116 0 0 0 0,-32.01347 z" fill="rgba(249, 249, 250, .8)" />
+</svg>
diff --git a/browser/themes/shared/syncedtabs/sidebar.css b/browser/themes/shared/syncedtabs/sidebar.css
new file mode 100644
index 0000000000..406bfc71e4
--- /dev/null
+++ b/browser/themes/shared/syncedtabs/sidebar.css
@@ -0,0 +1,371 @@
+/* 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/. */
+
+/* These styles are intended to mimic XUL trees and the XUL search box. */
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  font: message-box;
+  background-color: Field;
+  color: FieldText;
+  user-select: none;
+}
+
+/* The content-container holds the non-scrollable header and the scrollable
+   content area.
+*/
+.content-container {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+
+/* The content header is not scrollable */
+.content-header {
+  flex: 0 1 auto;
+}
+
+/* The main content area is scrollable and fills the rest of the area */
+.content-scrollable {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.emptyListInfo {
+  cursor: default;
+  padding: 3em 1em;
+  text-align: center;
+}
+
+.list,
+.item-tabs-list {
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
+}
+
+.item.client {
+  opacity: 1;
+  max-height: unset;
+  display: unset;
+}
+
+.item.client.closed .item-tabs-list {
+  display: none;
+}
+
+.item {
+  display: inline-block;
+  opacity: 1;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  outline: none;
+}
+
+.item.selected > .item-title-container {
+  background-color: -moz-cellhighlight;
+  color: -moz-cellhighlighttext;
+}
+
+.item.selected:focus > .item-title-container {
+  background-color: SelectedItem;
+  color: SelectedItemText;
+}
+
+.item.client .item-twisty-container {
+  min-width: 12px;
+  height: 12px;
+  background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.item.client.closed .item-twisty-container {
+  background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
+}
+
+.item.client.closed .item-twisty-container:dir(rtl) {
+  background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
+}
+
+.client .item.tab > .item-title-container {
+  padding-inline-start: 35px;
+}
+
+.item.tab > .item-title-container {
+  padding-inline-start: 20px;
+}
+
+.item.client[clientType] > .item-title-container > .item-icon-container {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.item.client[clientType=phone] > .item-title-container > .item-icon-container {
+  background-image: url("chrome://browser/skin/device-phone.svg");
+}
+
+.item.client[clientType=tablet] > .item-title-container > .item-icon-container {
+  background-image: url("chrome://browser/skin/device-tablet.svg");
+}
+
+.item.client[clientType=desktop] > .item-title-container > .item-icon-container {
+  background-image: url("chrome://browser/skin/device-desktop.svg");
+}
+
+.item.client[clientType=tv] > .item-title-container > .item-icon-container {
+  background-image: url("chrome://browser/skin/device-tv.svg");
+}
+
+.item.client[clientType=vr] > .item-title-container > .item-icon-container {
+  background-image: url("chrome://browser/skin/device-vr.svg");
+}
+
+.item.tab > .item-title-container > .item-icon-container {
+  background-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.item-icon-container {
+  min-width: 16px;
+  max-width: 16px;
+  min-height: 16px;
+  max-height: 16px;
+  margin-inline: 5px;
+  background-size: 16px 16px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.item-title-container {
+  display: flex;
+  flex-flow: row;
+  overflow: hidden;
+  flex-grow: 1;
+  align-items: center;
+  padding: 4px;
+}
+
+.item-title {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 1px 0 0;
+  margin-inline-end: 6px;
+  line-height: 1.3;
+  cursor: default;
+}
+
+.item[hidden] {
+  opacity: 0;
+  max-height: 0;
+  transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
+}
+
+.item.empty .item-title-container {
+  color: #aeaeae;
+}
+
+.client .item.empty > .item-title-container {
+  padding-inline-start: 35px;
+}
+
+.sync-state > p {
+  padding-inline: 10px;
+}
+
+.text-link {
+  color: rgb(0, 149, 221);
+  cursor: pointer;
+}
+
+.text-link:hover {
+  text-decoration: underline;
+}
+
+.text-link,
+.text-link:focus {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.deck .sync-state {
+  display: none;
+  opacity: 0;
+  transition: opacity 1.5s;
+  border-top: 1px solid #bdbdbd;
+}
+
+.deck .sync-state.tabs-container {
+  border-top: 0;
+}
+
+.deck .sync-state.selected {
+  display: unset;
+  opacity: 100;
+}
+
+.deck .syncIllustration,
+.deck .syncIllustrationIssue {
+  height: 174px;
+  margin: 38px 8px 15px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.deck .syncIllustration {
+  background-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
+}
+
+.deck .syncIllustrationIssue {
+  background-image: url(chrome://browser/skin/fxa/sync-illustration-issue.svg);
+}
+
+.deck .instructions {
+  text-align: center;
+  color: GrayText;
+  padding: 0 11px;
+  max-width: 15em;
+  margin: 0 auto;
+}
+
+body[lwt-sidebar] .deck .instructions {
+  color: inherit;
+  opacity: .6;
+}
+
+.deck .button {
+  display: block;
+  background-color: #0060df;
+  color: white;
+  border: 0;
+  border-radius: 2px;
+  margin: 15px auto;
+  padding: 8px;
+  text-shadow: none;
+  width: calc(100% - 22px);
+  max-width: 200px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.deck .button:hover {
+  background-color: #003eaa;
+}
+
+.deck .button:hover:active {
+  background-color: #002275;
+}
+
+.sidebar-search-container {
+  display: flex;
+  padding: 4px;
+}
+
+.sidebar-search-container:not(.selected) {
+  display: none;
+}
+
+.tabsFilter {
+  flex-grow: 1;
+}
+
+/* Themed sidebars */
+
+body[lwt-sidebar] {
+  background-color: var(--lwt-sidebar-background-color);
+  color: var(--lwt-sidebar-text-color);
+  scrollbar-color: rgba(204,204,204,.5) rgba(230,230,235,.5);
+}
+
+body[lwt-sidebar-brighttext] {
+  scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
+}
+
+body[lwt-sidebar] .item.selected > .item-title-container {
+  background-color: hsla(0,0%,80%,.3);
+  color: inherit;
+}
+
+body[lwt-sidebar-brighttext] .item.selected > .item-title-container {
+  background-color: rgba(249,249,250,.1);
+}
+
+body[lwt-sidebar-highlight] .item.selected:focus > .item-title-container {
+  background-color: var(--lwt-sidebar-highlight-background-color);
+  color: var(--lwt-sidebar-highlight-text-color);
+}
+
+/* Apply crisp rendering for favicons at exactly 2dppx resolution */
+@media (resolution: 2dppx) {
+  .tabs-container .item-tabs-list .item-icon-container {
+    image-rendering: -moz-crisp-edges;
+  }
+}
+
+/* Platform specific styling */
+@media (-moz-platform: macos) {
+  body {
+     /* let the -moz-appearance of the sidebar shine through */
+    background-color: transparent;
+  }
+
+  .item-title-container {
+    box-sizing: border-box;
+    align-items: center;
+    height: 24px;
+    font-size: 12px;
+  }
+
+  .item-title {
+    margin: 0;
+  }
+
+  body:not([lwt-sidebar]) .item.selected:not(:focus) > .item-title-container {
+    appearance: auto;
+    -moz-default-appearance: -moz-mac-source-list-selection;
+    -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
+  }
+
+  body:not([lwt-sidebar-highlight]) .item.selected:focus > .item-title-container {
+    appearance: auto;
+    -moz-default-appearance: -moz-mac-active-source-list-selection;
+    -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
+  }
+}
+
+@media (-moz-platform: windows) {
+  .client .item.tab > .item-title-container {
+    padding-inline-start: 26px;
+  }
+
+  .item.tab > .item-title-container {
+    padding-inline-start: 14px;
+  }
+
+  .item-icon-container {
+    min-width: 16px;
+    max-width: 16px;
+    min-height: 16px;
+    max-height: 16px;
+    margin-inline-end: 5px;
+    background-size: 16px 16px;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+}
diff --git a/browser/themes/shared/tab-list-tree.css b/browser/themes/shared/tab-list-tree.css
new file mode 100644
index 0000000000..ed60f26df1
--- /dev/null
+++ b/browser/themes/shared/tab-list-tree.css
@@ -0,0 +1,50 @@
+/* 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/. */
+
+/* This file is used by both about:sessionrestore and about:welcomeback */
+
+.tab-list-tree-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+}
+
+treechildren::-moz-tree-image(icon),
+treechildren::-moz-tree-image(noicon) {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  padding-inline-end: 2px;
+  margin: 0 2px;
+  width: 16px;
+  height: 16px;
+}
+
+treechildren::-moz-tree-image(noicon) {
+  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+}
+
+treechildren::-moz-tree-image(container, noicon) {
+  list-style-image: url("chrome://browser/skin/window.svg");
+}
+
+treechildren::-moz-tree-image(checked),
+treechildren::-moz-tree-image(partial) {
+  -moz-context-properties: fill, stroke;
+  fill: var(--in-content-accent-color);
+}
+
+treechildren::-moz-tree-image(checked, selected),
+treechildren::-moz-tree-image(partial, selected) {
+  fill: var(--in-content-item-selected-text);
+  stroke: var(--in-content-item-selected);
+}
+
+treechildren::-moz-tree-image(checked) {
+  list-style-image: url("chrome://global/skin/icons/check.svg");
+}
+
+treechildren::-moz-tree-image(partial) {
+  list-style-image: url("chrome://global/skin/icons/check-partial.svg");
+}
diff --git a/browser/themes/shared/tabbrowser/connecting.png b/browser/themes/shared/tabbrowser/connecting.png
new file mode 100644
index 0000000000..e564fb5708
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/connecting.png
diff --git a/browser/themes/shared/tabbrowser/connecting@2x.png b/browser/themes/shared/tabbrowser/connecting@2x.png
new file mode 100644
index 0000000000..97e2b2eb67
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/connecting@2x.png
diff --git a/browser/themes/shared/tabbrowser/crashed.svg b/browser/themes/shared/tabbrowser/crashed.svg
new file mode 100644
index 0000000000..85f3d85141
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/crashed.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="22 22 16 16">

+  <defs>

+    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="30" y1="23" x2="30" y2="37">

+      <stop offset="0" style="stop-color: #e63b2e"/>

+      <stop offset="1" style="stop-color: #c33931"/>

+    </linearGradient>

+  </defs>

+  <circle fill="url(#gradient)" cx="30" cy="30" r="7"/>

+  <path fill="#fff" d="M31.03,33.304c0,0.6-0.479,1.092-1.091,1.092c-0.6,0-1.079-0.492-1.079-1.092 c0-0.588,0.479-1.079,1.079-1.079C30.551,32.225,31.03,32.716,31.03,33.304z M29.171,31.133l-0.24-5.253h2.015l-0.24,5.253H29.171z"/>

+</svg>

diff --git a/browser/themes/shared/tabbrowser/hourglass.svg b/browser/themes/shared/tabbrowser/hourglass.svg
new file mode 100644
index 0000000000..4687846c91
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/hourglass.svg
@@ -0,0 +1,9 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="context-fill" d="M13,1 C13.5522847,1 14,1.44771525 14,2 C14,2.55228475 13.5522847,3 13,3 L12.9854217,2.99990801 C12.9950817,3.16495885 13,3.33173274 13,3.5 C13,5.24679885 10.9877318,6.01090495 10.9877318,8.0017538 C10.9877318,9.99260264 13,10.7536922 13,12.5 C13,12.6686079 12.9950617,12.8357163 12.985363,13.0010943 L13,13 C13.5522847,13 14,13.4477153 14,14 C14,14.5522847 13.5522847,15 13,15 L3,15 C2.44771525,15 2,14.5522847 2,14 C2,13.4477153 2.44771525,13 3,13 L3.01463704,13.0010943 C3.00493827,12.8357163 3,12.6686079 3,12.5 C3,10.7536922 4.9877318,9.99260264 5,8.0017538 C5.0122682,6.01090495 3,5.24679885 3,3.5 C3,3.33173274 3.00491834,3.16495885 3.01457832,2.99990801 L3,3 C2.44771525,3 2,2.55228475 2,2 C2,1.44771525 2.44771525,1 3,1 L13,1 Z M10.987,3 L5.012,3 L5.00308914,3.24815712 C5.00103707,3.33163368 5,3.4155948 5,3.5 C5,5.36125069 6.99153646,6.01774089 6.99153646,8.0017538 C6.99153646,9.98576671 5,10.6393737 5,12.5 L5.00307746,12.7513676 L5.01222201,12.9998392 L5.60191711,12.9988344 L6.0425138,12.2959826 C7.02362731,10.7653275 7.67612271,10 8,10 C8.37014547,10 9.16950644,10.9996115 10.3980829,12.9988344 L10.987778,12.9998392 C10.9958674,12.8352104 11,12.66849 11,12.5 C11,10.6393737 8.98689779,10.0147381 8.98689779,8.0017538 C8.98689779,5.98876953 11,5.36125069 11,3.5 L10.9969109,3.24815712 L10.987,3 Z"/>
+    <path fill="context-fill" d="M6,4 L10,4 C8.95166016,6 8.28499349,7 8,7 C7.71500651,7 7.04833984,6 6,4 Z"/>
+  </g>
+</svg>
diff --git a/browser/themes/shared/tabbrowser/loading-burst.svg b/browser/themes/shared/tabbrowser/loading-burst.svg
new file mode 100644
index 0000000000..cd4aeec314
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/loading-burst.svg
@@ -0,0 +1,6 @@
+<!-- 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 viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="5" cy="5" r="5" fill="context-fill"/>
+</svg>
diff --git a/browser/themes/shared/tabbrowser/loading.svg b/browser/themes/shared/tabbrowser/loading.svg
new file mode 100644
index 0000000000..1bc5843781
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/loading.svg
@@ -0,0 +1,98 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="480" height="16" fill="context-fill">
+  <svg>
+    <path d="M2.062 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="16">
+    <path d="M3.613 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="32">
+    <path d="M6.352 6.057c1.214 0 2.2 0.87 2.2 1.943 0 1.072 -0.986 1.943 -2.2 1.943 -1.214 0 -2.2 -0.87 -2.2 -1.943 0 -1.072 0.986 -1.943 2.2 -1.943z"/>
+  </svg>
+  <svg x="48">
+    <path d="M8.338 6.171c1.435 0 2.6 0.82 2.6 1.829 0 1.01 -1.165 1.829 -2.6 1.829s-2.6 -0.82 -2.6 -1.829c0 -1.01 1.165 -1.829 2.6 -1.829z"/>
+  </svg>
+  <svg x="64">
+    <path d="M9.762 6.286c1.655 0 3 0.768 3 1.714s-1.345 1.714 -3 1.714c-1.656 0 -3 -0.768 -3 -1.714s1.344 -1.714 3 -1.714z"/>
+  </svg>
+  <svg x="80">
+    <path d="M10.828 6.4c1.877 0 3.4 0.717 3.4 1.6 0 0.883 -1.523 1.6 -3.4 1.6 -1.876 0 -3.4 -0.717 -3.4 -1.6 0 -0.883 1.524 -1.6 3.4 -1.6z"/>
+  </svg>
+  <svg x="96">
+    <path d="M11.648 6.3c1.683 0 3.05 0.762 3.05 1.7s-1.367 1.7 -3.05 1.7c-1.683 0 -3.05 -0.762 -3.05 -1.7s1.367 -1.7 3.05 -1.7z"/>
+  </svg>
+  <svg x="112">
+    <path d="M12.287 6.2c1.49 0 2.7 0.807 2.7 1.8s-1.21 1.8 -2.7 1.8c-1.49 0 -2.7 -0.807 -2.7 -1.8s1.21 -1.8 2.7 -1.8z"/>
+  </svg>
+  <svg x="128">
+    <path d="M12.785 6.1c1.297 0 2.35 0.851 2.35 1.9s-1.053 1.9 -2.35 1.9c-1.297 0 -2.35 -0.851 -2.35 -1.9s1.053 -1.9 2.35 -1.9z"/>
+  </svg>
+  <svg x="144">
+    <path d="M13.17 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+  </svg>
+  <svg x="160">
+    <path d="M13.463 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="176">
+    <path d="M13.677 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="192">
+    <path d="M13.823 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="208">
+    <path d="M13.911 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="224">
+    <path d="M13.947 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="240">
+    <path d="M13.937 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="256">
+    <path d="M13.27 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+  </svg>
+  <svg x="272">
+    <path d="M10.65 6.057c1.182 0 2.142 0.87 2.142 1.943 0 1.072 -0.96 1.943 -2.143 1.943 -1.182 0 -2.142 -0.87 -2.142 -1.943 0 -1.072 0.96 -1.943 2.142 -1.943z"/>
+  </svg>
+  <svg x="288">
+    <path d="M7.911 6.171c1.34 0 2.429 0.82 2.429 1.829 0 1.01 -1.088 1.829 -2.429 1.829 -1.34 0 -2.428 -0.82 -2.428 -1.829 0 -1.01 1.088 -1.829 2.428 -1.829z"/>
+  </svg>
+  <svg x="304">
+    <path d="M6.18 6.286c1.498 0 2.715 0.768 2.715 1.714s-1.217 1.714 -2.715 1.714c-1.498 0 -2.714 -0.768 -2.714 -1.714s1.216 -1.714 2.714 -1.714z"/>
+  </svg>
+  <svg x="320">
+    <path d="M5.01 6.4c1.655 0 3 0.717 3 1.6 0 0.883 -1.345 1.6 -3 1.6 -1.656 0 -3 -0.717 -3 -1.6 0 -0.883 1.344 -1.6 3 -1.6z"/>
+  </svg>
+  <svg x="336">
+    <path d="M4.167 6.3c1.518 0 2.75 0.762 2.75 1.7s-1.232 1.7 -2.75 1.7 -2.75 -0.762 -2.75 -1.7 1.232 -1.7 2.75 -1.7z"/>
+  </svg>
+  <svg x="352">
+    <path d="M3.54 6.2c1.38 0 2.5 0.807 2.5 1.8s-1.12 1.8 -2.5 1.8 -2.5 -0.807 -2.5 -1.8 1.12 -1.8 2.5 -1.8z"/>
+  </svg>
+  <svg x="368">
+    <path d="M3.069 6.1c1.241 0 2.25 0.851 2.25 1.9s-1.009 1.9 -2.25 1.9c-1.242 0 -2.25 -0.851 -2.25 -1.9s1.008 -1.9 2.25 -1.9z"/>
+  </svg>
+  <svg x="384">
+    <path d="M2.714 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="400">
+    <path d="M2.452 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="416">
+    <path d="M2.266 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="432">
+    <path d="M2.142 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="448">
+    <path d="M2.071 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="464">
+    <path d="M2.046 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+  </svg>
+  <svg x="480">
+    <path d="M2.062 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+</svg>
diff --git a/browser/themes/shared/tabbrowser/pendingpaint.png b/browser/themes/shared/tabbrowser/pendingpaint.png
new file mode 100644
index 0000000000..1a97feeeb3
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/pendingpaint.png
diff --git a/browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg b/browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg
new file mode 100644
index 0000000000..14a59803f3
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/tab-audio-blocked-small.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+  <circle cx="6" cy="6" r="5" fill="context-stroke"/>
+  <path d="M6 1.5c2.5 0 4.5 2 4.5 4.5s-2 4.5-4.5 4.5-4.5-2-4.5-4.5 2-4.5 4.5-4.5m0-1C3 .5.5 3 .5 6S3 11.5 6 11.5 11.5 9 11.5 6 9 .5 6 .5zM4.2 8V4c0-.4.4-.6.7-.4l3.5 2c.3.2.3.7 0 .9L5 8.4c-.3.2-.8 0-.8-.4z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>
diff --git a/browser/themes/shared/tabbrowser/tab-audio-muted-small.svg b/browser/themes/shared/tabbrowser/tab-audio-muted-small.svg
new file mode 100644
index 0000000000..89795c27fc
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/tab-audio-muted-small.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill-opacity="context-fill-opacity">
+  <circle fill="context-stroke" cx="6" cy="6" r="6"/>
+  <path fill="context-fill" d="M6.8 5.5 4.5 3.3l.9-1.1c.4-.5 1.3-.2 1.3.5v2.8zm2 .5c0-1-.5-1.9-1.3-2.4v2.7l1 1c.2-.4.3-.9.3-1.3zM7.7 2.6c1.3.7 2 2 2 3.4 0 .7-.2 1.4-.5 2l.5.5c.5-.8.8-1.6.8-2.5 0-1.7-.9-3.3-2.4-4.1-.2-.1-.4 0-.5.2-.1.2-.1.4.1.5zm-5.1-.1c-.1-.1-.4-.1-.5 0-.1.1-.1.4 0 .5l1.1 1.1h-1c-.4 0-.8.3-.8.8v2.2c0 .4.3.8.8.8h1.5l1.7 2c.4.5 1.3.2 1.3-.5V7.7l1.4 1.4c-.1.1-.2.2-.4.3-.2.1-.2.3-.1.5.1.2.3.2.5.2.2-.1.4-.3.6-.5l.4.4c.1.1.4.1.5 0 .1-.1.1-.4 0-.5l-7-7z"/>
+</svg>
diff --git a/browser/themes/shared/tabbrowser/tab-audio-playing-small.svg b/browser/themes/shared/tabbrowser/tab-audio-playing-small.svg
new file mode 100644
index 0000000000..68ee22e398
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/tab-audio-playing-small.svg
@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
+  <circle fill="context-stroke" cx="6" cy="6" r="6"/>
+  <path fill="context-fill" d="M6.7 2.6v6.8c0 .7-.9 1-1.3.5l-1.7-2H2.2c-.4 0-.7-.3-.7-.8V4.9c0-.4.3-.8.7-.8h1.5l1.7-2c.5-.5 1.3-.2 1.3.5zM8.8 6c0-1-.5-1.9-1.3-2.4v4.7C8.3 7.9 8.8 7 8.8 6zm-.7-4.1c-.2-.1-.4 0-.5.2-.1.2 0 .4.2.5 1.3.7 2 2 2 3.4 0 1.4-.8 2.8-2 3.4-.2.1-.3.2-.3.4 0 .2.2.4.4.4.1 0 .1 0 .2 0 1.5-.8 2.5-2.4 2.5-4.1-.1-1.8-1-3.4-2.5-4.2z"/>
+</svg>
diff --git a/browser/themes/shared/tabbrowser/tab-connecting.png b/browser/themes/shared/tabbrowser/tab-connecting.png
new file mode 100644
index 0000000000..3f948c37cb
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/tab-connecting.png
diff --git a/browser/themes/shared/tabbrowser/tab-connecting@2x.png b/browser/themes/shared/tabbrowser/tab-connecting@2x.png
new file mode 100644
index 0000000000..4bffc9e063
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/tab-connecting@2x.png
diff --git a/browser/themes/shared/tabbrowser/tab-drag-indicator.svg b/browser/themes/shared/tabbrowser/tab-drag-indicator.svg
new file mode 100644
index 0000000000..d195802641
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/tab-drag-indicator.svg
@@ -0,0 +1,4 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="12" height="29"><path d="M6 0a5 5 0 015 5 4.85 4.85 0 01-3 4.48V26a1 1 0 01-1 1H5a1 1 0 01-1-1V9.48C2.02 8.81 1.2 6.93 1 5a5 5 0 015-5z" fill="#fff" filter="drop-shadow(0 1px 0.5px rgba(0,0,0,0.496))"/><path d="M6 1a4 4 0 014 4c-.17 2.25-1.05 3.02-3 3.84V26H5V8.84C3.12 8.28 2.19 6.89 2 5a4 4 0 014-4zm0 2a2 2 0 100 4 2 2 0 000-4z" fill="#0a84ff"/></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/tabbrowser/tab-loading-inverted.png b/browser/themes/shared/tabbrowser/tab-loading-inverted.png
new file mode 100644
index 0000000000..029dccfe94
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/tab-loading-inverted.png
diff --git a/browser/themes/shared/tabbrowser/tab-loading-inverted@2x.png b/browser/themes/shared/tabbrowser/tab-loading-inverted@2x.png
new file mode 100644
index 0000000000..45166f3226
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/tab-loading-inverted@2x.png
diff --git a/browser/themes/shared/tabbrowser/tab-loading.png b/browser/themes/shared/tabbrowser/tab-loading.png
new file mode 100644
index 0000000000..02117c589e
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/tab-loading.png
diff --git a/browser/themes/shared/tabbrowser/tab-loading@2x.png b/browser/themes/shared/tabbrowser/tab-loading@2x.png
new file mode 100644
index 0000000000..779ecc4344
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/tab-loading@2x.png
diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css
new file mode 100644
index 0000000000..b02787360b
--- /dev/null
+++ b/browser/themes/shared/tabs.css
@@ -0,0 +1,790 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --tab-min-height: 36px;
+  --inline-tab-padding: 8px;
+  /* Value for --in-content-page-background in in-content/common.inc.css */
+  --tabpanel-background-color: #f9f9fa;
+  --tab-border-radius: 4px;
+  --tab-shadow-max-size: 6px;
+  --tab-block-margin: 4px;
+  /* --tabpanel-background-color matches $in-content-page-background in newtab
+     (browser/components/newtab/content-src/styles/_variables.scss) */
+  --tabpanel-background-color: #F9F9FB;
+  --tab-attention-icon-color: var(--lwt-tab-attention-icon-color, rgb(42,195,162));
+}
+
+#tabbrowser-tabpanels browser[type=content] {
+  color-scheme: env(-moz-content-preferred-color-scheme);
+}
+
+@media (-moz-content-prefers-color-scheme: dark) {
+  :root {
+    /* --tabpanel-background-color matches $in-content-page-background in newtab
+       (browser/components/newtab/content-src/styles/_variables.scss) */
+    --tabpanel-background-color: #2B2A33;
+  }
+}
+
+:root[privatebrowsingmode=temporary] {
+  /* Value for --in-content-page-background in aboutPrivateBrowsing.css.
+     !important overrides the direct setting of this variable in
+     ThemeVariableMap.sys.mjs when the user has a theme that defines
+     ntp_background. */
+  --tabpanel-background-color: #25003e !important;
+}
+
+:root[uidensity=compact] {
+  --tab-min-height: 29px;
+}
+
+:root[uidensity=touch] {
+  --tab-min-height: 41px;
+}
+
+#tabbrowser-tabs {
+  --tab-min-width: 76px;
+  --tab-loading-fill: #0A84FF;
+  --tab-overflow-pinned-tabs-width: 0px;
+  padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
+}
+
+#tabbrowser-tabpanels {
+  appearance: none;
+  padding: 0;
+  color-scheme: unset;
+  background-color: var(--tabpanel-background-color);
+}
+
+#tabbrowser-tabs,
+#tabbrowser-arrowscrollbox,
+#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
+  min-height: var(--tab-min-height);
+}
+
+.tab-background,
+.tab-stack {
+  min-height: inherit;
+}
+
+#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {
+  /* Add padding to match the shadow's blur radius so the
+    shadow doesn't get clipped when either the first or
+    last tab is selected */
+  padding-inline: var(--tab-shadow-max-size);
+}
+
+#tabbrowser-arrowscrollbox::part(scrollbox-clip) {
+  /* Needed to prevent tabstrip from growing as wide as the sum of the tabs'
+     page-title widths when emulating XUL with modern flexbox. */
+  contain: inline-size;
+}
+
+.tabbrowser-tab {
+  appearance: none;
+  background-color: transparent;
+  color-scheme: unset;
+  border-radius: 0;
+  border-width: 0;
+  margin: 0;
+  padding: 0 2px;
+  -moz-box-align: stretch;
+  /* Needed so that overflowing content overflows towards the end rather than
+     getting centered. That prevents tab opening animation from looking off at
+     the start, see bug 1759221. */
+  -moz-box-pack: start;
+  overflow: clip;
+  /* Needed to avoid clipping the tab-background shadow, which has a 4px blur
+   * (we only have 2px padding in the inline direction) */
+  overflow-clip-margin: 2px;
+  min-height: var(--tab-min-height);
+}
+
+/* tabbrowser-tab keyboard focus */
+.keyboard-focused-tab > .tab-stack > .tab-background,
+.tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+}
+
+.tab-content {
+  padding: 0 var(--inline-tab-padding);
+  min-width: 0;
+}
+
+:root:not([uidensity=compact]) .tab-content[pinned] {
+  padding: 0 10px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .tab-loading-burst {
+    border-radius: inherit;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .tab-loading-burst::before {
+    position: absolute;
+    content: "";
+    /* We set the width to be a percentage of the tab's width so that we can use
+       the `scale` transform to scale it up to the full size of the tab when the
+       burst occurs. We also need to set the margin-inline-start so that the
+       center of the burst matches the center of the favicon. */
+    width: 5%;
+    height: 100%;
+    /* Center the burst over the .tab-loading-burst; it's 9px from the edge thanks
+       to .tab-content, plus 8px more since .tab-loading-burst is 16px wide. */
+    margin-inline-start: calc(17px - 2.5%);
+  }
+
+  .tab-loading-burst[pinned]::before {
+    /* This is like the margin-inline-start rule above, except that icons for
+       pinned tabs are 12px from the edge. */
+    margin-inline-start: calc(20px - 2.5%);
+  }
+
+  .tab-loading-burst[bursting]::before {
+    background-image: url("chrome://browser/skin/tabbrowser/loading-burst.svg");
+    background-position: center center;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1);
+    -moz-context-properties: fill;
+    fill: var(--tab-loading-fill);
+  }
+
+  .tab-loading-burst[bursting][notselectedsinceload]::before {
+    animation-name: tab-burst-animation-light;
+  }
+
+  @keyframes tab-burst-animation {
+    0% {
+      opacity: 0.4;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(40);
+    }
+  }
+
+  @keyframes tab-burst-animation-light {
+    0% {
+      opacity: 0.2;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(40);
+    }
+  }
+}
+
+/* Width/height & margins apply on tab icon stack children */
+.tab-throbber-tabslist,
+.tab-throbber,
+.tab-icon-pending,
+.tab-icon-image,
+.tab-sharing-icon-overlay,
+.tab-icon-overlay {
+  height: 16px;
+  width: 16px;
+}
+
+.tab-throbber:not([pinned]),
+.tab-icon-pending:not([pinned]),
+.tab-icon-image:not([pinned]),
+.tab-sharing-icon-overlay:not([pinned]),
+.tab-icon-overlay:not([pinned]) {
+  margin-inline-end: 5.5px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab-throbber[busy] {
+    background-image: url("chrome://browser/skin/tabbrowser/hourglass.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    -moz-context-properties: fill;
+    fill: currentColor;
+    opacity: 0.4;
+  }
+
+  .tab-throbber[progress] {
+    opacity: 0.8;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root[sessionrestored] .tab-throbber[busy] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  :root[sessionrestored] .tab-throbber[busy]::before {
+    content: "";
+    position: absolute;
+    background-image: url("chrome://browser/skin/tabbrowser/loading.svg");
+    background-position: left center;
+    background-repeat: no-repeat;
+    width: 480px;
+    height: 100%;
+    animation: tab-throbber-animation 1.05s steps(30) infinite;
+    -moz-context-properties: fill;
+
+    /* XXX: It would be nice to transition between the "connecting" color and the
+       "loading" color (see the `.tab-throbber[progress]::before` rule below);
+       however, that currently forces main thread painting. When this is fixed
+       (after WebRender lands), we can do something like
+       `transition: fill 0.333s, opacity 0.333s;` */
+
+    fill: currentColor;
+    opacity: 0.7;
+  }
+
+  :root[sessionrestored] .tab-throbber[busy]:-moz-locale-dir(rtl)::before {
+    animation-name: tab-throbber-animation-rtl;
+  }
+
+  @keyframes tab-throbber-animation {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-100%); }
+  }
+
+  @keyframes tab-throbber-animation-rtl {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(100%); }
+  }
+
+  :root[sessionrestored] .tab-throbber[progress]::before {
+    fill: var(--tab-loading-fill);
+    opacity: 1;
+  }
+
+  #TabsToolbar[brighttext] .tab-throbber[progress]:not([selected=true])::before {
+    fill: var(--lwt-tab-loading-fill-inactive, #84c1ff);
+  }
+}
+
+.tab-icon-image {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.tab-icon-image:not([src]),
+.tab-icon-image:-moz-broken {
+  content: url("chrome://global/skin/icons/defaultFavicon.svg");
+}
+
+.tab-icon-image[sharing]:not([selected]),
+.tab-sharing-icon-overlay {
+  animation: 3s linear tab-sharing-icon-pulse infinite;
+}
+
+@keyframes tab-sharing-icon-pulse {
+  0%, 16.66%, 83.33%, 100% {
+    opacity: 0;
+  }
+  33.33%, 66.66% {
+    opacity: 1;
+  }
+}
+
+.tab-icon-image[sharing]:not([selected]) {
+  animation-delay: -1.5s;
+}
+
+.tab-sharing-icon-overlay {
+  position: relative;
+  -moz-context-properties: fill;
+  fill: rgb(224, 41, 29);
+}
+
+.tab-sharing-icon-overlay[sharing="camera"] {
+  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
+}
+
+.tab-sharing-icon-overlay[sharing="microphone"] {
+  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
+}
+
+.tab-sharing-icon-overlay[sharing="screen"] {
+  list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
+}
+
+.tab-icon-overlay {
+  width: 16px;
+  height: 16px;
+  position: relative;
+}
+
+.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
+  top: -5.5px;
+  inset-inline-end: -6px;
+  z-index: 1; /* Overlay tab title */
+  padding: 2px;
+}
+
+:root[uidensity=compact] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay),
+#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay),
+:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay[indicator-replaces-favicon],
+:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) {
+  opacity: 0;
+}
+
+.tab-icon-overlay[soundplaying]:not([crashed]),
+.tab-icon-overlay[muted]:not([crashed]),
+.tab-icon-overlay[activemedia-blocked]:not([crashed]) {
+  border-radius: 10px;
+  -moz-context-properties: fill, fill-opacity, stroke;
+  fill: currentColor;
+  stroke: transparent;
+}
+
+.tab-icon-overlay:is([pinned], [sharing]):not([crashed]) {
+  stroke: var(--tab-icon-overlay-stroke, white);
+  color: var(--tab-icon-overlay-fill, black);
+}
+
+.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[soundplaying]:hover,
+.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[muted]:hover,
+.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[activemedia-blocked]:hover {
+  background-color: var(--tab-icon-overlay-stroke, white);
+}
+
+#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed]) {
+  stroke: var(--tab-icon-overlay-stroke, black);
+  color: var(--tab-icon-overlay-fill, white);
+}
+
+#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed])[soundplaying]:hover,
+#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed])[muted]:hover,
+#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed])[activemedia-blocked]:hover {
+  background-color: var(--tab-icon-overlay-stroke, black);
+}
+
+.tab-icon-overlay[indicator-replaces-favicon] {
+  border-radius: 2px;
+  fill-opacity: 0.75;
+  padding: 2px;
+}
+.tab-icon-overlay[indicator-replaces-favicon]:hover {
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
+  fill-opacity: 0.95;
+}
+.tab-icon-overlay[indicator-replaces-favicon]:hover:active {
+  background-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+.tab-icon-overlay[soundplaying] {
+  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
+}
+
+.tab-icon-overlay[muted] {
+  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
+}
+
+.tab-icon-overlay[activemedia-blocked] {
+  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
+}
+
+.tab-icon-overlay[crashed] {
+  list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab-throbber-tabslist[busy] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/hourglass.svg");
+    -moz-context-properties: fill;
+    fill: currentColor;
+    opacity: 0.4;
+  }
+
+  .tab-throbber-tabslist[progress] {
+    opacity: 0.8;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .tab-throbber-tabslist[busy] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-connecting.png");
+  }
+
+  .tab-throbber-tabslist[progress] {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading.png");
+  }
+
+  :root[lwt-popup-brighttext] .tab-throbber-tabslist[progress]:not([selected=true]) {
+    list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted.png");
+  }
+
+  @media (min-resolution: 1.1dppx) {
+    .tab-throbber-tabslist[busy] {
+      list-style-image: url("chrome://browser/skin/tabbrowser/tab-connecting@2x.png");
+    }
+
+    .tab-throbber-tabslist[progress] {
+      list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading@2x.png");
+    }
+
+    :root[lwt-popup-brighttext] .tab-throbber-tabslist[progress]:not([selected=true]) {
+      list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted@2x.png");
+    }
+  }
+}
+
+.tab-label {
+  margin-inline: 0;
+}
+
+.tab-close-button {
+  -moz-context-properties: fill, fill-opacity;
+  margin-inline-end: calc(var(--inline-tab-padding) / -2);
+  width: 24px;
+  height: 24px;
+  padding: 7px;
+  border-radius: var(--tab-border-radius);
+}
+
+/* The following rulesets allow showing more of the tab title */
+.tabbrowser-tab:not([labelendaligned],:hover) > .tab-stack > .tab-content > .tab-close-button {
+  padding-inline-start: 0;
+  width: 17px;
+}
+
+.tabbrowser-tab[visuallyselected=true]:not([labelendaligned]):hover,
+#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true],[labelendaligned]):hover {
+  --tab-label-mask-size: 1em;
+}
+
+
+#tabbrowser-tabs[secondarytext-unsupported] .tab-secondary-label {
+  display: none;
+}
+
+#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
+  height: 2.7em;
+}
+
+.tab-secondary-label {
+  font-size: .75em;
+  opacity: .8;
+}
+
+.tab-icon-sound-label {
+  /* Set height back to equivalent of parent's 1em based
+     on the .tab-icon-sound having a reduced font-size */
+  height: 1.3333em;
+  white-space: nowrap;
+  margin: 0;
+}
+
+.tab-secondary-label[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
+  transition: opacity .3s linear var(--soundplaying-removal-delay);
+  opacity: 0;
+}
+
+/* Tab Overflow */
+#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator),
+#tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) {
+  width: 7px; /* The width is the sum of the inline margins */
+  background-image: radial-gradient(ellipse at bottom,
+                                    rgba(0,0,0,0.1) 0%,
+                                    rgba(0,0,0,0.1) 7.6%,
+                                    rgba(0,0,0,0) 87.5%);
+  background-repeat: no-repeat;
+  background-position: -3px;
+  border-left: .5px solid rgba(255,255,255,.2);
+  pointer-events: none;
+  position: relative;
+  border-bottom: .5px solid transparent;
+}
+
+#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator) {
+  margin-inline: -.5px -6.5px;
+}
+
+#tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) {
+  margin-inline: -6.5px -.5px;
+}
+
+#tabbrowser-arrowscrollbox:-moz-locale-dir(rtl)::part(overflow-start-indicator),
+#tabbrowser-arrowscrollbox:-moz-locale-dir(ltr)::part(overflow-end-indicator) {
+  transform: scaleX(-1);
+}
+
+#tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator),
+#tabbrowser-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator) {
+  opacity: 0;
+}
+
+#tabbrowser-arrowscrollbox::part(overflow-start-indicator),
+#tabbrowser-arrowscrollbox::part(overflow-end-indicator) {
+  transition: opacity 150ms ease;
+}
+
+.tabbrowser-tab:not([visuallyselected=true], [multiselected]),
+.tabbrowser-tab:-moz-lwtheme {
+  color: inherit;
+}
+
+.tab-background {
+  border-radius: var(--tab-border-radius);
+  margin-block: var(--tab-block-margin);
+}
+
+/* Selected tab and tab hover */
+
+#TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon,
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
+  background-color: color-mix(in srgb, currentColor 11%, transparent);
+}
+
+#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon,
+#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
+  box-shadow: 0 0 4px rgba(0,0,0,.4);
+}
+
+#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon,
+.tab-background:is([selected], [multiselected]) {
+  background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
+  background-origin: border-box;
+  background-repeat: repeat-x;
+}
+
+.tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme {
+  color: var(--lwt-tab-text, var(--toolbar-color));
+}
+
+@media (prefers-contrast) {
+  #TabsToolbar #firefox-view-button:is([open], :hover):not(:focus-visible) > .toolbarbutton-icon,
+  .tab-background[selected],
+  .tabbrowser-tab:hover > .tab-stack > .tab-background {
+    outline: 1px solid currentColor;
+    outline-offset: -1px;
+  }
+}
+
+@media not (prefers-contrast) {
+  #TabsToolbar #firefox-view-button[open]:not(:focus-visible) > .toolbarbutton-icon:-moz-lwtheme,
+  .tab-background[selected]:not([multiselected=true]):-moz-lwtheme {
+    outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
+    outline-offset: -1px;
+  }
+}
+
+/* Add a focus outline on top of the multiselected tabs, with the currently selected
+   tab getting a slightly thicker outline. */
+.tab-background[multiselected=true] {
+  outline: 1px solid var(--focus-outline-color);
+  outline-offset: -1px;
+}
+
+.tab-background[multiselected=true][selected=true] {
+  outline-width: 2px;
+  outline-offset: -2px;
+}
+
+/*
+ * LightweightThemeConsumer will set the current lightweight theme's header
+ * image to the lwt-header-image variable, used in each of the following rulesets.
+ */
+#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon:-moz-lwtheme,
+#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected=true]:-moz-lwtheme,
+#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme {
+  background-attachment: scroll, scroll, fixed;
+  background-color: transparent;
+  background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)),
+                    linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
+                    var(--lwt-header-image, none);
+  background-position: 0 0, 0 0, right top;
+  background-repeat: repeat-x, repeat-x, no-repeat;
+  background-size: auto 100%, auto 100%, auto auto;
+}
+
+/* Pinned tabs */
+
+toolbar[brighttext] {
+  --tab-attention-icon-color: var(--lwt-tab-attention-icon-color, rgb(84,255,189));
+}
+
+.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
+.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]),
+#firefox-view-button[attention] {
+  background-image: radial-gradient(circle, var(--tab-attention-icon-color), var(--tab-attention-icon-color) 2px, transparent 2px);
+  background-position: center bottom calc(6.5px + var(--tabs-navbar-shadow-size));
+  background-size: 4px 4px;
+  background-repeat: no-repeat;
+}
+
+.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned], [selected="true"]) {
+  background-position-x: left 14px;
+}
+
+.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned], [selected="true"]):-moz-locale-dir(rtl) {
+  background-position-x: right 14px;
+}
+
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
+  /* Add a gap between the last pinned tab and the first visible tab */
+  margin-inline-start: 12px !important; /* .tabbrowser-tab sets margin: 0 !important; */
+}
+
+.tab-label[attention]:not([selected="true"]) {
+  font-weight: bold;
+}
+
+/* Tab drag and drop */
+
+.tab-drop-indicator {
+  width: 12px;
+  margin-inline-start: -12px;
+  background: url(chrome://browser/skin/tabbrowser/tab-drag-indicator.svg) no-repeat center;
+  position: relative;
+  z-index: 2;
+}
+
+/* Drag space */
+
+.titlebar-spacer[type="pre-tabs"],
+.titlebar-spacer[type="post-tabs"] {
+  width: 40px;
+}
+
+@media (max-width: 500px) {
+  .titlebar-spacer[type="post-tabs"] {
+    display: none;
+  }
+}
+
+/* Firefox View button and menu item */
+
+:root:not([privatebrowsingmode=temporary], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs,
+:root[privatebrowsingmode=temporary]:not([firefoxviewhidden]) :is(
+  toolbarbutton:not(#firefox-view-button),
+  toolbarpaletteitem:not(#wrapper-firefox-view-button)
+) + #tabbrowser-tabs {
+  border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+  padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
+  margin-inline-start: 2px;
+}
+
+:root[privatebrowsingmode=temporary] :is(#firefox-view-button, #menu_openFirefoxView) {
+  display: none;
+}
+
+toolbar:not(#TabsToolbar) #firefox-view-button {
+  background-position: top 25% right 25%;
+}
+
+:is(#widget-overflow-mainView, #widget-overflow-fixed-list) #firefox-view-button {
+  background-position: top 25% left 22px;
+}
+
+/* RTL notification dot */
+toolbar:not(#TabsToolbar) #firefox-view-button:-moz-locale-dir(rtl) {
+  background-position-x: left 25%;
+}
+
+:is(#widget-overflow-mainView, #widget-overflow-fixed-list) #firefox-view-button:-moz-locale-dir(rtl) {
+  background-position-x: right 22px;
+}
+
+/* Tab bar scroll arrows */
+
+#tabbrowser-arrowscrollbox::part(scrollbutton-up),
+#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
+  fill: var(--toolbarbutton-icon-fill);
+}
+
+/* New tab button */
+
+#tabs-newtab-button,
+#TabsToolbar #new-tab-button {
+  list-style-image: url(chrome://global/skin/icons/plus.svg);
+}
+
+/* All tabs button and menupopup */
+
+#alltabs-button {
+  list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
+}
+
+#tabbrowser-tabs[hiddensoundplaying] ~ #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  background: transparent url(chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg);
+  box-shadow: none;
+  /* Match the color of the button, rather than label default. */
+  color: inherit;
+  display: block;
+  -moz-context-properties: fill, fill-opacity, stroke;
+  fill: currentColor;
+  stroke: transparent;
+  /* "!important" is necessary to override the rule in toolbarbutton.css */
+  margin: -7px 0 0 !important;
+  margin-inline-end: -4px !important;
+  min-width: 12px;
+  min-height: 12px;
+}
+
+/* The list of tabs is in its own panel-subview-body which will scroll. We don't
+   want any padding below the scrollbar, so remove the bottom padding
+   from the outer panel-subview-body. */
+#allTabsMenu-allTabsView > .panel-subview-body {
+  padding-bottom: 0;
+}
+
+#allTabsMenu-allTabsView-tabs {
+  padding-top: 0;
+}
+
+.all-tabs-item {
+  margin-inline: var(--arrowpanel-menuitem-margin-inline);
+  border-radius: var(--arrowpanel-menuitem-border-radius);
+}
+
+.all-tabs-item:hover {
+  background-color: var(--panel-item-hover-bgcolor);
+}
+
+.all-tabs-item:hover:active {
+  background-color: var(--panel-item-active-bgcolor);
+}
+
+.all-tabs-item[selected] {
+  font-weight: bold;
+}
+
+.all-tabs-item > toolbarbutton {
+  margin: 0;
+  /* Since the background is set on the item, don't set it on the children. */
+  background-color: transparent !important;
+}
+
+.all-tabs-button {
+  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+}
+
+.all-tabs-secondary-button {
+  opacity: .8;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.all-tabs-secondary-button[soundplaying] {
+  list-style-image: url(chrome://global/skin/media/audio.svg);
+}
+
+.all-tabs-secondary-button[muted] {
+  list-style-image: url(chrome://global/skin/media/audio-muted.svg);
+}
+
+.all-tabs-secondary-button:hover {
+  opacity: 1;
+}
+
+.all-tabs-secondary-button > label {
+  display: none !important; /* override panelUI-shared.css */
+}
diff --git a/browser/themes/shared/toolbar-drag-indicator.svg b/browser/themes/shared/toolbar-drag-indicator.svg
new file mode 100644
index 0000000000..ebcef29690
--- /dev/null
+++ b/browser/themes/shared/toolbar-drag-indicator.svg
@@ -0,0 +1,4 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" width="8" height="18"><path d="M4 1a3 3 0 013 3c.009.923-.377 1.542-1 2.165V16a1 1 0 01-1 1H3a1 1 0 01-1-1V6.165C1.288 5.644 1.083 4.828 1 4a3 3 0 013-3z" fill="#fff" filter="drop-shadow(0 0.5px 0.25px rgba(0,0,0,0.5))"/><path d="M3 5h2v11H3z" fill="#0a84ff"/><path d="M4 2a2 2 0 11.001 3.999A2 2 0 014 2zm0 1.333a.667.667 0 10.001 1.335A.667.667 0 004 3.333z" fill="#0a84ff"/></svg>
\ No newline at end of file
diff --git a/browser/themes/shared/toolbarbutton-icons.css b/browser/themes/shared/toolbarbutton-icons.css
new file mode 100644
index 0000000000..c8cc0e9a1b
--- /dev/null
+++ b/browser/themes/shared/toolbarbutton-icons.css
@@ -0,0 +1,486 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --toolbarbutton-icon-fill-attention: AccentColor;
+  --warning-icon-bgcolor: #FFA436;
+}
+
+:root:-moz-lwtheme {
+  --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,97,224));
+}
+
+:root[lwt-popup-brighttext] panel,
+toolbar[brighttext]:-moz-lwtheme {
+  --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255));
+  --warning-icon-bgcolor: #FFBD4F;
+}
+
+:root,
+/* Pick up the panel- and toolbar-specific --toolbarbutton-icon-fill-attention
+   values from above. */
+panel,
+toolbar {
+  --toolbar-field-icon-fill-attention: var(--lwt-toolbar-field-icon-fill-attention, var(--toolbarbutton-icon-fill-attention));
+}
+
+.toolbarbutton-animatable-box,
+.toolbarbutton-1 {
+  color: inherit;
+  -moz-context-properties: fill, fill-opacity;
+  fill: var(--toolbarbutton-icon-fill);
+}
+
+.toolbarbutton-animatable-box {
+  display: block;
+  position: absolute;
+  overflow: hidden;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  list-style-image: none;
+  /* Height must be equal to height of toolbarbutton padding-box. --toolbarbutton-height
+     is calculated and set during runtime by BrowserUIUtils.setToolbarButtonHeightProperty()
+     before the animation begins. */
+  height: var(--toolbarbutton-height);
+}
+
+#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
+#stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
+#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
+#PlacesChevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#PanelUI-menu-button:-moz-locale-dir(rtl) > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  scale: -1 1;
+}
+
+#back-button {
+  list-style-image: url("chrome://browser/skin/back.svg");
+}
+
+#forward-button {
+  list-style-image: url("chrome://browser/skin/forward.svg");
+}
+
+/* The animations for the reload-button and stop-button are disabled
+   outside of the nav-bar due to bug 1382894. */
+:is(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
+  display: none;
+}
+#nav-bar-customization-target > #stop-reload-button > :is(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
+  display: block;
+}
+
+#stop-reload-button[animate] > #reload-button > .toolbarbutton-icon,
+#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-icon {
+  fill: transparent;
+}
+
+@keyframes stop-to-reload {
+  /* pause on the first frame (step 0) for 6 frames of time */
+  from {
+    /* 0 */
+    transform: translateX(0);
+  }
+  /* resume at 7/35 and animate across the next 14 frames */
+  17.14% {
+    animation-timing-function: steps(14);
+    transform: translateX(calc(0  * -20px));
+  }
+  /* pause on the last frame for the remainder of the duration */
+  54.29% {
+    transform: translateX(calc(14 * -20px));
+  }
+  to {
+    /* end state for animation: */
+    transform: translateX(calc(var(--anim-frames) * -20px));
+  }
+}
+
+@keyframes reload-to-stop {
+  /* pause on the first frame (step 0) for 6 frames of time */
+  from {
+    /* 0 */
+    transform: translateX(0);
+    animation-timing-function: steps(12);
+  }
+  /* pause at 13/15 for 3 frames */
+  86.67% {
+    transform: translateX(calc(var(--anim-frames) * -20px));
+  }
+  to {
+    /* end state for animation: */
+    transform: translateX(calc(var(--anim-frames) * -20px));
+  }
+}
+
+#stop-reload-button[animate] > #reload-button,
+#stop-reload-button[animate] > #stop-button {
+  position: relative;
+}
+
+#nav-bar-customization-target :where(#reload-button, #stop-button) > .toolbarbutton-icon {
+  padding: calc(var(--toolbarbutton-inner-padding) + 1px) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 1px ) !important; /* The animation is 18px but the other icons are 16px, lower it by 1px so it is vertically centered */
+}
+
+#reload-button > .toolbarbutton-animatable-box,
+#stop-button > .toolbarbutton-animatable-box {
+  top: calc(50% - 9px); /* Vertically center the 20px tall animatable image, which is 1px higher than other icons */
+  /* Since .toolbarbutton-icon uses a different width than the animatable-box,
+     we need to set a padding relative to the difference in widths. */
+  margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 20px) / 2);
+  width: 20px; /* Width of each frame within the SVG sprite */
+  height: 20px; /* Height of each frame within the SVG sprite */
+}
+
+#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  background-image: url("chrome://browser/skin/stop-to-reload.svg");
+  /*
+    transition from stop icon to reload icon
+    pause at frame 0 for 6 ticks,
+    pause at frame 15 for 16 ticks
+    total 35 steps*/
+  --anim-frames: 14;
+  --anim-steps: calc(var(--anim-frames) + 21); /* Add steps for doing the pause at the start and end */
+  width: calc(20px * (var(--anim-frames) + 1));
+  height: 20px;
+
+  /* initial state for animation */
+  transform: translateX(0);
+}
+
+#stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  animation-name: stop-to-reload;
+}
+
+#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  animation-duration: calc(var(--anim-steps) * 16.667ms);
+}
+
+#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  background-image: url("chrome://browser/skin/reload-to-stop.svg");
+  /*
+    transition from reload icon to stop icon
+    pause at end for 3 frames of time
+    pause at ...
+    total 15 steps*/
+  --anim-frames: 12;
+  --anim-steps: calc(var(--anim-frames) + 3); /* Add steps for doing the pause at the start and end */
+  width: calc(20px * (var(--anim-frames) + 1));
+  height: 20px;
+
+  /* initial state for animation */
+  transform: translateX(0);
+}
+
+#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  animation-name: reload-to-stop;
+  animation-duration: calc(var(--anim-steps) * 16.667ms);
+}
+
+#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  animation-timing-function: steps(15);
+  animation-duration: 0.25s;
+}
+
+#reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  transform: translateX(-700px);
+}
+
+#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  transform: translateX(-300px);
+}
+
+#reload-button {
+  list-style-image: url("chrome://global/skin/icons/reload.svg");
+}
+
+#stop-button {
+  list-style-image: url("chrome://global/skin/icons/close.svg");
+}
+
+#home-button {
+  list-style-image: url("chrome://browser/skin/home.svg");
+}
+
+#bookmarks-toolbar-button,
+#bookmarks-toolbar-placeholder {
+  list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
+}
+
+#bookmarks-menu-button {
+  list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
+}
+
+#history-panelmenu {
+  list-style-image: url("chrome://browser/skin/history.svg");
+}
+
+#downloads-button {
+  list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
+}
+
+#add-ons-button {
+  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
+}
+
+#open-file-button {
+  list-style-image: url("chrome://browser/skin/open.svg");
+}
+
+#screenshot-button {
+  list-style-image: url("chrome://browser/skin/screenshot.svg");
+}
+
+#save-page-button {
+  list-style-image: url("chrome://browser/skin/save.svg");
+}
+
+#sync-button {
+  list-style-image: url("chrome://browser/skin/synced-tabs.svg");
+}
+
+#characterencoding-button {
+  list-style-image: url("chrome://browser/skin/characterEncoding.svg");
+}
+
+#new-window-button {
+  list-style-image: url("chrome://browser/skin/window.svg");
+}
+
+#new-tab-button {
+  list-style-image: url("chrome://browser/skin/new-tab.svg");
+}
+
+#privatebrowsing-button {
+  list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
+}
+
+#find-button {
+  list-style-image: url("chrome://global/skin/icons/search-glass.svg");
+}
+
+#print-button {
+  list-style-image: url("chrome://global/skin/icons/print.svg");
+}
+
+#fullscreen-button {
+  list-style-image: url("chrome://browser/skin/fullscreen.svg");
+}
+
+#developer-button {
+  list-style-image: url("chrome://global/skin/icons/developer.svg");
+}
+
+#profiler-button-button > .toolbarbutton-icon {
+  list-style-image: url("chrome://devtools/skin/images/tool-profiler.svg");
+}
+
+#profiler-button-button:not(.profiler-active) > image {
+  transform: scaleX(-1);
+}
+
+#profiler-button-button.profiler-active > image {
+  fill: #0060df;
+  fill-opacity: 1;
+  background-color: #0060df33;
+}
+
+#profiler-button-button.profiler-active:hover > image {
+  background-color: #0060df22;
+}
+
+#profiler-button-button.profiler-paused > image {
+  opacity: 0.4;
+}
+
+#preferences-button {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+#PanelUI-menu-button {
+  list-style-image: url("chrome://browser/skin/menu.svg");
+}
+
+#PanelUI-menu-button[badge-status="update-available"],
+#PanelUI-menu-button[badge-status="update-downloading"],
+#PanelUI-menu-button[badge-status="update-manual"],
+#PanelUI-menu-button[badge-status="update-other-instance"],
+#PanelUI-menu-button[badge-status="update-restart"],
+#PanelUI-menu-button[badge-status="update-unsupported"],
+#PanelUI-menu-button[badge-status="addon-alert"],
+#PanelUI-menu-button[badge-status="fxa-needs-authentication"] {
+  list-style-image: url("chrome://browser/skin/menu-badged.svg");
+}
+
+#cut-button {
+  list-style-image: url("chrome://browser/skin/edit-cut.svg");
+}
+
+#copy-button {
+  list-style-image: url("chrome://global/skin/icons/edit-copy.svg");
+}
+
+#paste-button {
+  list-style-image: url("chrome://browser/skin/edit-paste.svg");
+}
+
+#zoom-out-button {
+  list-style-image: url("chrome://browser/skin/zoom-out.svg");
+}
+
+#zoom-in-button {
+  list-style-image: url("chrome://global/skin/icons/plus.svg");
+}
+
+#PlacesChevron,
+#nav-bar-overflow-button {
+  list-style-image: url("chrome://global/skin/icons/chevron.svg");
+}
+
+#nav-bar-overflow-button[animate] > .toolbarbutton-icon {
+  fill: transparent;
+}
+
+@keyframes overflow-animation {
+  from {
+    transform: translateX(0);
+  }
+  from {
+    transform: translateX(-832px);
+  }
+}
+
+#nav-bar-overflow-button > .toolbarbutton-animatable-box {
+  visibility: hidden;
+  top: calc(50% - 8px); /* Vertically center the 16px tall animatable image */
+  /* Since .toolbarbutton-icon uses a different width than the animatable box,
+     we need to set a padding relative to the difference in widths. */
+  margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 16px) / 2);
+  width: 16px; /* Width of each frame within the SVG sprite */
+  height: 16px; /* Height of each frame within the SVG sprite */
+  -moz-context-properties: fill, stroke;
+  fill: var(--toolbarbutton-icon-fill);
+  stroke: var(--toolbarbutton-icon-fill-attention);
+}
+#nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  background-image: url("chrome://browser/skin/chevron-animation.svg");
+  width: 848px;
+  height: 16px;
+  transform: translateX(0);
+}
+
+#nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box {
+  visibility: visible;
+}
+#nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  animation-name: overflow-animation;
+  animation-timing-function: steps(52);
+  animation-duration: calc(52 * 16.667ms);
+}
+
+#unified-extensions-button {
+  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
+}
+
+#email-link-button {
+  list-style-image: url("chrome://browser/skin/mail.svg");
+}
+
+#sidebar-button {
+  list-style-image: url("chrome://browser/skin/sidebars-right.svg");
+}
+
+#sidebar-button:-moz-locale-dir(ltr):not([positionend]),
+#sidebar-button:-moz-locale-dir(rtl)[positionend] {
+  list-style-image: url("chrome://browser/skin/sidebars.svg");
+}
+
+#panic-button {
+  list-style-image: url("chrome://browser/skin/forget.svg");
+}
+
+#panic-button[open] {
+  fill: rgb(213, 32, 20);
+}
+
+toolbar[brighttext] #panic-button[open] {
+  fill: #ff848b;
+}
+
+#library-button {
+  list-style-image: url("chrome://browser/skin/library.svg");
+}
+
+#save-to-pocket-button {
+  list-style-image: url("chrome://global/skin/icons/pocket-outline.svg");
+  fill: var(--toolbarbutton-icon-fill);
+}
+
+#save-to-pocket-button[open="true"],
+#save-to-pocket-button[pocketed="true"] {
+  list-style-image: url("chrome://global/skin/icons/pocket.svg");
+  fill: #ef4056;
+}
+
+/* ----- BOOKMARK BUTTONS ----- */
+
+.bookmark-item {
+  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+toolbarbutton.bookmark-item {
+  -moz-context-properties: fill, fill-opacity;
+  fill: var(--toolbarbutton-icon-fill);
+}
+
+.bookmark-item[container] {
+  list-style-image: url("chrome://global/skin/icons/folder.svg");
+}
+
+.bookmark-item[container][query] {
+  list-style-image: url("chrome://browser/skin/places/folder-smart.svg");
+}
+
+.bookmark-item[query][tagContainer] {
+  list-style-image: url("chrome://browser/skin/places/tag.svg");
+  -moz-image-region: auto;
+}
+
+.bookmark-item[query][dayContainer] {
+  list-style-image: url("chrome://browser/skin/history.svg");
+  -moz-image-region: auto;
+}
+
+.bookmark-item[query][hostContainer] {
+  list-style-image: url("chrome://global/skin/icons/folder.svg");
+}
+
+#whats-new-menu-button {
+  list-style-image: url("chrome://global/skin/icons/whatsnew.svg");
+}
+
+#ion-button {
+  list-style-image: url("chrome://browser/skin/ion.svg");
+}
+
+#import-button {
+  list-style-image: url("chrome://browser/skin/import.svg");
+}
+
+#firefox-view-button {
+  list-style-image: url("chrome://branding/content/icon32.png");
+}
diff --git a/browser/themes/shared/toolbarbuttons.css b/browser/themes/shared/toolbarbuttons.css
new file mode 100644
index 0000000000..0a51e9a19e
--- /dev/null
+++ b/browser/themes/shared/toolbarbuttons.css
@@ -0,0 +1,350 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --toolbar-start-end-padding: 8px;
+  --toolbarbutton-outer-padding: 2px;
+  --toolbarbutton-inner-padding: 8px;
+
+  --toolbarbutton-hover-background: var(--button-hover-bgcolor);
+  --toolbarbutton-active-background: var(--button-active-bgcolor);
+
+  --toolbarseparator-color: color-mix(in srgb, currentColor 60%, transparent);
+
+  --bookmark-block-padding: 4px;
+
+  /* This default value of --toolbarbutton-height is defined to prevent
+     CSS errors for an invalid variable. The value should not get used,
+     as a more specific value should be set when the value will be used. */
+  --toolbarbutton-height: 0;
+}
+
+:root[uidensity=compact] {
+  --toolbarbutton-outer-padding: 3px;
+  --toolbarbutton-inner-padding: 6px;
+  --bookmark-block-padding: 1px;
+}
+
+:root[uidensity=touch] {
+  --toolbarbutton-inner-padding: 9px;
+  --bookmark-block-padding: 7px;
+}
+
+#TabsToolbar {
+  /* Override the inner padding to ensure the dimensions match the tabs, but also making sure
+     different types of buttons (combined-buttons-dropmarker or text) still look correct. */
+  --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2);
+}
+
+/* ::::: primary toolbar buttons ::::: */
+
+#tabbrowser-arrowscrollbox[scrolledtostart=true]::part(scrollbutton-up),
+#tabbrowser-arrowscrollbox[scrolledtoend=true]::part(scrollbutton-down),
+:root:not([customizing]) .toolbarbutton-1[disabled=true],
+/* specialcase the overflow and the hamburger button so they show up disabled in customize mode. */
+#nav-bar-overflow-button[disabled=true],
+#PanelUI-menu-button[disabled=true] {
+  opacity: 0.4;
+}
+
+.toolbarbutton-1 > .toolbarbutton-icon {
+  margin-inline-end: 0 !important;
+}
+
+.toolbarbutton-1 > .toolbarbutton-icon,
+.toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  width: 16px;
+}
+
+.toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon {
+  width: 12px;
+}
+
+#navigator-toolbox:not(:hover) #tabbrowser-arrowscrollbox:not([highlight])::part(scrollbutton-down) {
+  transition: 1s background-color ease-out;
+}
+
+#tabbrowser-arrowscrollbox[highlight]::part(scrollbutton-down) {
+  background-color: SelectedItem;
+}
+
+toolbar .toolbarbutton-1 {
+  appearance: none;
+  margin: 0;
+  padding: 0 var(--toolbarbutton-outer-padding);
+  -moz-box-pack: center;
+}
+
+#TabsToolbar .toolbarbutton-1 {
+  margin: 0 0 var(--tabs-navbar-shadow-size);
+}
+
+#tabbrowser-arrowscrollbox::part(scrollbutton-up),
+#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
+  appearance: none;
+  background-clip: padding-box;
+  border: 4px solid transparent;
+  border-radius: calc(var(--tab-border-radius) + 4px);
+  margin: 0;
+  padding: 0 calc(var(--toolbarbutton-inner-padding) - 6px);
+}
+
+/*** Adds padding to end of toolbar while making that space click the first button ***/
+#PanelUI-menu-button {
+  padding-inline-end: var(--toolbar-start-end-padding);
+}
+
+toolbar .toolbarbutton-1 > .toolbarbutton-icon,
+toolbar .toolbarbutton-1 > .toolbarbutton-text,
+toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
+  padding: var(--toolbarbutton-inner-padding);
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
+#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
+#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
+  border-radius: var(--tab-border-radius);
+}
+
+toolbar .toolbarbutton-1 > .toolbarbutton-icon {
+  /* horizontal padding + actual icon width */
+  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
+  height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
+}
+
+toolbar .toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon {
+  /* same height as regular buttons, but narrower, and for a 12x12 image */
+  padding-inline: 2px;
+  padding-block: calc(var(--toolbarbutton-inner-padding) + (16px - 12px) / 2);
+  width: calc(2 * 2px + 12px);
+}
+
+toolbar .toolbarbutton-1 > .toolbarbutton-text {
+  padding-top: calc(var(--toolbarbutton-inner-padding) - 1px);
+  padding-bottom: 0;
+  /* To make the hover feedback line up with sibling buttons, it needs the same
+   * height as the button icons and the same vertical padding, but as a minimum,
+   * because otherwise an increase in text sizes would break things.
+   */
+  min-height: calc(16px + 2 * var(--toolbarbutton-inner-padding));
+}
+
+@media (-moz-platform: macos) {
+  toolbar .toolbarbutton-1 > .toolbarbutton-text {
+    padding-top: calc(var(--toolbarbutton-inner-padding) + 1px);
+  }
+}
+
+toolbar .toolbaritem-combined-buttons {
+  margin-inline: 2px;
+}
+
+toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
+  padding-inline: 0;
+}
+
+toolbar .toolbaritem-combined-buttons:not(:hover) > separator {
+  content: "";
+  display: -moz-box;
+  width: 1px;
+  height: 16px;
+  margin-inline-end: -1px;
+  background-image: linear-gradient(currentColor 0, currentColor 100%);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1px 16px;
+  opacity: .2;
+}
+
+toolbar[brighttext] .toolbaritem-combined-buttons > separator {
+  opacity: .3;
+}
+
+#tabbrowser-arrowscrollbox:not([scrolledtostart=true])::part(scrollbutton-up):hover,
+#tabbrowser-arrowscrollbox:not([scrolledtoend=true])::part(scrollbutton-down):hover,
+toolbarbutton.bookmark-item:not(.subviewbutton, [disabled=true], [open]):hover,
+toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-icon,
+toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-text,
+toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-badge-stack {
+  background-color: var(--toolbarbutton-hover-background);
+  color: inherit;
+}
+
+#tabbrowser-arrowscrollbox:not([scrolledtostart=true])::part(scrollbutton-up):hover:active,
+#tabbrowser-arrowscrollbox:not([scrolledtoend=true])::part(scrollbutton-down):hover:active,
+toolbarbutton.bookmark-item:hover:active:not(.subviewbutton, [disabled="true"]),
+toolbarbutton.bookmark-item[open="true"],
+toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-icon,
+toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-text,
+toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
+  background-color: var(--toolbarbutton-active-background);
+  color: inherit;
+}
+
+/* Keyboard focus styling */
+.titlebar-button:focus-visible,
+findbar toolbarbutton.tabbable:focus-visible,
+toolbarbutton.bookmark-item:not(.subviewbutton):focus-visible,
+toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-icon,
+toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-text,
+toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-badge-stack {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+}
+
+toolbar .toolbarbutton-1:focus-visible {
+  outline: none;
+}
+
+/* bookmarks menu button */
+
+/* ::::: bookmark buttons ::::: */
+
+#personal-toolbar-empty-description,
+toolbarbutton.bookmark-item:not(.subviewbutton) {
+  margin: 2px;
+  padding: var(--bookmark-block-padding) 4px;
+}
+
+#PersonalToolbar .toolbarbutton-1 {
+  /* These should match the sizing of the bookmark-items in the inline axis
+   * (padding and margin, respectively) */
+  --toolbarbutton-inner-padding: 4px;
+  --toolbarbutton-outer-padding: 2px;
+  margin-block: 2px;
+}
+
+:root[uidensity=compact] toolbarbutton.bookmark-item:not(.subviewbutton) {
+  margin-inline: 1px;
+}
+
+:root[uidensity=compact] #PersonalToolbar .toolbarbutton-1 {
+  --toolbarbutton-outer-padding: 1px;
+}
+
+/* Allow icons to grow with the toolbar to match bookmark item heights
+ *
+ * NOTE(emilio): This matches pre-existing behavior but it's inconsistent with
+ * how e.g. combined items work, and maybe we should just remove this.
+ */
+#PersonalToolbar .toolbarbutton-1 {
+  -moz-box-align: stretch;
+}
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon {
+  height: auto;
+}
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
+  align-items: center;
+}
+
+toolbarbutton.bookmark-item:not(.subviewbutton) {
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+toolbarbutton.bookmark-item:not(.subviewbutton) {
+  max-width: 13em;
+  appearance: none;
+}
+
+/**
+ * Ensure that the description is always at least as big as a bookmarks item,
+ * where its icon is 16px (which may be more than inline text height);
+ */
+#personal-toolbar-empty-description {
+  min-height: calc(16px + 2 * var(--bookmark-block-padding));
+}
+
+#bookmarks-toolbar-placeholder {
+  max-width: unset;
+}
+
+.bookmark-item > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Force the display of the label for bookmarks */
+.bookmark-item > .toolbarbutton-text {
+  display: -moz-box !important;
+}
+
+#personal-bookmarks,
+#PlacesToolbar,
+#PlacesToolbarItems {
+  min-width: 0;
+}
+
+#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon {
+  margin-inline-end: 0;
+}
+
+#managed-bookmarks > .toolbarbutton-icon,
+#bookmarks-toolbar-placeholder > .toolbarbutton-icon,
+#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]),
+#PersonalToolbar #import-button > .toolbarbutton-icon,
+#OtherBookmarks.bookmark-item[container] > .toolbarbutton-icon {
+  margin-inline-end: 4px;
+}
+
+/* Separators */
+
+/* Override the toolkit styles, and make sure separators are draggable by
+ * making them wider, and using a pseudo-element for the visual separator. */
+#PlacesToolbarItems > toolbarseparator {
+  margin: 0;
+  padding-inline: 4px;
+  appearance: none;
+}
+
+/* When adjacent to the bookmarks items, give the bookmarks items a leading separator. */
+#PlacesToolbarItems > toolbarseparator::before {
+  content: "";
+  display: block;
+  border-inline-start: 1px solid;
+  border-image-source: linear-gradient(
+    transparent 3.75px,
+    var(--toolbarseparator-color) 3.75px,
+    var(--toolbarseparator-color) calc(100% - 3.75px),
+    transparent calc(100% - 3.75px) );
+  border-image-slice: 1;
+}
+
+@media (min-resolution: 2dppx) {
+  #PlacesToolbarItems > toolbarseparator::before {
+    border-inline-start-width: 0.5px;
+  }
+}
+
+/* The bookmarks toolbar is smaller than the other toolbars, so we
+ * need to override the badge position to not be cut off. */
+#PersonalToolbar .toolbarbutton-badge {
+  margin-top: -1px !important;
+}
+
+:root[uidensity=touch] #PersonalToolbar .toolbarbutton-badge {
+  margin-top: -4px !important;
+}
+
+/* Remove a pixel of margin on the end so that the badge doesn't
+ * overflow the toolbar and push the button into the overflow menu. */
+:root[uidensity=compact] .toolbarbutton-badge {
+  margin-inline-end: -7px !important;
+}
+
+/* Alternative style for .toolbarbutton-badge used by CFR notifications */
+.toolbarbutton-badge.feature-callout {
+  width: 14px;
+  height: 14px;
+  min-width: auto;
+  box-shadow: none;
+  border: none;
+  padding: 0;
+  display: block;
+  margin: -7px 0 0 !important;
+  margin-inline-end: -6px !important;
+  background: url(chrome://global/skin/icons/badge-blue.svg);
+}
diff --git a/browser/themes/shared/translation/infobar.css b/browser/themes/shared/translation/infobar.css
new file mode 100644
index 0000000000..7f42cf2939
--- /dev/null
+++ b/browser/themes/shared/translation/infobar.css
@@ -0,0 +1,95 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+notification[value="translation"] .messageImage {
+  list-style-image: url(chrome://browser/skin/translation-16.png) !important;
+  -moz-image-region: rect(0, 32px, 16px, 16px);
+}
+
+@media (min-resolution: 1.25dppx) {
+  notification[value="translation"] .messageImage {
+    list-style-image: url(chrome://browser/skin/translation-16@2x.png) !important;
+    -moz-image-region: rect(0, 64px, 32px, 32px);
+  }
+}
+
+notification[value="translation"][state="translating"] .messageImage {
+  list-style-image: url(chrome://browser/skin/translating-16.png) !important;
+  -moz-image-region: auto;
+}
+
+@media (min-resolution: 1.25dppx) {
+  notification[value="translation"][state="translating"] .messageImage {
+    list-style-image: url(chrome://browser/skin/translating-16@2x.png) !important;
+  }
+}
+
+notification[value="translation"] hbox[anonid="details"] {
+  overflow: hidden;
+}
+
+notification[value="translation"] menulist::part(dropmarker) {
+  display: -moz-box;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+}
+
+notification[value="translation"] menulist::part(dropmarker-icon) {
+  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+notification[value="translation"] menulist > menupopup {
+  margin: 0; /* override popup.css */
+}
+
+.translation-attribution {
+  cursor: pointer;
+  -moz-box-align: end;
+  font-size: small;
+  padding-block: 5px;
+}
+
+.translation-attribution > label {
+  margin-bottom: 0;
+}
+
+.translation-attribution > image {
+  width: 70px;
+}
+
+.translation-welcome-panel {
+  width: 305px;
+}
+
+.translation-welcome-panel::part(content) {
+  /* Prevent from stretching logo height */
+  -moz-box-align: start;
+}
+
+.translation-welcome-logo {
+  height: 32px;
+  width: 32px;
+  list-style-image: url(chrome://browser/skin/translation-16@2x.png);
+  -moz-image-region: rect(0, 64px, 32px, 32px);
+}
+
+.translation-welcome-content {
+  margin-inline-start: 16px;
+}
+
+.translation-welcome-headline {
+  font-size: larger;
+  font-weight: bold;
+  margin-inline-start: 0;
+}
+
+.translation-welcome-body {
+  padding: 1em 0;
+  margin: 0 0;
+}
diff --git a/browser/themes/shared/translation/translating-16.png b/browser/themes/shared/translation/translating-16.png
new file mode 100644
index 0000000000..71ca37c22a
--- /dev/null
+++ b/browser/themes/shared/translation/translating-16.png
diff --git a/browser/themes/shared/translation/translating-16@2x.png b/browser/themes/shared/translation/translating-16@2x.png
new file mode 100644
index 0000000000..ab6184047e
--- /dev/null
+++ b/browser/themes/shared/translation/translating-16@2x.png
diff --git a/browser/themes/shared/translation/translation-16.png b/browser/themes/shared/translation/translation-16.png
new file mode 100644
index 0000000000..ef17f55271
--- /dev/null
+++ b/browser/themes/shared/translation/translation-16.png
diff --git a/browser/themes/shared/translation/translation-16@2x.png b/browser/themes/shared/translation/translation-16@2x.png
new file mode 100644
index 0000000000..c942e5ec09
--- /dev/null
+++ b/browser/themes/shared/translation/translation-16@2x.png
diff --git a/browser/themes/shared/update-badge.svg b/browser/themes/shared/update-badge.svg
new file mode 100644
index 0000000000..aac3a5f97c
--- /dev/null
+++ b/browser/themes/shared/update-badge.svg
@@ -0,0 +1,6 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill">

+  <path d="M7.625.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm3.317 7.38a.623.623 0 0 1-.884 0L8.25 6.072l0 5.304A.625.625 0 0 1 7 11.375l0-5.303L5.192 7.88a.626.626 0 0 1-.885-.885L7.304 4l.643 0 2.996 2.995a.627.627 0 0 1-.001.885z"/>

+</svg>

diff --git a/browser/themes/shared/urlbar-dynamic-results.css b/browser/themes/shared/urlbar-dynamic-results.css
new file mode 100644
index 0000000000..c22b6ca9f1
--- /dev/null
+++ b/browser/themes/shared/urlbar-dynamic-results.css
@@ -0,0 +1,478 @@
+/* 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/. */
+
+/**
+ * UrlbarProviderTabToSearch
+ */
+
+.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner {
+  min-height: 64px !important; /* Overriding :root:not([uidensity=compact]) .urlbarView-row-inner { min-height } in urlbarView.inc.css */
+  align-items: center;
+}
+
+.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap {
+  align-items: center;
+}
+
+.urlbarView-row[dynamicType=onboardTabToSearch]:hover > .urlbarView-row-inner {
+  background-color: var(--arrowpanel-dimmed);
+}
+
+.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] {
+  background: var(--autocomplete-popup-highlight-background);
+  color: var(--autocomplete-popup-highlight-color);
+  fill-opacity: 1;
+}
+
+/* Icon */
+.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+  min-width: 32px;
+  height: 32px;
+  color: var(--urlbar-popup-url-color);
+  -moz-context-properties: fill;
+}
+
+.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-favicon {
+  color: inherit;
+}
+
+.urlbarView-dynamic-onboardTabToSearch-text-container {
+  display: flex;
+  flex-direction: column;
+}
+
+/* First row of text. */
+.urlbarView-dynamic-onboardTabToSearch-first-row-container {
+  display: flex;
+  align-items: end;
+}
+.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container {
+  flex-wrap: wrap;
+}
+.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > * {
+  max-width: 100%;
+  flex-basis: 100%;
+}
+.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-title-separator {
+  visibility: collapse;
+}
+.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-action {
+  color: var(--autocomplete-popup-highlight-color);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .urlbarView-results:not([wrap]) > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-action[slide-in] {
+    animation-name: urlbarView-action-slide-in;
+    animation-duration: 350ms;
+    animation-timing-function: var(--animation-easing-function);
+  }
+}
+
+/* Description text. */
+.urlbarView-dynamic-onboardTabToSearch-description {
+  margin-block-start: 2px;
+}
+.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description {
+  max-width: 100%;
+  flex-basis: 100%;
+}
+.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner:not([selected]) > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description {
+  opacity: 0.6;
+}
+
+/* CSS for Calculator */
+.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner[selected] {
+  background-color: var(--autocomplete-popup-highlight-background);
+  color: var(--autocomplete-popup-highlight-color);
+}
+
+.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner:hover {
+  background: var(--arrowpanel-dimmed);
+}
+
+.urlbarView-dynamic-calculator-action {
+  font-size: .85em;
+  font-weight: normal;
+  visibility: collapse;
+}
+
+.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner:hover .urlbarView-dynamic-calculator-action,
+.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner[selected] .urlbarView-dynamic-calculator-action {
+  visibility: visible;
+}
+
+.urlbarView-dynamic-calculator-action::before {
+  content: "\2014";
+  margin: 0 .4em;
+  opacity: 0.6;
+}
+
+/** UrlbarProviderUnitConversion **/
+.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner:hover {
+  background: var(--autocomplete-popup-hover-background);
+}
+
+.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner[selected] {
+  background: var(--autocomplete-popup-highlight-background);
+  color: var(--autocomplete-popup-highlight-color);
+  fill-opacity: 1;
+}
+
+.urlbarView-dynamic-unitConversion-action {
+	font-size: .85em;
+	font-weight: normal;
+	visibility: collapse;
+}
+
+.urlbarView-dynamic-unitConversion-action::before {
+	content: "\2014";
+	margin: 0 .4em;
+	opacity: 0.6;
+}
+
+.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner:hover .urlbarView-dynamic-unitConversion-action,
+.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner[selected] .urlbarView-dynamic-unitConversion-action {
+	visibility: visible;
+}
+
+.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner:hover .urlbarView-dynamic-unitConversion-action {
+	color: var(--urlbar-popup-action-color);
+}
+
+.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner[selected] .urlbarView-dynamic-unitConversion-action {
+  color: var(--autocomplete-popup-highlight-color);
+}
+
+.urlbarView-row[dynamicType=quickactions] > .urlbarView-row-inner {
+  align-items: start;
+}
+
+.urlbarView-row[dynamicType=quickactions] .urlbarView-dynamic-quickactions-buttons {
+  display: flex;
+  flex-grow: 1;
+  gap: 0.9em 1.8em;
+  max-width: 100%;
+}
+
+#urlbar[searchmodesource=actions] .urlbarView-row[dynamicType=quickactions] .urlbarView-dynamic-quickactions-buttons {
+  flex-wrap: wrap;
+}
+
+.urlbarView-results[wrap] > .urlbarView-row[dynamicType=quickactions] > .urlbarView-row-inner {
+  flex-wrap: unset;
+}
+
+.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row {
+  box-shadow: 0px 0px 1px rgba(128, 128, 142, 0.9), 0px 0px 4px rgba(128, 128, 142, 0.5);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  padding: .5em;
+  margin-top: 2px;
+  position: relative;
+  overflow: hidden;
+  min-width: 16px;
+}
+
+.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row[disabled] {
+  opacity: .4;
+}
+
+.urlbarView-row[dynamicType=quickactions] .urlbarView-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.urlbarView-row[dynamicType=quickactions] .urlbarView-favicon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.urlbarView-row[dynamicType=quickactions] .urlbarView-favicon-img {
+  width: 16px;
+  height: 16px;
+}
+
+.urlbarView-row[dynamicType=quickactions][label]::before {
+  top: -1em;
+  margin-inline-start: 6px;
+}
+
+.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row:hover:not([disabled]):not([selected]) {
+  background-color: var(--autocomplete-popup-hover-background);
+}
+
+.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row[selected] {
+  background-color: var(--autocomplete-popup-highlight-background);
+  color: var(--autocomplete-popup-highlight-color);
+}
+
+.urlbarView-row[dynamicType=quickactions] .urlbarView-title {
+  display: flex;
+}
+
+/**
+ * UrlbarProviderContextualSearch
+ */
+
+.urlbarView-row[dynamicType=contextualSearch] .urlbarView-title[overflow] {
+  mask-image: linear-gradient(to left, transparent, black 2em);
+}
+
+.urlbarView-row[dynamicType=contextualSearch] .urlbarView-title[overflow]:-moz-locale-dir(rtl) {
+  mask-image: linear-gradient(to right, transparent, black 2em);
+}
+
+.urlbarView-row[dynamicType=contextualSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator.urlbarView-dynamic-contextualSearch-separator {
+  visibility: visible;
+}
+
+.urlbarView-row[dynamicType=contextualSearch] .urlbarView-dynamic-contextualSearch-description {
+  font-size: 0.85em;
+}
+
+.urlbarView-row[dynamicType=contextualSearch]:hover > .urlbarView-row-inner {
+  background-color: var(--autocomplete-popup-hover-background);
+}
+
+
+/**
+ * Weather
+ *
+ * All em units used below are based on the spec where 1em is 13px.
+ * Thus using 13px as a base to calculate the other relative em sizes, either
+ * a bigger or smaller ratio to 13px.
+ */
+
+.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner {
+  flex-wrap: nowrap;
+}
+
+.urlbarView-dynamic-weather-currentConditions {
+  background-color: var(--autocomplete-popup-hover-background);
+  padding: 0.61em 0.61em 0.84em;
+  margin-inline-end: 0.92em;
+  border-radius: 2px;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: dark) {
+  .urlbarView-dynamic-weather-currentConditions {
+    background-color: var(--autocomplete-popup-highlight-background);
+    color: var(--autocomplete-popup-highlight-color);
+  }
+}
+
+.urlbarView-dynamic-weather-currently {
+  font-size: 0.85em;
+  margin-bottom: 0.53em;
+}
+
+.urlbarView-dynamic-weather-temperature {
+  margin-inline-end: 0.3em;
+  font-weight: 600;
+  /* The units from the spec:
+     - 1em is 13px
+     - temperature is 18px
+     - We need to figure out the temperature in units of em.
+     - 18px / 13px = 1.385em
+     Therefore, the temperature is 1.385em units.
+  */
+  font-size: 1.385em;
+  vertical-align: middle;
+}
+
+.urlbarView-dynamic-weather-weatherIcon {
+  vertical-align: middle;
+}
+
+/* Weather Icon color for high contrast mode */
+@media (prefers-contrast) {
+  .urlbarView-dynamic-weather-weatherIcon {
+    -moz-context-properties: fill, stroke;
+    fill: currentColor;
+    stroke: currentColor;
+  }
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="1"] {
+  content: url("chrome://browser/skin/weather/sunny.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="2"] {
+  content: url("chrome://browser/skin/weather/mostly-sunny.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="3"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="4"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="6"] {
+  content: url("chrome://browser/skin/weather/partly-sunny.svg");
+}
+
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="5"] {
+  content: url("chrome://browser/skin/weather/hazy-sunshine.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="7"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="8"] {
+  content: url("chrome://browser/skin/weather/cloudy.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="11"] {
+  content: url("chrome://browser/skin/weather/fog.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="12"] {
+  content: url("chrome://browser/skin/weather/showers.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="13"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="14"] {
+  content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="15"] {
+  content: url("chrome://browser/skin/weather/thunderstorms.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="16"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="17"] {
+  content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="18"] {
+  content: url("chrome://browser/skin/weather/rain.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="19"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="20"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="25"] {
+  content: url("chrome://browser/skin/weather/flurries.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="21"] {
+  content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="22"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="23"] {
+  content: url("chrome://browser/skin/weather/snow.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="24"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="31"] {
+  content: url("chrome://browser/skin/weather/ice.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="26"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="29"] {
+  content: url("chrome://browser/skin/weather/freezing-rain.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="30"] {
+  content: url("chrome://browser/skin/weather/hot.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="32"] {
+  content: url("chrome://browser/skin/weather/windy.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="33"] {
+  content: url("chrome://browser/skin/weather/night-clear.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="34"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="35"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="36"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="38"] {
+  content: url("chrome://browser/skin/weather/night-mostly-clear.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="37"] {
+  content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="39"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="40"] {
+  content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="41"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="42"] {
+  content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg");
+}
+
+.urlbarView-dynamic-weather-weatherIcon[iconId="43"],
+.urlbarView-dynamic-weather-weatherIcon[iconId="44"] {
+  content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg");
+}
+
+.urlbarView-dynamic-weather-summary {
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.urlbarView-dynamic-weather-top {
+  display: flex;
+  align-items: center;
+}
+
+.urlbarView-dynamic-weather-topNoWrap {
+  display: inline-flex;
+  align-items: center;
+}
+
+.urlbarView-dynamic-weather-middle {
+  font-size: 0.85em;
+  display: flex;
+  align-items: center;
+}
+
+.urlbarView-dynamic-weather-middleNoWrap {
+  display: inline-flex;
+  align-items: center;
+}
+
+.urlbarView-dynamic-weather-summaryTextSeparator::before {
+  content: '\00B7';
+  margin: 0.25em;
+}
+
+.urlbarView-dynamic-weather-highLow {
+  /* The 100% width is needed so the highLow wraps at the same time as the URL
+     when the URL has overflowed.
+     TODO - In a follow-up patch I will fix it so the highLow will wrap when the
+     highLow has overflowed, it will wrap separte from the URL.*/
+  width: 100%;
+}
+
+.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner .urlbarView-dynamic-weather-top,
+.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner .urlbarView-dynamic-weather-middle {
+  flex-wrap: wrap;
+}
+
+.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary >
+.urlbarView-dynamic-weather-top > .urlbarView-dynamic-weather-topNoWrap > .urlbarView-dynamic-weather-titleSeparator,
+.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary >
+.urlbarView-dynamic-weather-middle > .urlbarView-dynamic-weather-middleNoWrap > .urlbarView-dynamic-weather-summaryTextSeparator {
+  display: none;
+}
+
+.urlbarView-dynamic-weather-bottom {
+  font-size: 0.85em;
+  margin-top: 0.40em;
+  opacity: 0.6;
+}
+
+.urlbarView-row[dynamicType=weather] > .urlbarView-row-inner[selected] > .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-top > .urlbarView-url {
+  color: inherit;
+}
+
+.urlbarView-row[dynamicType=weather] > .urlbarView-row-inner[selected] > .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-bottom {
+  opacity: 1;
+}
diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
new file mode 100644
index 0000000000..b0fe7e7a7b
--- /dev/null
+++ b/browser/themes/shared/urlbar-searchbar.css
@@ -0,0 +1,745 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --toolbar-field-border-color: hsla(240,5%,5%,.25);
+  --toolbar-field-focus-border-color: var(--focus-outline-color);
+  --urlbar-container-padding: 1px;
+  --urlbar-margin-inline: 5px;
+  --urlbar-search-button-width: calc(16px + 2 * var(--urlbar-icon-padding));
+}
+
+@media not (prefers-contrast) {
+  :root {
+    --toolbar-field-border-color: transparent;
+    --toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent);
+  }
+}
+
+#urlbar-container,
+#search-container {
+  padding-block: 4px;
+  margin-inline: var(--urlbar-margin-inline);
+}
+
+#search-container[cui-areatype="panel"] {
+  margin: var(--arrowpanel-menuitem-margin);
+}
+
+:root[uidensity=touch] #urlbar-container,
+:root[uidensity=touch] #search-container {
+  padding-block: 5px;
+}
+
+#urlbar,
+#searchbar {
+  min-height: var(--urlbar-min-height);
+  text-shadow: none;
+  color: var(--toolbar-field-color);
+}
+
+/**
+ * System colors and widgets are set based on toolbar color. Since toolbar
+ * fields can be styled differently from the toolbar, we need to use the
+ * correct color scheme in toolbar fields.
+ */
+#urlbar:-moz-lwtheme,
+#searchbar:-moz-lwtheme {
+  color-scheme: light;
+}
+
+:root[lwt-toolbar-field-brighttext] #urlbar:not([focused="true"]),
+:root[lwt-toolbar-field-brighttext] #searchbar:not(:focus-within),
+:root[lwt-toolbar-field-focus-brighttext] #urlbar[focused="true"],
+:root[lwt-toolbar-field-focus-brighttext] #searchbar:focus-within {
+  color-scheme: dark;
+}
+
+#urlbar-background,
+#searchbar {
+  background-color: var(--toolbar-field-background-color);
+  background-clip: border-box;
+  border: 1px solid var(--toolbar-field-border-color);
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+#urlbar-input-container,
+#searchbar {
+  border-radius: var(--toolbarbutton-border-radius);
+  overflow: clip;
+}
+
+#urlbar-input,
+#urlbar-scheme,
+.searchbar-textbox {
+  -moz-box-flex: 1;
+  background-color: transparent;
+  color: inherit;
+  border: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+
+#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
+#searchbar:focus-within {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+  /* We used --focus-outline above to inherit its width and style properties,
+     but we still want to use the theme's border-color.
+     --toolbar-field-focus-border-color is set equal to --focus-outline-color
+     on :root, but LWT themes can override this value. */
+  outline-color: var(--toolbar-field-focus-border-color);
+  border-color: transparent;
+}
+
+#urlbar[focused="true"] > #urlbar-background,
+#searchbar:focus-within {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
+}
+
+#urlbar[open] > #urlbar-background {
+  border-color: var(--arrowpanel-border-color);
+  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
+}
+
+#urlbar:is([focused="true"], [open]),
+#searchbar:focus-within {
+  color: var(--toolbar-field-focus-color);
+}
+
+#urlbar:is([focused="true"], [open]) > #urlbar-background,
+#searchbar:focus-within {
+  background-color: var(--toolbar-field-focus-background-color);
+}
+
+#urlbar-input::placeholder,
+.searchbar-textbox::placeholder {
+  opacity: 0.69;
+}
+
+#TabsToolbar #searchbar:not(:focus-within) {
+  /* The tabs toolbar is usually a different color than the other toolbars, and
+     we can't predict it, to avoid a transparent field we enforce a border. */
+  border-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+
+#urlbar-input:-moz-lwtheme::selection,
+.searchbar-textbox:-moz-lwtheme::selection {
+  background-color: var(--lwt-toolbar-field-highlight, Highlight);
+  color: var(--lwt-toolbar-field-highlight-text, HighlightText);
+}
+
+#urlbar-input:not(:focus):-moz-lwtheme::selection,
+.searchbar-textbox:not(:focus-within):-moz-lwtheme::selection {
+  background-color: var(--lwt-toolbar-field-highlight, text-select-disabled-background);
+}
+
+#urlbar:not([focused="true"]) {
+  caret-color: transparent;
+}
+
+#urlbar.searchButton > #urlbar-input-container > #urlbar-search-button {
+  width: var(--urlbar-search-button-width);
+  background-image: url(chrome://global/skin/icons/search-glass.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  -moz-context-properties: fill, fill-opacity;
+  fill: var(--toolbarbutton-icon-fill);
+}
+
+#urlbar.searchButton > #urlbar-input-container[pageproxystate="invalid"] > #urlbar-search-button {
+  margin-inline-end: 6px;
+}
+
+/**
+ * The urlbar background is a separate element so we can animate it
+ * independently from the content. It's positioned absolutely and stretched to
+ * the bounds of the urlbar.
+ */
+
+#urlbar,
+#urlbar-input-container,
+.urlbarView {
+  position: relative;
+}
+
+#urlbar-background {
+  display: block;
+  position: absolute;
+  inset: 0;
+}
+
+:root:not([chromehidden~="toolbar"]) #urlbar.searchButton:not([breakout]) > #urlbar-background,
+:root:not([chromehidden~="toolbar"]) #urlbar.searchButton:not([breakout-extend]) > #urlbar-background {
+  inset-inline-start: var(--urlbar-search-button-width);
+}
+
+#urlbar-input-container {
+  /* Match urlbar-background's border. */
+  border: 1px solid transparent;
+  padding: var(--urlbar-container-padding);
+}
+
+#urlbar-container[breakout] {
+  position: relative;
+  min-height: var(--urlbar-container-height);
+}
+
+#urlbar[breakout] {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: var(--urlbar-height);
+  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2);
+  left: 0;
+}
+
+#urlbar[breakout] > #urlbar-input-container {
+  width: 100%;
+  height: 100%;
+}
+
+#urlbar:not([open]) > .urlbarView,
+#urlbar:not([breakout]) > .urlbarView {
+  display: none;
+}
+
+#urlbar[breakout][breakout-extend],
+#urlbar[breakout][breakout-extend-disabled][open] {
+  /* The z-index needs to be big enough to trump other positioned UI pieces
+     that we want to overlay. 3 is used in the tab bar. */
+  z-index: 3;
+  height: auto;
+}
+
+#urlbar[breakout][breakout-extend] {
+  top: 0;
+  left: calc(-1 * var(--urlbar-margin-inline));
+  width: calc(100% + 2 * var(--urlbar-margin-inline));
+}
+
+#urlbar[breakout][breakout-extend] > #urlbar-input-container {
+  height: var(--urlbar-toolbar-height);
+  padding-block: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 + var(--urlbar-container-padding));
+  padding-inline: calc(var(--urlbar-margin-inline) + var(--urlbar-container-padding));
+}
+
+#urlbar.searchButton[breakout][breakout-extend] > #urlbar-input-container > #urlbar-search-button {
+  fill: currentColor;
+  fill-opacity: .6;
+}
+
+@keyframes urlbar-grow {
+  0% {
+    transform: scaleX(.99) scaleY(.98);
+  }
+  100% {
+    transform: scale(1.0);
+  }
+}
+
+#urlbar[breakout][breakout-extend] > #urlbar-background {
+  animation-name: urlbar-grow;
+  animation-duration: 0s;
+  animation-timing-function: var(--animation-easing-function);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  #urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
+    animation-duration: 150ms;
+  }
+}
+
+:root[chromehidden~="toolbar"] #urlbar-container {
+  /* Remove excess space between the address bar and the menu button in popups. */
+  padding-inline-end: 0;
+}
+
+:root[customizing] .urlbar-input-box {
+  visibility: hidden;
+}
+
+#urlbar-container {
+  -moz-box-align: center;
+}
+
+#urlbar-container,
+#wrapper-urlbar-container {
+  -moz-box-flex: 400;
+}
+
+#urlbar-search-splitter {
+  /* The splitter width should equal the location and search bars' combined
+     neighboring margin and border width. */
+  min-width: 12px;
+  margin: 0 -6px;
+  position: relative;
+  border: none;
+  background: transparent;
+  appearance: none;
+}
+
+/* Urlbar search mode indicator */
+#urlbar-search-mode-indicator {
+  display: none;
+  background-color: var(--urlbar-box-bgcolor);
+  color: var(--urlbar-box-text-color);
+  margin-inline-end: 8px;
+  align-items: center;
+  border-radius: var(--urlbar-icon-border-radius);
+  padding-inline: 8px 6px;
+}
+
+#urlbar[focused="true"] #urlbar-search-mode-indicator {
+  background-color: var(--urlbar-box-focus-bgcolor);
+}
+
+#urlbar[searchmode] > #urlbar-input-container > #urlbar-search-mode-indicator {
+  display: inline-flex;
+}
+
+#urlbar[searchmode] > #urlbar-input-container > #urlbar-label-box {
+  display: none;
+}
+
+#urlbar-search-mode-indicator-close {
+  background: url(chrome://global/skin/icons/close.svg) no-repeat center;
+  background-size: 10px 10px;
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0.6;
+  fill: currentColor;
+  border-radius: var(--urlbar-icon-border-radius);
+}
+
+#urlbar-search-mode-indicator-close:hover {
+  background-color: var(--urlbar-box-hover-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
+}
+#urlbar-search-mode-indicator-close:hover:active {
+  background-color: var(--urlbar-box-active-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
+}
+
+@media (prefers-contrast) {
+  #urlbar-search-mode-indicator-close {
+    fill-opacity: 1.0;
+  }
+}
+
+#urlbar-search-mode-indicator-title {
+  padding-inline: 0 3px;
+}
+
+/* Page action panel */
+.pageAction-panel-button > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#pageAction-panel-bookmark,
+#star-button {
+  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
+}
+#pageAction-panel-bookmark[starred],
+#star-button[starred] {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+#star-button[starred] {
+  fill-opacity: 1;
+  fill: var(--toolbar-field-icon-fill-attention);
+}
+
+/* URL bar and page action buttons */
+
+/* The background can be very dark and if the add-on uses a black-ish svg it
+   will be barely visible. In the future we should have a standardized SVG
+   solution we can apply to add-on icons, for now we can only try to make them
+   visible through some filtering tricks */
+:root[lwt-toolbar-field-brighttext] #urlbar:not([focused="true"]) .urlbar-addon-page-action[style*=".svg"] > .urlbar-icon,
+:root[lwt-toolbar-field-focus-brighttext] #urlbar[focused="true"] .urlbar-addon-page-action[style*=".svg"] > .urlbar-icon {
+  filter: grayscale(100%) brightness(20%) invert();
+}
+
+@media (prefers-color-scheme: dark) {
+  /* As above, but for the default theme in dark mode, which suffers from the same issue */
+  :root:not(:-moz-lwtheme) .urlbar-addon-page-action[style*=".svg"] > .urlbar-icon {
+    filter: grayscale(100%) brightness(20%) invert();
+  }
+}
+
+#userContext-icons,
+#urlbar-zoom-button {
+  margin-inline: 6px;
+}
+
+.urlbar-icon {
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
+}
+
+.urlbar-page-action,
+#urlbar-go-button,
+.search-go-button {
+  width: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
+  height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
+  border-radius: var(--urlbar-icon-border-radius);
+  padding: var(--urlbar-icon-padding);
+  color: inherit;
+}
+
+.urlbar-page-action:not([disabled]):hover,
+#urlbar-go-button:hover,
+.search-go-button:hover {
+  background-color: var(--urlbar-box-hover-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
+}
+
+.urlbar-page-action:not([disabled])[open],
+.urlbar-page-action:not([disabled]):hover:active,
+#urlbar-go-button:hover:active,
+.search-go-button:hover:active {
+  background-color: var(--urlbar-box-active-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
+}
+
+.urlbar-page-action:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+}
+
+#urlbar-go-button,
+.search-go-button {
+  list-style-image: url("chrome://browser/skin/forward.svg");
+}
+
+#urlbar-go-button:-moz-locale-dir(rtl),
+.search-go-button:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+#pageActionButton,
+.share-more-button {
+  list-style-image: url("chrome://global/skin/icons/more.svg");
+}
+
+/**
+ * Contextual Feature Recommendation
+ *
+ * Animate the recommendation icon to expand outwards and display a text label.
+ * Fake the effect of a smoothly expanding width without animating any widths
+ * by (continuously) animating only `mask-position-x` and `transform`.
+ *
+ * In a few places, transition a property using the timing-function `step-start`
+ * while collapsed and `step-end` while expanded in order to (discretely) modify
+ * the value while expanded and while transitioning in either direction.
+ *
+ * This UI is part of an experiment launching in LTR locales only. Fixing the
+ * RTL issues is tracked by Bug 1485725.
+ */
+
+:root {
+  --cfr-animation-duration: 0.35s;
+  --cfr-button-addons-icon: url(chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg);
+  --cfr-button-features-icon: url(chrome://activity-stream/content/data/content/assets/glyph-cfr-feature-16.svg);
+  --cfr-button-highlights-icon: url(chrome://global/skin/icons/highlights.svg);
+  --cfr-active-color: #0060df;
+}
+
+#contextual-feature-recommendation {
+  width: 28px;
+  margin-inline-start: 0;
+  transition: margin-inline-start step-end var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] #contextual-feature-recommendation {
+  margin-inline-start: calc(var(--cfr-label-width) * -1);
+  transition: margin-inline-start step-start var(--cfr-animation-duration);
+}
+
+#cfr-button {
+  margin: -2px 0;
+  transition-property: fill, fill-opacity, transform;
+  transition-timing-function: ease-in-out;
+  transition-duration: var(--cfr-animation-duration);
+}
+#contextual-feature-recommendation[data-cfr-icon="webextensions-icon"] #cfr-button {
+  list-style-image: var(--cfr-button-addons-icon);
+}
+#contextual-feature-recommendation[data-cfr-icon="recommendations-icon"] #cfr-button {
+  list-style-image: var(--cfr-button-features-icon);
+}
+#contextual-feature-recommendation[data-cfr-icon="highlights-icon"] #cfr-button {
+  list-style-image: var(--cfr-button-highlights-icon);
+}
+#urlbar[cfr-recommendation-state="expanded"] #cfr-button {
+  fill: white;
+  fill-opacity: 1;
+  background-color: transparent; /* Override hover background-color */
+  transform: translateX(calc(var(--cfr-label-width) * -1));
+}
+#urlbar[cfr-recommendation-state="expanded"] #cfr-button:-moz-locale-dir(rtl) {
+  transform: translateX(calc(var(--cfr-label-width)));
+}
+@keyframes cfr-button-fade-through-active-color {
+  33% {
+    fill-opacity: 1;
+    fill: var(--cfr-active-color);
+  }
+  67% {
+    fill-opacity: 1;
+    fill: var(--cfr-active-color);
+  }
+}
+#urlbar[cfr-recommendation-state="collapsed"] #cfr-button {
+  animation: cfr-button-fade-through-active-color calc(3 * var(--cfr-animation-duration));
+}
+
+#cfr-label-container {
+  width: 0;
+  overflow: hidden;
+  border-radius: 5px;
+  padding-inline-start: 28px;
+  mask-image: linear-gradient(to right, transparent 0, black 0);
+  mask-position-x: var(--cfr-label-width);
+  mask-repeat: no-repeat;
+  transition-property: background-color, mask-position-x, width, margin-inline-end;
+  transition-timing-function: ease-in-out, ease-in-out, step-end, step-end;
+  transition-duration: var(--cfr-animation-duration);
+  -moz-box-align: center;
+  margin-block: calc((var(--urlbar-min-height) - var(--urlbar-container-padding) - 2px /* border */ - 24px) / 2);
+}
+#cfr-label-container:-moz-locale-dir(rtl) {
+  mask-position-x: calc(var(--cfr-label-width) * -1);
+}
+
+#urlbar[cfr-recommendation-state="expanded"] #cfr-label-container {
+  width: calc(var(--cfr-label-width) + 28px);
+  background-color: var(--cfr-active-color);
+  margin-inline-end: -28px;
+  mask-position-x: 0;
+  transition-timing-function: ease-in-out, ease-in-out, step-start, step-start;
+}
+
+#cfr-label {
+  margin: 0;
+  padding: 3px 5px;
+  padding-inline-start: 0;
+  color: white;
+  mask-image: linear-gradient(to right, transparent 0, black 0);
+  mask-position-x: var(--cfr-label-width);
+  mask-repeat: no-repeat;
+  transition: mask-position-x ease-in-out var(--cfr-animation-duration);
+}
+#cfr-label:-moz-locale-dir(rtl) {
+  mask-position-x: calc(var(--cfr-label-width) * -1);
+}
+#urlbar[cfr-recommendation-state="expanded"] #cfr-label {
+  mask-position-x: 0;
+}
+
+/* Shift the url-bar text fading to stop the recommendation overlapping */
+#urlbar[cfr-recommendation-state] #urlbar-input {
+  /* A mask-image is usually only defined for the url bar when text overflows.
+     We need to re-define the mask image here so that it shows up correctly when
+     we transition to or from an `expanded` state (in which the right end of the
+     url bar may be obscured without overflow). */
+  mask-image: linear-gradient(to left, transparent, black 3ch);
+  transition: mask-position-x ease-in-out var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state] #urlbar-input:-moz-locale-dir(rtl) {
+  mask-image: linear-gradient(to right, transparent, black 3ch);
+}
+#urlbar[cfr-recommendation-state="expanded"] #urlbar-input {
+  mask-position-x: calc(var(--cfr-label-width) * -1);
+}
+#urlbar[cfr-recommendation-state="expanded"] #urlbar-input:-moz-locale-dir(rtl) {
+  mask-position-x: calc(var(--cfr-label-width));
+}
+
+/* Reader mode icon */
+
+#reader-mode-button > .urlbar-icon {
+  list-style-image: url(chrome://browser/skin/reader-mode.svg);
+}
+
+#reader-mode-button[readeractive] > .urlbar-icon {
+  fill: var(--toolbar-field-icon-fill-attention);
+  fill-opacity: 1;
+}
+
+/* Zoom button */
+
+#urlbar-zoom-button {
+  appearance: none;
+  color: inherit;
+  font-size: .8em;
+  padding: 3px 7px;
+  border-radius: var(--urlbar-icon-border-radius);
+  background-color: var(--urlbar-box-bgcolor);
+  color: var(--urlbar-box-text-color);
+  margin-block: calc((var(--urlbar-min-height) - 20px) / 2 - 1px /* border */ - var(--urlbar-container-padding));
+  overflow: hidden;
+}
+
+#urlbar[focused="true"] #urlbar-zoom-button:not(:hover) {
+  background-color: var(--urlbar-box-focus-bgcolor);
+}
+
+#urlbar-zoom-button:hover {
+  background-color: var(--urlbar-box-hover-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
+}
+
+#urlbar-zoom-button:hover:active {
+  background-color: var(--urlbar-box-active-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
+}
+
+@keyframes urlbar-zoom-reset-pulse {
+  0% {
+    transform: scale(0);
+  }
+  75% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1.0);
+  }
+}
+
+#urlbar-zoom-button[animate="true"] {
+  animation-name: urlbar-zoom-reset-pulse;
+  animation-duration: 250ms;
+}
+
+#urlbar-zoom-button:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+}
+
+#urlbar-zoom-button > .toolbarbutton-text {
+  display: -moz-box;
+}
+
+#urlbar-zoom-button > .toolbarbutton-icon {
+  display: none;
+}
+
+/* Search bar */
+
+#search-container {
+  min-width: 125px;
+}
+
+#search-container,
+#wrapper-search-container {
+  -moz-box-flex: 175;
+}
+
+#search-container[width] {
+  /* Take something closer to the explicit width when requested */
+  -moz-box-flex: 1;
+}
+
+#search-container[cui-areatype="panel"] > #searchbar:-moz-lwtheme {
+  /* Theme authors usually only consider contrast against the toolbar when
+     picking a border color for the search bar. Since the search bar can be
+     dragged into the overflow panel, we need to show a high-contrast border
+     around the searchbar in case the searchbar and panel background are the
+     same color. */
+  border-color: var(--panel-separator-color);
+}
+
+.search-go-button {
+  margin-inline: 1px;
+}
+
+.searchbar-search-button {
+  -moz-box-align: center;
+  fill: currentColor;
+}
+
+.searchbar-search-icon {
+  list-style-image: url(chrome://global/skin/icons/search-glass.svg);
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
+  pointer-events: none;
+  margin-inline: 8px 6px;
+  width: 16px;
+}
+
+.searchbar-search-icon-overlay {
+  pointer-events: none;
+}
+
+.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay {
+  list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg);
+  margin-inline: -15px 4px;
+  margin-top: -10px;
+  width: 11px;
+  height: 11px;
+}
+
+.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
+  margin-inline: -25px 14px;
+}
+
+.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay {
+  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+  -moz-context-properties: fill;
+  margin-inline: -8px 2px;
+  width: 6px;
+  height: 6px;
+}
+
+.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
+  margin-inline: -26px 20px;
+}
+
+.searchbar-engine-one-off-add-engine:not([image]),
+moz-input-box > menupopup .context-menu-add-engine:not([image]) {
+  list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
+}
+
+@media (min-resolution: 1.1dppx) {
+  .searchbar-engine-one-off-add-engine:not([image]),
+  moz-input-box > menupopup .context-menu-add-engine:not([image]) {
+    list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png");
+  }
+}
+
+.searchbar-engine-one-off-add-engine > .button-box::after,
+moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
+  content: "";
+  position: relative;
+  display: -moz-box;
+  background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
+  height: 11px;
+  width: 11px;
+  margin-inline: -4px -7px;
+  margin-top: -13px;
+}
+
+moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
+  /* These differ from the urlbar and searchbar because the context menu
+     may not have enough space */
+  margin-inline: -7px -4px;
+  margin-top: -8px;
+}
+
+/* Fade a little the icon so that the + badge is more evident and the button
+   is less likely to be visually confused with a normal search shortcut */
+.searchbar-engine-one-off-add-engine[image]:not(:hover) > .button-box > .button-icon {
+  opacity: 0.7;
+}
+.searchbar-engine-one-off-add-engine[image]:hover > .button-box > .button-icon {
+  opacity: 1;
+}
diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css
new file mode 100644
index 0000000000..ad9065af9d
--- /dev/null
+++ b/browser/themes/shared/urlbarView.css
@@ -0,0 +1,850 @@
+/* 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/. */
+
+@import url("chrome://browser/skin/urlbar-dynamic-results.css");
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --autocomplete-popup-highlight-background: SelectedItem;
+  --autocomplete-popup-highlight-color: SelectedItemText;
+
+  --urlbar-popup-action-color: hsl(178, 100%, 28%);
+
+  --urlbarView-action-slide-in-distance: 200px;
+
+  --urlbarView-item-inline-padding: var(--urlbar-icon-padding);
+
+  --urlbarView-favicon-width: 16px;
+  --urlbarView-icon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline));
+}
+
+:root:-moz-lwtheme {
+  --urlbar-popup-action-color: rgb(91,91,102);
+  --urlbar-popup-url-color: rgb(0,97,224);
+  /* Fallback colours for when theme authors don't define lwtheme variables. */
+  --autocomplete-popup-highlight-background: rgb(0, 99, 255);
+  --autocomplete-popup-highlight-color: white;
+}
+
+:root[lwt-toolbar-field-focus-brighttext] {
+  --urlbar-popup-url-color: var(--lwt-brighttext-url-color);
+  --urlbar-popup-action-color: #30e60b;
+}
+
+:root[lwt-toolbar-field-brighttext] {
+  --autocomplete-popup-highlight-background: rgb(0, 99, 225);
+}
+
+:root[lwt-toolbar-field-focus-brighttext] {
+  --urlbar-popup-action-color: rgb(191,191,201);
+}
+
+:root:-moz-locale-dir(rtl) {
+  --urlbarView-action-slide-in-distance: -200px;
+}
+
+.urlbarView {
+  /* Don't handle window drag events in case we are overlapping a toolbar */
+  -moz-window-dragging: no-drag;
+
+  display: block;
+  text-shadow: none;
+  overflow: clip;
+  margin-inline: calc(5px + var(--urlbar-container-padding));
+  width: calc(100% - 2 * (5px + var(--urlbar-container-padding)));
+  /* Match urlbar-background's border. */
+  border-inline: 1px solid transparent;
+}
+
+.urlbarView-body-inner {
+  width: 100%;
+}
+
+#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner {
+  border-top: 1px solid var(--autocomplete-popup-separator-color);
+}
+
+.urlbarView-results {
+  padding-block: 4px;
+  white-space: nowrap;
+}
+
+/* Vertically center the one-offs when no results are present. */
+.urlbarView[noresults] > .urlbarView-body-outer > .urlbarView-body-inner > .urlbarView-results {
+  padding-block: 0;
+}
+
+.urlbarView-row {
+  display: flex;
+  align-items: center;
+  fill: currentColor;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
+  padding-block: 2px;
+}
+
+:root:not([uidensity=compact]) .urlbarView-row:not([type=tip], [type=dynamic]) {
+  min-height: 32px;
+}
+
+:root[uidensity=touch] .urlbarView-row:not([type=tip], [type=dynamic]) {
+  padding-block: 11px;
+}
+
+.urlbarView-row-inner {
+  display: inline-flex;
+  flex: 1 1;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  border-radius: var(--toolbarbutton-border-radius);
+  padding-inline: var(--urlbarView-item-inline-padding);
+  padding-block: 6px;
+}
+
+:root:not([uidensity=compact]) .urlbarView-row-inner {
+  min-height: 20px; /* row min-height 32px - (2 * padding-block 6px) */
+}
+
+.urlbarView-row-inner,
+.urlbarView-no-wrap {
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: start;
+}
+
+.urlbarView-no-wrap {
+  display: inline-flex;
+  max-width: 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.urlbarView-url {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.urlbarView[actionoverride] .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap,
+.urlbarView-row[has-url]:not([type$=tab]) > .urlbarView-row-inner > .urlbarView-no-wrap,
+.urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap {
+  /* We prioritize icons + title + action over the url, so they can grow freely,
+     but the url should never disappear when it's visible */
+  flex-shrink: 0;
+  max-width: calc(70% - 2 * (var(--urlbarView-favicon-width) + (6px + 2px)));
+}
+
+/* Wrap the url to a second line when the window is narrow. Do not wrap when the
+   window is also short, because fewer results will be shown. */
+@media screen and (min-height: 600px) {
+  .urlbarView-results[wrap] > .urlbarView-row > .urlbarView-row-inner {
+    flex-wrap: wrap;
+  }
+  .urlbarView-results[wrap] > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap {
+    max-width: 100% !important;
+    flex-basis: 100%;
+  }
+  .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url,
+  .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-url {
+    margin-top: 2px;
+  }
+  /* urlbarView-url is forced to be LTR for RTL locales, so set the padding based on the browser's directionality. */
+  .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) {
+    padding-left: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width));
+  }
+  .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) {
+    padding-right: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width));
+  }
+  /* Note: switchtab entries show the url only in override mode,
+     remotetab and sponsored ones only when selected or :hover. */
+  .urlbarView[actionoverride] .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+  .urlbarView-results[wrap] > .urlbarView-row[has-url]:not([type$=tab], [sponsored]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+  .urlbarView-results[wrap] > .urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+  .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title-separator,
+  .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator {
+    display: none;
+  }
+  .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap {
+    flex-wrap: wrap;
+  }
+  .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+    flex-basis: 100%;
+    margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width));
+  }
+
+  .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top {
+    flex-wrap: wrap;
+  }
+  .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap {
+    flex-basis: 100%;
+  }
+}
+
+.urlbarView-row:not([type=tip], [type=dynamic]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title[overflow],
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title[overflow],
+.urlbarView-tags[overflow],
+.urlbarView-url[overflow] {
+  mask-image: linear-gradient(to left, transparent, black 2em);
+}
+
+.urlbarView-row:not([type=tip], [type=dynamic]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title[overflow]:not([isurl]):-moz-locale-dir(rtl),
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title[overflow]:-moz-locale-dir(rtl),
+.urlbarView-tags[overflow]:-moz-locale-dir(rtl) {
+  mask-image: linear-gradient(to right, transparent, black 2em);
+}
+
+.urlbarView-title[isurl]:-moz-locale-dir(rtl),
+.urlbarView-url:-moz-locale-dir(rtl) {
+  direction: ltr !important;
+}
+
+.urlbarView-url:-moz-locale-dir(rtl) {
+  /* .urlbarView-url can grow due to `flex-grow: 1`, so without `text-align:
+     right`, the URL text would be left-aligned within .urlbarView-url for RTL
+     due to the `direction: ltr` rule.  .urlbarView-title does not have this
+     problem since it does not have flex. */
+  text-align: right;
+}
+
+.urlbarView-row[selectable]:hover > .urlbarView-row-inner,
+.urlbarView-row-inner[selectable]:hover {
+  background-color: var(--autocomplete-popup-hover-background);
+}
+
+.urlbarView-row[selectable][selected] > .urlbarView-row-inner,
+.urlbarView-row-inner[selectable][selected] {
+  background-color: var(--autocomplete-popup-highlight-background);
+  color: var(--autocomplete-popup-highlight-color);
+}
+
+/* Favicon */
+
+.urlbarView-favicon {
+  width: var(--urlbarView-favicon-width);
+  height: var(--urlbarView-favicon-width);
+  margin-inline-end: var(--urlbarView-icon-margin-end);
+  background-repeat: no-repeat;
+  background-size: contain;
+  object-fit: contain;
+  flex-shrink: 0;
+  -moz-context-properties: fill, fill-opacity;
+}
+
+
+.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+  width: 24px;
+  height: 24px;
+  margin-inline-end: 12px;
+  flex-basis: 24px;
+  flex-grow:  0;
+}
+
+.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+  visibility: hidden;
+}
+
+.urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+  /* We use the URL color for this icon to inherit its accessibility
+     properties, like adapting to high contrast modes. We also want to ensure
+     contrast from the result highlight. */
+  color: var(--urlbar-popup-url-color);
+  -moz-context-properties: fill;
+}
+
+/* Type icon */
+
+.urlbarView-type-icon {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  margin-top: var(--urlbarView-favicon-width);
+  margin-inline-start: 8px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  -moz-context-properties: fill, stroke;
+  stroke: var(--toolbar-field-focus-background-color);
+}
+
+/* Favicon badges have this priority: pinned > bookmark. */
+
+.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
+  background-image: url(chrome://browser/skin/bookmark-12.svg);
+  fill: var(--toolbar-field-icon-fill-attention);
+}
+
+.urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
+  background-image: url(chrome://browser/skin/pin-12.svg);
+  fill: rgb(91,91,102);
+}
+
+:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
+  fill: rgb(251,251,254);
+}
+
+/* Buttons */
+
+.urlbarView-button {
+  display: inline-block;
+  min-width: 24px;
+  min-height: 24px;
+  vertical-align: middle;
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  margin-inline: 4px;
+  -moz-context-properties: fill, fill-opacity;
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+.urlbarView-button[selected] {
+  outline: var(--focus-outline);
+}
+
+.urlbarView-button:hover,
+.urlbarView-button[open] {
+  background-color: var(--autocomplete-popup-hover-background);
+}
+
+.urlbarView-button + .urlbarView-button {
+  margin-inline-start: 0;
+}
+
+.urlbarView-button-block {
+  background-image: url("chrome://browser/skin/thumb-down.svg");
+}
+
+.urlbarView-button-help {
+  background-image: url("chrome://global/skin/icons/help.svg");
+}
+
+.urlbarView-button-menu {
+  background-image: url("chrome://global/skin/icons/more.svg");
+}
+
+.urlbarView-button:not(:empty) {
+  min-height: 16px;
+  padding: 7px;
+}
+
+/* The tip button is a Photon default button when unfocused and a
+   primary button in all other states. */
+.urlbarView-button:not(:empty) {
+  border-radius: var(--toolbarbutton-border-radius);
+  font-size: 0.93em;
+  background-color: var(--button-bgcolor);
+  font-weight: 600;
+  background-clip: padding-box;
+  min-width: 8.75em;
+  text-align: center;
+  flex-basis: initial;
+  flex-shrink: 0;
+  margin-inline-end: 4px;
+}
+
+.urlbarView-button:not(:empty):hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+.urlbarView-button:not(:empty):hover:active {
+  background-color: var(--button-active-bgcolor);
+}
+
+.urlbarView-button:not(:empty)[selected] {
+  color: var(--button-primary-color);
+  background-color: var(--button-primary-bgcolor);
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+.urlbarView-button:not(:empty)[selected]:hover {
+  background-color: var(--button-primary-hover-bgcolor);
+}
+
+.urlbarView-button:not(:empty)[selected]:hover:active {
+  background-color: var(--button-primary-active-bgcolor);
+}
+
+.urlbarView-button:not(:empty) + .urlbarView-button:empty {
+  /* Add space between a labeled button followed by an unlabeled button. */
+  margin-inline-start: 1.8em;
+}
+
+.urlbarView-button:not(:empty):last-child {
+  /* Add space between a labeled button and the trailing edge of the panel. */
+  margin-inline-end: 1.8em;
+}
+
+/* When the last button is unlabeled, vertically align it with the settings icon
+   in the search shortcuts. */
+.urlbarView-button:empty:last-child {
+  margin-inline-end: 2px;
+}
+
+/* Tip rows */
+
+.urlbarView-row[type=tip] {
+  padding-block: 18px;
+}
+
+.urlbarView-row[type=tip]:not(:last-child) {
+  border-bottom: 1px solid var(--panel-separator-color);
+  margin-bottom: 4px;
+}
+
+.urlbarView-row[type=tip]:not(:first-child) {
+  border-top: 1px solid var(--panel-separator-color);
+  margin-top: 4px;
+}
+
+.urlbarView-row[type=tip] > .urlbarView-row-inner {
+  min-height: 32px;
+
+  /* Add space between the tip title (and the rest of row-inner) and its
+     button. */
+  margin-inline-end: 1.8em;
+}
+
+.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-url {
+  display: none;
+}
+
+.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title {
+  white-space: normal;
+}
+
+/* Row label (a.k.a. group label) */
+
+.urlbarView-row[label]::before {
+  content: attr(label);
+  display: block;
+  /* Remove the label from the document flow so it doesn't affect the row
+     selection and hover states. */
+  position: absolute;
+  /* `top` controls how far the label is from the main part of the row. */
+  top: -1.27em;
+  margin-inline-start: var(--urlbarView-item-inline-padding);
+  font-size: 0.8em;
+  /* The color and opacity of labels is the same as the "This time, search with"
+     text in the search shortcuts. See `.search-panel-header > label` in
+     searchbar.inc.css. */
+  opacity: 0.6;
+  pointer-events: none;
+}
+:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[label]::before {
+  /* Same as `.search-panel-header > label` in searchbar.inc.css */
+  opacity: 1;
+}
+
+.urlbarView-row[label] {
+  position: relative;
+  /* `margin-block-start` controls how far the main part of the row is from the
+     main part of the previous row. */
+  margin-block-start: 1.46em;
+}
+
+/* Title */
+
+.urlbarView-title {
+  overflow: hidden;
+  white-space: nowrap;
+  /* Explicitly set line-height to avoid excessively tall rows if the title triggers use of
+     fallback fonts with extreme metrics. */
+  line-height: 1.4;
+}
+
+/* Tail suggestions */
+.urlbarView-tail-prefix {
+  display: none;
+  justify-content: flex-end;
+  white-space: pre;
+}
+
+.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-tail-prefix {
+  display: inline-flex;
+}
+
+.urlbarView-tail-prefix > .urlbarView-tail-prefix-string {
+  visibility: hidden;
+}
+
+.urlbarView-tail-prefix > .urlbarView-tail-prefix-char {
+  position: absolute;
+}
+
+/* Title separator */
+
+.urlbarView-title-separator::before {
+  content: "\2014";
+  margin: 0 .4em;
+  opacity: 0.6;
+}
+
+.urlbarView-title:empty + .urlbarView-tags:empty + .urlbarView-title-separator {
+  display: none;
+}
+
+/* URLs, action labels, tags */
+
+.urlbarView-tags,
+.urlbarView-url,
+.urlbarView-title:not(:empty) ~ .urlbarView-action {
+  font-size: .85em;
+}
+
+.urlbarView-title:not(:empty) ~ .urlbarView-action {
+  color: var(--urlbar-popup-action-color);
+}
+
+.urlbarView-row[sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+  color: unset;
+  opacity: .6;
+}
+
+.urlbarView-row[sponsored][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
+.urlbarView-row[sponsored] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-action {
+  opacity: 1;
+}
+
+/* Firefox Suggest sponsored results */
+
+.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner {
+  /* 0px of top padding because the space between the favicon/title and the top
+     edge of the row is determined by the favicon margin-top and we don't want
+     any extra padding to complicate that. 1px of bottom padding so the bottom
+     edge of the action isn't touching the bottom edge of the row. The space
+     between the bottom edge of the favicon and the bottom edge of the row is
+     determined by this + the action margin-top. */
+  padding-block: 0 1px;
+}
+
+.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap {
+  /* Wrap the action span onto a new row. */
+  flex-wrap: wrap;
+}
+
+.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+  /* The favicon should be vertically centered in the row. The action span wraps
+     below the favicon and title, leaving the favicon centered with the title,
+     not the row, so we add margin-top. Normally there is 8x between the top
+     edge of the favicon and the top edge of the row. Here 1em = 13.75px, so
+     that's 8 / 13.75 =~ 0.58em. */
+  margin-top: 0.58em;
+}
+
+.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title {
+  /* The width of favicon + this title element + help icon is over than total
+     displayed width, favicon and title will collapse as different row, the style
+     will be broken. To avoid it, we specify the max displayable width for title
+     explicitly. */
+  flex-basis: calc(100% - var(--urlbarView-favicon-width) - var(--urlbarView-icon-margin-end));
+  /* Move the title away from the action a little. This does not affect the
+     height of the row. */
+  margin-top: -0.3em;
+}
+
+.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+  flex-basis: 100%;
+  margin-inline-start: calc(var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end));
+  font-size: 0.73em;
+  /* This value + the bottom padding control the space between the bottom edge
+     of the favicon and the bottom edge of the row. The bottom padding is 1px,
+     leaving 8px - 1px = 7px we need to make up here. Here 1em = 0.73 * 13.75 =~
+     10px, so that's 7 / 10 = 0.7em. However, the action itself takes up some of
+     that space, so it's not that simple. The value used here was arrived at by
+     trial and error and is approximately 5px. */
+  margin-top: -0.5em;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  /* The slide-in effect is delayed ~100ms to reduce motion during result
+     composition. We set opacity: 0 at the 0% keyframe to ensure the text is not
+     seen by the user until after the delay. */
+  @keyframes urlbarView-action-slide-in {
+    0%, 28.6% {
+      translate: var(--urlbarView-action-slide-in-distance);
+      opacity: 0;
+    }
+    100% {
+      translate: 0;
+      opacity: 1;
+    }
+  }
+
+  .urlbarView-results > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title:not(:empty) ~ .urlbarView-action[slide-in] {
+    animation-name: urlbarView-action-slide-in;
+    animation-duration: 350ms;
+    animation-timing-function: var(--animation-easing-function);
+  }
+}
+
+.urlbarView-url {
+  overflow: hidden;
+  color: var(--urlbar-popup-url-color);
+  /* Increase line-height to avoid cutting overhanging glyphs due to masking on
+     the element */
+  line-height: 1.4;
+}
+
+.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-no-wrap >.urlbarView-action,
+.urlbarView-row:hover > .urlbarView-row-inner > .urlbarView-no-wrap >.urlbarView-action,
+.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-url,
+.urlbarView-row-inner[selected] > .urlbarView-no-wrap >.urlbarView-action,
+.urlbarView-row-inner:hover > .urlbarView-no-wrap >.urlbarView-action,
+.urlbarView-row-inner[selected] > .urlbarView-url,
+.urlbarView-row[type=tabtosearch][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+  color: inherit;
+}
+
+.urlbarView-row:is([type=remotetab], [sponsored]):not([selected], :hover) > .urlbarView-row-inner > .urlbarView-url,
+.urlbarView-row:is([type=search], [restyled-search]):not([selected], [show-action-text], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+.urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-url {
+  /* Use visibility:collapse instead of display:none since the latter can
+     confuse the overflow state of title and url elements when their content
+     changes while they're hidden. */
+  visibility: collapse;
+}
+
+.urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
+.urlbarView-row:is([type=search], [restyled-search]):not([selected], [show-action-text], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
+.urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
+.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+.urlbarView[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+  display: none;
+}
+
+/* Switch-to-tab action text is styled as a chiclet. */
+.urlbarView-row:is([type=switchtab], [type=remotetab]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+  color: var(--urlbar-box-text-color);
+  background-color: var(--urlbar-box-focus-bgcolor);
+  border-radius: var(--toolbarbutton-border-radius);
+  padding: 6px 8px;
+  margin-block: -6px;
+  margin-inline-start: 8px;
+}
+
+:root[uidensity=compact] .urlbarView-row:is([type=switchtab], [type=remotetab]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+  padding: 3px 6px;
+  margin-block: -3px;
+}
+
+/* On hover and selected the chiclet background would fade into the row style,
+   thus we invert the background, using the panel color, instead. */
+.urlbarView-row:is([type=switchtab], [type=remotetab]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+  background-color: var(--toolbar-field-focus-background-color);
+  color: var(--toolbar-field-focus-color);
+}
+
+.urlbarView-row[type=remotetab]:not([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before,
+.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before {
+  /* We make the title separator transparent so it stays in the accessibility
+     tree. We want screen readers to pause between the result title and the
+     switch-to-tab action text. */
+  opacity: 0;
+  /* -1em for the width of the \2014 character. -.4em to offset the
+     margin-inline-start already set on this element. */
+  margin-inline-end: -1.4em;
+}
+
+/* Tags */
+
+.urlbarView-tags {
+  overflow: hidden;
+  display: flex;
+  /* Increase line-height to avoid cutting overhanging glyphs due to masking on
+     the element */
+  line-height: 1.4;
+}
+
+.urlbarView-tag {
+  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+  padding: 0 4px;
+  margin-inline-start: .4em;
+  border-radius: 4px;
+}
+
+/* Best match */
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner {
+  align-items: center;
+  justify-content: start;
+}
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner,
+.urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner {
+  flex-wrap: nowrap;
+}
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-favicon {
+  width: 52px;
+  height: 52px;
+  flex-basis: 52px;
+  flex-shrink: 0;
+  flex-grow: 0;
+  border-radius: 2px;
+}
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body {
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+}
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+  flex-shrink: 0;
+  min-width: 0;
+}
+
+.urlbarView-results:not([wrap]) > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap {
+  /* Limit the title (which is inside .urlbarView-row-body-top-no-wrap) to 70%
+     of the width so the URL is never completely hidden. */
+  max-width: 70%;
+}
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-bottom {
+  font-size: 0.73em;
+  opacity: 0.6;
+}
+
+.urlbarView-row[type=bestmatch][selected] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-bottom,
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner[selected] > .urlbarView-row-body > .urlbarView-row-body-bottom {
+  opacity: 1;
+}
+
+/* Search one-offs */
+
+#urlbar .search-one-offs:not([hidden]) {
+  display: flex;
+  align-items: start;
+  padding-block: 10px;
+  flex-wrap: wrap;
+}
+
+.urlbarView:not([noresults]) > .search-one-offs:not([hidden]) {
+  border-top: 1px solid var(--autocomplete-popup-separator-color);
+}
+
+:root[uidensity=touch] #urlbar .search-one-offs:not([hidden]) {
+  padding-block: 15px;
+}
+
+#urlbar .search-panel-one-offs-container {
+  /* Make sure horizontally we can fit four buttons, empty space, settings. */
+  min-width: calc(4 * /* one-off with end margin */ 40px + /* settings with start margin */ 56px);
+}
+
+#urlbar .search-panel-header {
+  padding: 0;
+  min-height: 28px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#urlbar .search-panel-one-offs-header-label {
+  white-space: nowrap;
+  margin: 0;
+  padding-inline: var(--urlbarView-item-inline-padding) 18px;
+}
+
+#urlbar .searchbar-engine-one-off-item {
+  min-width: 28px;
+  height: 28px;
+  margin-inline: 0 12px;
+  border-radius: var(--toolbarbutton-border-radius);
+}
+
+#urlbar .searchbar-engine-one-off-item:last-child {
+  /* This applies to both the last one-off and the compact settings button */
+  margin-inline-end: 0;
+}
+
+#urlbar .search-setting-button {
+  /* Force empty space before the button */
+  margin-inline-start: calc(32px - /* settings start padding */ 8px );
+}
+
+.urlbarView-row[source="bookmarks"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
+#urlbar-engine-one-off-item-bookmarks {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+  fill: var(--toolbar-field-icon-fill-attention);
+  fill-opacity: 1;
+  -moz-context-properties: fill, fill-opacity;
+}
+
+.urlbarView-row[source="tabs"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
+#urlbar-engine-one-off-item-tabs {
+  list-style-image: url("chrome://browser/skin/tab.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
+}
+
+.urlbarView-row[source="history"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
+#urlbar-engine-one-off-item-history {
+  list-style-image: url("chrome://browser/skin/history.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
+}
+
+.urlbarView-row[source="actions"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
+#urlbar-engine-one-off-item-actions {
+  list-style-image: url("chrome://browser/skin/quickactions.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
+}
+
+/**
+ * We remove the blue fill from the bookmark icon when it is selected. We use
+ * a blue color as the selection background-color in some instances (Linux with
+ * blue system color; fallback for third-party themes) and we want to ensure
+ * contrast.
+ */
+.urlbarView-row[source="bookmarks"][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
+#urlbar-engine-one-off-item-bookmarks[selected] {
+  fill: currentColor;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
+}
+
+/* search bar popup */
+
+#PopupSearchAutoComplete {
+  --panel-color: var(--toolbar-field-focus-color);
+  --panel-background: var(--toolbar-field-focus-background-color);
+  --panel-border-color: var(--arrowpanel-border-color);
+}
+
+#PopupSearchAutoComplete::part(content)  {
+  --panel-padding: var(--panel-subview-body-padding);
+  /* NOTE(emilio): Once bug 1551637 is fixed we don't need to use block layout
+   * for this (though it doesn't really hurt) */
+  display: block;
+}
+
+@media not (prefers-contrast) {
+  #PopupSearchAutoComplete::part(content)  {
+    /* Remove the top border since the panel is flush with the input. */
+   border-top-width: 0;
+  }
+}
+
+#PopupSearchAutoComplete .autocomplete-richlistitem[selected] {
+  background: var(--autocomplete-popup-highlight-background);
+  color: var(--autocomplete-popup-highlight-color);
+}
diff --git a/browser/themes/shared/weather/cloudy.svg b/browser/themes/shared/weather/cloudy.svg
new file mode 100644
index 0000000000..7f32d9f52f
--- /dev/null
+++ b/browser/themes/shared/weather/cloudy.svg
@@ -0,0 +1,24 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .cloud-1 {
+    fill: context-fill #5B5B66;
+  }
+  .cloud-2 {
+    fill: context-fill #80808F;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .cloud-1 {
+      fill: context-fill #BFBFC9;
+    }
+    .cloud-2 {
+      fill: context-fill #80808F;
+    }
+  }
+</style>
+<path class="cloud-1" d="M2.00006 14.5435C2.00098 13.7182 2.28215 12.9177 2.79752 12.2731C3.31289 11.6285 4.0319 11.178 4.83676 10.9955C5.04917 10.0191 5.59095 9.14552 6.3712 8.52133C7.15144 7.89713 8.12265 7.56032 9.12182 7.56742C10.105 7.55889 11.0612 7.88872 11.83 8.50156C12.6084 9.09693 13.1542 9.94582 13.3726 10.9012H13.604C14.0823 10.9001 14.5562 10.9932 14.9985 11.1752C15.4408 11.3572 15.843 11.6245 16.182 11.9619C16.521 12.2994 16.7902 12.7003 16.9743 13.1417C17.1584 13.5832 17.2537 14.0566 17.2549 14.5349C17.2526 15.5025 16.8672 16.4298 16.183 17.114C15.4989 17.7982 14.5716 18.1835 13.604 18.1858H5.65949C5.1728 18.1902 4.69075 18.0908 4.24543 17.8944C3.81025 17.715 3.41214 17.4564 3.07132 17.1317C2.74139 16.7948 2.47694 16.3996 2.29144 15.9661C2.09655 15.5173 1.99731 15.0328 2.00006 14.5435ZM3.24272 14.5435C3.23495 14.8623 3.2934 15.1792 3.41436 15.4742C3.53532 15.7692 3.71617 16.036 3.94547 16.2575C4.16798 16.4856 4.43487 16.6656 4.72968 16.7865C5.02448 16.9073 5.34093 16.9665 5.65949 16.9603H13.6126C13.9311 16.9665 14.2476 16.9073 14.5424 16.7865C14.8372 16.6656 15.1041 16.4856 15.3266 16.2575C15.5579 16.037 15.7406 15.7707 15.8631 15.4755C15.9855 15.1804 16.0451 14.863 16.0379 14.5435C16.0483 14.2236 15.9903 13.9052 15.8676 13.6096C15.7449 13.3139 15.5605 13.048 15.3266 12.8295C15.1035 12.6022 14.8365 12.4227 14.5418 12.3019C14.2471 12.1811 13.931 12.1215 13.6126 12.1267H12.3785C12.3609 12.1297 12.3429 12.1285 12.3259 12.1231C12.309 12.1177 12.2935 12.1083 12.281 12.0957C12.2684 12.0831 12.259 12.0677 12.2536 12.0507C12.2482 12.0337 12.2469 12.0157 12.2499 11.9982L12.1899 11.5782C12.1131 10.8055 11.7509 10.0891 11.1739 9.56927C10.597 9.04941 9.84697 8.76343 9.0704 8.76724C8.29051 8.75641 7.53609 9.04469 6.96215 9.57283C6.37589 10.0834 6.01288 10.8033 5.95088 11.5782L5.89089 11.9382C5.89089 12.0239 5.84804 12.0667 5.75377 12.0667L5.36811 12.1267C4.77169 12.1702 4.21549 12.4437 3.81692 12.8895C3.42478 13.3492 3.21982 13.9396 3.24272 14.5435Z"/>
+<path class="cloud-2" d="M10.8872 7.25033C10.7587 7.20748 10.7415 7.14749 10.8273 7.07036C11.191 6.63329 11.6492 6.28437 12.1672 6.04984C12.6853 5.81531 13.2498 5.70126 13.8182 5.71628C14.6824 5.73254 15.5179 6.0287 16.1994 6.56029C16.8809 7.09188 17.3715 7.8302 17.5976 8.6644H17.7262C18.5945 8.6644 19.4272 9.00931 20.0411 9.62327C20.6551 10.2372 21 11.0699 21 11.9382C20.997 12.7695 20.677 13.5684 20.1053 14.1719C19.5336 14.7755 18.7533 15.1383 17.9233 15.1863C17.8376 15.1863 17.7948 15.1434 17.7948 15.0491V14.0807C17.7948 13.9864 17.8376 13.9436 17.9233 13.9436C18.4276 13.8956 18.8955 13.6601 19.2345 13.2837C19.5715 12.9129 19.7553 12.4281 19.749 11.9271C19.7426 11.4262 19.5465 10.9462 19.2003 10.5841C19.014 10.391 18.7902 10.2382 18.5425 10.135C18.2949 10.0318 18.0287 9.98047 17.7605 9.98419H16.5435L16.4664 9.43571C16.4276 8.93659 16.2482 8.45868 15.9488 8.0574C15.6495 7.65612 15.2426 7.3479 14.7752 7.16849C14.3078 6.98908 13.7992 6.94582 13.3082 7.04373C12.8173 7.14164 12.3641 7.37671 12.0014 7.72168H11.8128C11.5153 7.54376 11.2061 7.38628 10.8872 7.25033Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/flurries.svg b/browser/themes/shared/weather/flurries.svg
new file mode 100644
index 0000000000..3c4fe0df38
--- /dev/null
+++ b/browser/themes/shared/weather/flurries.svg
@@ -0,0 +1,30 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .snow {
+    fill: context-fill #80808F;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .cloud {
+      fill: context-fill #BFBFC9;
+    }
+    .snow {
+      fill: context-fill #FFFFFF;
+    }
+  }
+</style>
+<path class="cloud" d="M2.00113 11.2761C1.97843 10.3047 2.29954 9.35647 2.90782 8.59876C3.49457 7.84442 4.3215 7.31326 5.25152 7.09331C5.50041 5.95661 6.1351 4.94111 7.04779 4.21928C7.95316 3.50541 9.07253 3.11719 10.2255 3.11719C11.3784 3.11719 12.4978 3.50541 13.4032 4.21928C14.303 4.91251 14.9372 5.894 15.1994 6.99922H15.4732C16.0321 6.99358 16.5865 7.09864 17.1046 7.30836C17.6227 7.51808 18.0942 7.82829 18.4918 8.22112C18.8893 8.61395 19.2052 9.0816 19.4212 9.59712C19.6371 10.1126 19.7489 10.6658 19.75 11.2247C19.7462 12.3177 19.3191 13.3667 18.5583 14.1514C17.7975 14.9361 16.7622 15.3955 15.6699 15.4331C15.5587 15.4331 15.4988 15.3818 15.4988 15.2877V14.1586C15.4988 14.056 15.5587 14.0047 15.6699 14.0047C16.022 13.9936 16.3684 13.9122 16.6886 13.7653C17.0089 13.6184 17.2965 13.409 17.5346 13.1493C17.9061 12.7509 18.1532 12.2526 18.2455 11.7158C18.3378 11.1789 18.2713 10.6267 18.0542 10.1271C17.8371 9.62747 17.4788 9.20212 17.0233 8.90327C16.5679 8.60442 16.035 8.44507 15.4903 8.44479H14.0789C13.9763 8.44479 13.9249 8.39347 13.9249 8.29938L13.8565 7.80327C13.7637 6.90481 13.342 6.0724 12.6725 5.46607C12.003 4.85975 11.133 4.52231 10.2298 4.51866C9.31384 4.51339 8.42969 4.85407 7.75411 5.47256C7.07852 6.09105 6.66131 6.94176 6.5859 7.85459L6.53457 8.28227C6.53597 8.30472 6.53243 8.32721 6.5242 8.34814C6.51597 8.36907 6.50325 8.38795 6.48695 8.40344C6.47064 8.41893 6.45114 8.43066 6.42981 8.43781C6.40848 8.44495 6.38585 8.44734 6.3635 8.44479L5.91016 8.50467C5.22262 8.54406 4.57783 8.8511 4.11388 9.36004C3.76039 9.7518 3.5253 10.2358 3.43594 10.7559C3.34657 11.2759 3.4066 11.8106 3.60904 12.2979C3.81148 12.7852 4.14802 13.2051 4.57958 13.5087C5.01113 13.8123 5.51998 13.9873 6.04701 14.0132C6.1411 14.0132 6.19243 14.0646 6.19243 14.1672V15.3048C6.1953 15.3246 6.19351 15.3448 6.18722 15.3637C6.18093 15.3827 6.1703 15.3999 6.15618 15.414C6.14206 15.4281 6.12484 15.4388 6.10589 15.445C6.08693 15.4513 6.06678 15.4531 6.04701 15.4503C5.50533 15.4389 4.97136 15.3196 4.47638 15.0993C3.9814 14.879 3.53537 14.5621 3.16443 14.1672C2.42685 13.3841 2.01148 12.3518 2.00113 11.2761Z"/>
+<path class="snow" d="M7.49324 14.4285C7.45796 14.5138 7.44029 14.6053 7.44129 14.6976C7.43845 14.7926 7.45521 14.8872 7.49053 14.9755C7.52585 15.0638 7.57897 15.1439 7.64657 15.2108C7.71075 15.2801 7.78893 15.3351 7.87593 15.3719C7.96294 15.4088 8.05677 15.4267 8.15124 15.4246C8.24586 15.4279 8.34004 15.4104 8.42721 15.3735C8.51438 15.3365 8.59243 15.281 8.65591 15.2108C8.75628 15.1115 8.82476 14.9845 8.8526 14.8461C8.88044 14.7077 8.86637 14.5641 8.8122 14.4337C8.75802 14.3033 8.6662 14.192 8.54846 14.1141C8.43073 14.0362 8.29243 13.9951 8.15124 13.9962C8.05748 13.9935 7.96419 14.0103 7.8773 14.0457C7.79042 14.081 7.71184 14.1341 7.64657 14.2014C7.58068 14.266 7.52852 14.3433 7.49324 14.4285Z"/>
+<path class="snow" d="M7.48729 17.5287C7.4534 17.6159 7.43775 17.7091 7.44129 17.8025V17.8196C7.44159 17.9989 7.51223 18.1709 7.63802 18.2987C7.77414 18.4276 7.95524 18.4982 8.14269 18.4954C8.23589 18.4997 8.32896 18.4844 8.41588 18.4505C8.50281 18.4167 8.58167 18.3649 8.64735 18.2987C8.77802 18.1631 8.85103 17.9822 8.85103 17.794C8.85103 17.6057 8.77802 17.4248 8.64735 17.2893C8.51124 17.1604 8.33013 17.0898 8.14269 17.0926C8.04919 17.0902 7.9562 17.107 7.86945 17.1419C7.7827 17.1768 7.70403 17.2292 7.6383 17.2957C7.57257 17.3623 7.52117 17.4416 7.48729 17.5287Z"/>
+<path class="snow" d="M10.3837 15.878C10.2455 16.0197 10.1687 16.2103 10.1699 16.4083C10.1681 16.5997 10.2419 16.7841 10.3752 16.9215C10.4377 16.9906 10.5144 17.0455 10.6 17.0824C10.6856 17.1193 10.7781 17.1374 10.8713 17.1354C10.9675 17.1365 11.063 17.1185 11.1522 17.0825C11.2414 17.0465 11.3225 16.9931 11.391 16.9255C11.4594 16.8578 11.5137 16.7773 11.5508 16.6885C11.5878 16.5997 11.6069 16.5045 11.6069 16.4083C11.6005 16.2152 11.521 16.0318 11.3844 15.8952C11.2478 15.7586 11.0644 15.6791 10.8713 15.6727C10.7803 15.6718 10.6902 15.6896 10.6063 15.7249C10.5225 15.7602 10.4467 15.8123 10.3837 15.878Z"/>
+<path class="snow" d="M10.1699 13.294C10.171 13.2045 10.1893 13.1159 10.2238 13.0332C10.2606 12.9449 10.315 12.8651 10.3837 12.7986C10.5147 12.6714 10.6888 12.5981 10.8713 12.5934C10.9683 12.591 11.0648 12.6087 11.1546 12.6455C11.2444 12.6823 11.3256 12.7374 11.3931 12.8072C11.4627 12.873 11.5176 12.9527 11.5545 13.0411C11.5913 13.1295 11.6092 13.2247 11.6069 13.3204C11.609 13.4149 11.5911 13.5087 11.5542 13.5957C11.5174 13.6827 11.4624 13.7609 11.3931 13.8251C11.324 13.8921 11.2424 13.9448 11.1528 13.98C11.0632 14.0153 10.9675 14.0324 10.8713 14.0304C10.7789 14.0324 10.6871 14.0152 10.6017 13.9798C10.5163 13.9445 10.4392 13.8918 10.3752 13.8251C10.3039 13.752 10.2487 13.6648 10.2133 13.569C10.178 13.4732 10.1632 13.371 10.1699 13.2691V13.294Z"/>
+<path class="snow" d="M10.1699 19.5255C10.1708 19.4332 10.1892 19.3419 10.2242 19.2565C10.2609 19.1669 10.3152 19.0855 10.3837 19.0172C10.4467 18.9515 10.5225 18.8994 10.6063 18.8641C10.6902 18.8288 10.7803 18.811 10.8713 18.8119C10.9675 18.8107 11.063 18.8287 11.1522 18.8647C11.2414 18.9008 11.3225 18.9542 11.391 19.0218C11.4594 19.0894 11.5137 19.1699 11.5508 19.2587C11.5878 19.3475 11.6069 19.4427 11.6069 19.5389C11.609 19.6334 11.5911 19.7272 11.5542 19.8142C11.5174 19.9012 11.4624 19.9794 11.3931 20.0436C11.324 20.1107 11.2424 20.1633 11.1528 20.1986C11.0632 20.2338 10.9675 20.2509 10.8713 20.2489C10.7789 20.2509 10.6871 20.2337 10.6017 20.1984C10.5163 20.163 10.4392 20.1103 10.3752 20.0436C10.3036 19.9725 10.2482 19.8868 10.2128 19.7923C10.1774 19.6978 10.1627 19.5968 10.1699 19.4962V19.5255Z"/>
+<path class="snow" d="M12.9794 14.4272C12.9426 14.5126 12.9238 14.6046 12.9242 14.6976C12.9241 14.7917 12.943 14.8849 12.9798 14.9716C13.0165 15.0583 13.0703 15.1368 13.138 15.2022C13.2035 15.2722 13.2831 15.3275 13.3716 15.3644C13.4601 15.4012 13.5554 15.4189 13.6513 15.4161C13.7459 15.4193 13.8401 15.4019 13.9272 15.3649C14.0144 15.328 14.0924 15.2725 14.1559 15.2022C14.2563 15.1029 14.3248 14.9759 14.3526 14.8375C14.3804 14.6991 14.3664 14.5555 14.3122 14.4251C14.258 14.2947 14.1662 14.1835 14.0485 14.1055C13.9307 14.0276 13.7924 13.9865 13.6513 13.9876C13.5556 13.9864 13.4608 14.0047 13.3726 14.0415C13.2843 14.0783 13.2045 14.1327 13.138 14.2014C13.0702 14.265 13.0162 14.3418 12.9794 14.4272Z"/>
+<path class="snow" d="M12.9774 17.5254C12.9411 17.6132 12.923 17.7075 12.9242 17.8025V17.8196C12.9258 17.9085 12.9456 17.9961 12.9824 18.077C13.0191 18.158 13.0721 18.2305 13.138 18.2901C13.2049 18.3577 13.285 18.4108 13.3733 18.4461C13.4616 18.4815 13.5562 18.4982 13.6513 18.4954C13.7445 18.4997 13.8375 18.4844 13.9245 18.4505C14.0114 18.4167 14.0902 18.3649 14.1559 18.2987C14.2205 18.2318 14.2712 18.1527 14.305 18.0661C14.3387 17.9794 14.355 17.8869 14.3527 17.794C14.3575 17.7007 14.3425 17.6075 14.3086 17.5205C14.2746 17.4335 14.2226 17.3547 14.1559 17.2893C14.089 17.2247 14.01 17.174 13.9233 17.1403C13.8367 17.1065 13.7442 17.0903 13.6513 17.0926C13.5563 17.0891 13.4616 17.105 13.3729 17.1392C13.2843 17.1734 13.2035 17.2253 13.1355 17.2917C13.0675 17.3581 13.0137 17.4376 12.9774 17.5254Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/fog.svg b/browser/themes/shared/weather/fog.svg
new file mode 100644
index 0000000000..e567a1ddf4
--- /dev/null
+++ b/browser/themes/shared/weather/fog.svg
@@ -0,0 +1,26 @@
+  <!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .fog {
+    fill: context-fill #80808F;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .cloud {
+      fill: context-fill #BFBFC9;
+    }
+    .fog {
+      fill: context-fill #80808F;
+    }
+  }
+</style>
+<path class="cloud" d="M3.61133 11.3537C3.61133 11.4233 3.61133 11.4542 3.72648 11.4542H4.86261C4.90867 11.4542 4.96241 11.4156 5.01615 11.3304C5.1944 10.9349 5.47559 10.5953 5.82987 10.3478C6.17858 10.0942 6.59076 9.94414 7.01974 9.9145L7.44195 9.86034C7.52639 9.86034 7.57245 9.81391 7.57245 9.72107L7.62619 9.3342C7.69164 8.52584 8.06928 7.77568 8.67788 7.24511C9.27972 6.70931 10.055 6.41361 10.858 6.41361C11.661 6.41361 12.4364 6.70931 13.0382 7.24511C13.6358 7.77269 14.0072 8.51317 14.0745 9.31098L14.1359 9.75202C14.1359 9.83713 14.1897 9.88355 14.2895 9.88355H15.5101C15.9902 9.87859 16.4608 10.0187 16.8611 10.2859C17.2579 10.5441 17.5724 10.9122 17.767 11.3459C17.8207 11.431 17.8745 11.4697 17.9282 11.4697H19.0259C19.1181 11.4697 19.1564 11.4156 19.1334 11.2918C18.9151 10.5126 18.445 9.82911 17.7977 9.34967C17.1379 8.8386 16.3268 8.56608 15.4947 8.57593H15.2491C15.0123 7.57253 14.4438 6.68023 13.637 6.04581C12.8453 5.39881 11.8541 5.0512 10.835 5.06317C9.79095 5.05282 8.77683 5.41454 7.97164 6.0845C7.16135 6.7486 6.60509 7.67576 6.39793 8.70747C5.75132 8.85712 5.15705 9.18067 4.67838 9.64369C4.19186 10.103 3.8366 10.6855 3.64971 11.3304C3.64971 11.3304 3.61133 11.3227 3.61133 11.3537Z"/>
+<path class="fog" d="M1.54645 15.3759C1.51338 15.4572 1.49765 15.5446 1.50028 15.6324C1.49848 15.7167 1.51469 15.8004 1.5478 15.8779C1.58091 15.9553 1.63016 16.0246 1.6922 16.0812C1.82545 16.1998 1.99814 16.2633 2.17582 16.2592H16.508C16.6789 16.2637 16.8446 16.1997 16.9686 16.0812C17.0315 16.0253 17.0813 15.9561 17.1145 15.8785C17.1477 15.8009 17.1634 15.7169 17.1605 15.6324C17.1638 15.5452 17.1491 15.4582 17.1175 15.377C17.0858 15.2957 17.0379 15.2219 16.9766 15.1602C16.9154 15.0984 16.8421 15.0501 16.7615 15.0182C16.6809 14.9863 16.5946 14.9715 16.508 14.9748H2.17582C2.08706 14.9722 1.99865 14.9872 1.91567 15.0191C1.83268 15.0509 1.75674 15.099 1.6922 15.1605C1.62917 15.2212 1.57951 15.2946 1.54645 15.3759Z"/>
+<path class="fog" d="M3.56145 12.949C3.52703 13.0291 3.51001 13.1156 3.51155 13.2029C3.51046 13.2894 3.52692 13.3752 3.55992 13.455C3.59293 13.5348 3.64177 13.607 3.70347 13.6671C3.76224 13.7305 3.8337 13.7805 3.91311 13.8138C3.99252 13.8472 4.07807 13.8631 4.16406 13.8606H18.4963C18.5799 13.8624 18.663 13.8461 18.7398 13.8127C18.8166 13.7793 18.8854 13.7297 18.9415 13.6671C19.0584 13.5416 19.1218 13.375 19.1181 13.2029C19.1212 13.119 19.1074 13.0354 19.0774 12.9571C19.0475 12.8788 19.0021 12.8074 18.9439 12.7473C18.8857 12.6872 18.8161 12.6397 18.7391 12.6076C18.6622 12.5756 18.5795 12.5596 18.4963 12.5607H4.16406C4.08058 12.5582 3.99745 12.5727 3.91963 12.6032C3.84182 12.6338 3.77091 12.6799 3.71114 12.7387C3.64692 12.7972 3.59588 12.8689 3.56145 12.949Z"/>
+<path class="fog" d="M4.91274 17.7498C4.87828 17.8286 4.86119 17.914 4.86263 18.0001C4.85925 18.085 4.87395 18.1697 4.90573 18.2484C4.9375 18.3272 4.98563 18.3981 5.04687 18.4566C5.10613 18.5198 5.17751 18.5702 5.25669 18.6048C5.33586 18.6394 5.42118 18.6574 5.50747 18.6578H19.8474C19.9337 18.6578 20.0192 18.6405 20.0988 18.607C20.1785 18.5734 20.2508 18.5243 20.3115 18.4624C20.3722 18.4005 20.4201 18.3271 20.4524 18.2464C20.4848 18.1657 20.5009 18.0794 20.4999 17.9923C20.5017 17.908 20.4855 17.8243 20.4523 17.7469C20.4192 17.6695 20.37 17.6001 20.308 17.5436C20.1834 17.4258 20.0181 17.3619 19.8474 17.3656H5.52282C5.43806 17.362 5.35348 17.376 5.27427 17.4066C5.19505 17.4372 5.12289 17.4838 5.06223 17.5436C4.9982 17.6006 4.9472 17.6709 4.91274 17.7498Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/freezing-rain.svg b/browser/themes/shared/weather/freezing-rain.svg
new file mode 100644
index 0000000000..447a74914a
--- /dev/null
+++ b/browser/themes/shared/weather/freezing-rain.svg
@@ -0,0 +1,38 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .rain {
+    fill: context-fill #054096;
+  }
+  .snow {
+    fill: context-fill #5B5B66;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .cloud {
+      fill: context-fill #BFBFC9;
+    }
+    .rain {
+      fill: context-fill #00B3F4;
+    }
+    .snow {
+      fill: context-fill #FFFFFF;
+    }
+  }
+</style>
+<path class="cloud" d="M2.63574 11.0535C2.62936 11.5646 2.72612 12.0717 2.92025 12.5446C3.11437 13.0174 3.40187 13.4462 3.76554 13.8054C4.11617 14.1793 4.53823 14.479 5.00674 14.687C5.47526 14.8949 5.98071 15.0067 6.49321 15.0159C6.59005 15.0159 6.63847 14.9675 6.63847 14.8787V13.7731C6.64113 13.7534 6.63921 13.7333 6.63285 13.7145C6.6265 13.6957 6.61587 13.6785 6.60181 13.6645C6.58776 13.6504 6.57064 13.6398 6.5518 13.6334C6.53296 13.6271 6.51291 13.6252 6.49321 13.6278C6.16236 13.6163 5.83712 13.539 5.53645 13.4004C5.23579 13.2619 4.96573 13.0649 4.74202 12.8208C4.27902 12.347 4.0158 11.7135 4.00678 11.0511C3.99777 10.3887 4.24366 9.74816 4.69359 9.26195C5.13234 8.78319 5.74007 8.4938 6.3883 8.45495L6.81601 8.39846C6.83603 8.40088 6.85634 8.39885 6.87549 8.39253C6.89464 8.3862 6.91216 8.37573 6.9268 8.36186C6.94144 8.34798 6.95284 8.33106 6.9602 8.31228C6.96755 8.2935 6.97067 8.27333 6.96934 8.2532L7.02583 7.8497C7.10057 6.99845 7.49187 6.2062 8.1224 5.62945C8.75294 5.05271 9.57685 4.73342 10.4314 4.73468C11.2788 4.74098 12.0946 5.05716 12.7249 5.62356C13.3552 6.18997 13.7565 6.96744 13.8531 7.80935L13.9096 8.27741C13.9096 8.37425 13.958 8.42267 14.0629 8.42267H15.3541C15.8697 8.41705 16.3755 8.56353 16.8082 8.84378C17.241 9.12404 17.5816 9.52564 17.7874 9.99839C17.9932 10.4711 18.0551 10.9941 17.9654 11.5018C17.8756 12.0095 17.6382 12.4796 17.2828 12.8531C16.8242 13.3414 16.1928 13.631 15.5236 13.6601C15.4186 13.6601 15.3622 13.7085 15.3622 13.8054V14.8464C15.3622 14.9352 15.4186 14.9836 15.5236 14.9836C16.5471 14.9503 17.5182 14.5229 18.234 13.7905C18.9499 13.0582 19.355 12.0775 19.3649 11.0535C19.3706 10.3495 19.1837 9.65742 18.8242 9.05213C18.4748 8.44046 17.9715 7.9309 17.3641 7.57412C16.7567 7.21734 16.0665 7.02578 15.3622 7.01849H15.112C14.8615 5.9684 14.2609 5.03488 13.4092 4.37153C12.5693 3.69269 11.5193 3.32746 10.4394 3.33856C9.343 3.33828 8.27893 3.71014 7.42132 4.39329C6.56371 5.07644 5.96336 6.03044 5.71849 7.09919C4.83953 7.31309 4.05795 7.81615 3.49923 8.52758C2.92369 9.24202 2.61799 10.1362 2.63574 11.0535Z" fill="#5B5B66"/>
+<path class="rain" d="M7.12265 17.114C7.04026 16.9924 6.99537 16.8493 6.99353 16.7025C6.99353 16.6137 7.0016 16.6137 7.0016 16.6137L7.11458 16.1376C7.13735 16.0484 7.17762 15.9647 7.23304 15.8913C7.28845 15.8179 7.35791 15.7562 7.43738 15.7098C7.51347 15.6619 7.59918 15.6312 7.68843 15.6201C7.77769 15.6089 7.86831 15.6175 7.95386 15.6453C8.12269 15.6927 8.26731 15.8023 8.35863 15.952C8.44996 16.1017 8.48122 16.2805 8.44613 16.4523L8.33315 16.9446C8.31955 17.0392 8.28401 17.1294 8.22936 17.2078C8.17472 17.2863 8.10248 17.3509 8.01842 17.3965C7.93662 17.4307 7.84884 17.4483 7.76018 17.4483C7.67152 17.4483 7.58375 17.4307 7.50194 17.3965C7.34696 17.3484 7.2131 17.2487 7.12265 17.114Z" fill="#054096"/>
+<path class="rain" d="M8.2121 12.8934C8.12962 12.7911 8.08922 12.6613 8.09912 12.5303V12.5141C8.10724 12.481 8.11804 12.4486 8.1314 12.4173V12.3204L8.32508 11.578C8.37791 11.4052 8.49681 11.2602 8.65595 11.1745C8.73122 11.128 8.81588 11.0988 8.9038 11.0891C8.99173 11.0793 9.08073 11.0892 9.16436 11.118C9.34418 11.1641 9.49988 11.2765 9.60014 11.4327C9.64747 11.5107 9.67706 11.5981 9.68682 11.6887C9.69659 11.7794 9.68628 11.8711 9.65664 11.9573L9.43067 12.6836C9.40718 12.7714 9.36562 12.8534 9.30865 12.9243C9.25168 12.9951 9.18055 13.0533 9.0998 13.0952C9.02444 13.1376 8.94132 13.1645 8.85537 13.1742C8.76942 13.1839 8.68239 13.1762 8.59946 13.1517C8.44419 13.1134 8.30717 13.022 8.2121 12.8934Z" fill="#054096"/>
+<path class="rain" d="M9.16436 19.6238C9.08547 19.504 9.04339 19.3637 9.04331 19.2203V19.2042C9.04416 19.1416 9.05228 19.0793 9.06752 19.0186L9.1805 18.5424C9.23225 18.367 9.35116 18.2191 9.51137 18.1308C9.58664 18.0844 9.6713 18.0552 9.75922 18.0454C9.84715 18.0356 9.93615 18.0455 10.0198 18.0744C10.1072 18.0907 10.19 18.1259 10.2625 18.1775C10.3349 18.229 10.3953 18.2957 10.4394 18.3729C10.5307 18.5408 10.5539 18.7373 10.504 18.9217L10.391 19.3978C10.3671 19.5455 10.2879 19.6785 10.1695 19.77C10.0511 19.8614 9.90238 19.9043 9.75348 19.8901C9.68646 19.898 9.61874 19.898 9.55172 19.8901C9.39306 19.8547 9.25425 19.7593 9.16436 19.6238Z" fill="#054096"/>
+<path class="rain" d="M10.2861 15.4113C10.2115 15.2993 10.1747 15.1664 10.1812 15.032C10.1819 14.9591 10.1873 14.8863 10.1973 14.8141L10.3829 14.0878C10.4071 13.9981 10.4487 13.9142 10.5055 13.8408C10.5623 13.7674 10.6331 13.7059 10.7138 13.6601C10.7901 13.6126 10.8758 13.5822 10.965 13.5711C11.0541 13.56 11.1447 13.5683 11.2303 13.5955C11.4099 13.6423 11.5637 13.7584 11.658 13.9183C11.7045 13.9936 11.7337 14.0782 11.7434 14.1662C11.7532 14.2541 11.7433 14.3431 11.7145 14.4267L11.4966 15.153C11.4763 15.2474 11.4364 15.3364 11.3794 15.4143C11.3224 15.4922 11.2496 15.5571 11.1657 15.6049C11.0058 15.6856 10.8214 15.7029 10.6492 15.6534C10.5751 15.6409 10.5043 15.6129 10.4417 15.5712C10.3791 15.5295 10.3261 15.475 10.2861 15.4113Z" fill="#054096"/>
+<path class="rain" d="M12.5296 17.1544C12.4532 17.0394 12.4112 16.905 12.4085 16.767H12.4004C12.4047 16.72 12.4155 16.6738 12.4327 16.6298C12.4347 16.5976 12.4347 16.5652 12.4327 16.533L12.5053 16.0569C12.5295 15.966 12.5717 15.8809 12.6293 15.8067C12.687 15.7324 12.759 15.6705 12.841 15.6246C12.923 15.5787 13.0135 15.5497 13.1069 15.5394C13.2003 15.5291 13.2949 15.5377 13.385 15.5646C13.4728 15.5881 13.5548 15.6296 13.6257 15.6866C13.6965 15.7436 13.7547 15.8147 13.7966 15.8955C13.843 15.9707 13.8722 16.0554 13.882 16.1433C13.8918 16.2312 13.8819 16.3202 13.853 16.4039L13.7401 16.8881C13.7257 17.0386 13.654 17.1778 13.5399 17.277C13.4257 17.3761 13.2778 17.4276 13.1267 17.4207H13.0138H12.9008C12.7484 17.3808 12.6162 17.286 12.5296 17.1544Z" fill="#054096"/>
+<path class="rain" d="M13.6271 12.8692C13.5427 12.7577 13.4974 12.6216 13.498 12.4818L13.5383 12.3689V12.272L13.7643 11.5376C13.7857 11.4536 13.8238 11.3748 13.8764 11.3059C13.9289 11.2369 13.9948 11.1793 14.0701 11.1364C14.1454 11.0934 14.2286 11.0661 14.3147 11.056C14.4008 11.0459 14.4881 11.0533 14.5713 11.0777C14.658 11.1011 14.7392 11.1418 14.8099 11.1972C14.8806 11.2527 14.9394 11.3218 14.9828 11.4005C15.0291 11.4757 15.0588 11.56 15.07 11.6477C15.0811 11.7354 15.0734 11.8244 15.0474 11.9089L14.8537 12.6352C14.8317 12.7247 14.7908 12.8084 14.7337 12.8808C14.6767 12.9532 14.6048 13.0125 14.5229 13.0548C14.4318 13.0981 14.333 13.1228 14.2323 13.1274H14.1194H14.0225C13.8648 13.0896 13.7251 12.9984 13.6271 12.8692Z" fill="#054096"/>
+<path class="snow" d="M7.65982 14.6132C7.62511 14.534 7.60706 14.4486 7.60681 14.3622V14.3461C7.61108 14.1705 7.67676 14.002 7.79242 13.8699C7.91789 13.7488 8.0861 13.6821 8.26048 13.6843C8.34942 13.6821 8.43787 13.6979 8.52057 13.7307C8.60327 13.7635 8.67851 13.8126 8.74179 13.8751C8.80507 13.9377 8.85509 14.0123 8.88886 14.0946C8.92264 14.1769 8.93948 14.2652 8.93836 14.3541C8.94089 14.4426 8.92498 14.5306 8.89164 14.6126C8.85829 14.6945 8.80824 14.7687 8.74468 14.8303C8.68159 14.894 8.60604 14.9442 8.52273 14.9775C8.43943 15.0108 8.35016 15.0266 8.26048 15.0239C8.17503 15.0251 8.09035 15.0077 8.01231 14.9728C7.93427 14.938 7.86475 14.8866 7.80856 14.8222C7.74516 14.7635 7.69453 14.6923 7.65982 14.6132Z" fill="#5B5B66"/>
+<path class="snow" d="M9.71673 17.1351C9.68202 17.0546 9.66429 16.9677 9.66466 16.88V16.8639C9.66072 16.7772 9.67523 16.6906 9.70722 16.6099C9.73922 16.5293 9.78798 16.4563 9.85028 16.3958C9.91337 16.3349 9.98796 16.2871 10.0697 16.2552C10.1514 16.2234 10.2387 16.2081 10.3264 16.2102C10.4143 16.2062 10.5021 16.2206 10.5842 16.2525C10.6662 16.2845 10.7406 16.3333 10.8025 16.3958C10.9237 16.5213 10.9904 16.6895 10.9881 16.8639C10.9945 16.9545 10.9813 17.0454 10.9492 17.1304C10.9172 17.2153 10.8672 17.2924 10.8025 17.3562C10.7394 17.4171 10.6649 17.4649 10.5831 17.4968C10.5014 17.5287 10.4141 17.5439 10.3264 17.5418C10.2406 17.5426 10.1555 17.5258 10.0764 17.4925C9.99729 17.4592 9.92583 17.41 9.86642 17.3481C9.8024 17.2882 9.75144 17.2156 9.71673 17.1351Z" fill="#5B5B66"/>
+<path class="snow" d="M13.0558 14.5983C13.021 14.5189 13.0039 14.4328 13.0057 14.3461C13.0022 14.2582 13.017 14.1707 13.0491 14.0888C13.0811 14.007 13.1298 13.9327 13.1919 13.8706C13.254 13.8084 13.3284 13.7598 13.4102 13.7278C13.492 13.6957 13.5796 13.6809 13.6674 13.6843C13.7554 13.6797 13.8433 13.6939 13.9254 13.7259C14.0075 13.7579 14.0819 13.807 14.1435 13.8699C14.2045 13.933 14.2523 14.0076 14.2841 14.0893C14.316 14.1711 14.3313 14.2584 14.3291 14.3461C14.3331 14.4328 14.3186 14.5193 14.2866 14.6C14.2546 14.6807 14.2058 14.7537 14.1435 14.8141C14.0804 14.8751 14.0058 14.9229 13.9241 14.9547C13.8424 14.9866 13.7551 15.0019 13.6674 14.9997C13.5814 15.002 13.4958 14.9859 13.4165 14.9525C13.3372 14.9191 13.2659 14.8692 13.2074 14.806C13.1424 14.7486 13.0907 14.6777 13.0558 14.5983Z" fill="#5B5B66"/>
+</svg>
diff --git a/browser/themes/shared/weather/hazy-sunshine.svg b/browser/themes/shared/weather/hazy-sunshine.svg
new file mode 100644
index 0000000000..62cdcb3fc3
--- /dev/null
+++ b/browser/themes/shared/weather/hazy-sunshine.svg
@@ -0,0 +1,26 @@
+<!-- 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="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .sun {
+    fill: context-fill #E27F2E;
+  }
+  .haze {
+    fill: context-fill #5B5B66;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .sun {
+      fill: context-fill #FFFF98;
+    }
+    .haze {
+      fill: context-fill #BFBFC9;
+    }
+  }
+</style>
+<path class="sun" d="M4.57927 10.9775C4.57826 10.8932 4.59424 10.8094 4.62627 10.7313C4.65829 10.6532 4.70571 10.5822 4.76574 10.5225C4.82577 10.4629 4.89719 10.4157 4.97582 10.3839C5.05444 10.3521 5.13867 10.3362 5.22356 10.3372H6.72191C6.80353 10.3355 6.88457 10.3512 6.95954 10.3833C7.03452 10.4154 7.10166 10.4632 7.15643 10.5233C7.26753 10.6474 7.32892 10.8077 7.32892 10.9738C7.32892 11.1399 7.26753 11.3002 7.15643 11.4242C7.10166 11.4844 7.03452 11.5322 6.95954 11.5643C6.88457 11.5964 6.80353 11.6121 6.72191 11.6104H5.22356C5.1393 11.6114 5.05569 11.5957 4.97756 11.5644C4.89944 11.533 4.82835 11.4865 4.76842 11.4277C4.70849 11.3688 4.66092 11.2987 4.62845 11.2214C4.59598 11.1442 4.57926 11.0613 4.57927 10.9775ZM6.73689 5.82529C6.73419 5.65183 6.79854 5.48394 6.91669 5.35623C7.04846 5.24417 7.21528 5.18102 7.38867 5.17754C7.5539 5.17713 7.71266 5.24131 7.83068 5.35623L8.89451 6.45071C8.95389 6.50723 9.0006 6.57558 9.03159 6.65128C9.06257 6.72697 9.07713 6.80832 9.07431 6.88999C9.07637 6.97268 9.0615 7.05492 9.0306 7.13172C8.9997 7.20852 8.95342 7.27828 8.89457 7.33677C8.83572 7.39526 8.76552 7.44125 8.68824 7.47196C8.61096 7.50266 8.52821 7.51744 8.44501 7.5154C8.36392 7.52013 8.28273 7.508 8.20663 7.4798C8.13052 7.4516 8.06117 7.40794 8.00299 7.3516L6.91669 6.28691C6.79901 6.1619 6.73457 5.99647 6.73689 5.82529ZM8.64728 10.8882V10.8361C8.65921 10.1702 8.85066 9.51968 9.20167 8.95237C9.55068 8.38436 10.0409 7.91515 10.6251 7.58986C11.2114 7.25783 11.8757 7.08574 12.5505 7.09101C13.0663 7.09162 13.5764 7.19808 14.0488 7.40372C14.5136 7.59932 14.9359 7.88249 15.2925 8.23761C15.8965 8.84207 16.2844 9.62672 16.3967 10.4713C16.509 11.3158 16.3395 12.1737 15.9143 12.9133C15.5738 13.4993 15.0848 13.9865 14.4959 14.3261C13.907 14.6658 13.2388 14.8461 12.558 14.8491H12.4081C12.3833 14.8502 12.3584 14.8461 12.3352 14.8372C12.312 14.8282 12.2909 14.8145 12.2733 14.797C12.2547 14.7799 12.2398 14.7592 12.2295 14.7361C12.2192 14.7131 12.2137 14.6882 12.2134 14.663V13.7547C12.2134 13.6579 12.2658 13.6058 12.3782 13.6058H12.558C12.9081 13.608 13.2548 13.5377 13.576 13.3992C13.8972 13.2608 14.1858 13.0572 14.4234 12.8016C14.6672 12.5585 14.8593 12.2691 14.988 11.9505C15.1167 11.632 15.1795 11.2909 15.1726 10.9477C15.1801 10.6067 15.1175 10.2677 14.9887 9.95151C14.8599 9.63532 14.6675 9.34854 14.4234 9.10872C14.1779 8.86548 13.8854 8.67412 13.5635 8.54617C13.2417 8.41821 12.8971 8.35631 12.5505 8.36418C11.8726 8.36339 11.2204 8.62207 10.7294 9.08651C10.2383 9.55095 9.94613 10.1855 9.91339 10.8584C9.91272 10.9057 9.89397 10.9509 9.86094 10.985C9.837 11.0097 9.80765 11.0286 9.77517 11.0402C9.74269 11.0518 9.70795 11.0558 9.67365 11.052H8.8121C8.69973 11.0669 8.64728 11.0073 8.64728 10.8882ZM11.9212 18.2442V16.7552C11.9191 16.6725 11.934 16.5902 11.9649 16.5134C11.9958 16.4366 12.0421 16.3669 12.1009 16.3084C12.1598 16.2499 12.23 16.2039 12.3072 16.1732C12.3845 16.1425 12.4673 16.1277 12.5505 16.1297C12.6348 16.1276 12.7187 16.1423 12.7972 16.173C12.8757 16.2037 12.9472 16.2497 13.0075 16.3084C13.0667 16.3666 13.1132 16.4364 13.1441 16.5132C13.1751 16.5901 13.1898 16.6724 13.1873 16.7552V18.2442C13.1895 18.3298 13.174 18.415 13.1418 18.4944C13.1096 18.5738 13.0613 18.6458 13 18.7059C12.9418 18.7657 12.8719 18.8131 12.7946 18.8451C12.7173 18.8771 12.6342 18.8931 12.5505 18.892C12.4666 18.8944 12.3831 18.8791 12.3056 18.847C12.2281 18.8149 12.1583 18.7668 12.101 18.7059C12.0417 18.6446 11.9952 18.5723 11.9644 18.493C11.9335 18.4138 11.9188 18.3292 11.9212 18.2442ZM11.9212 5.22966V3.74058C11.9187 3.65717 11.9342 3.5742 11.9664 3.49718C11.9987 3.42016 12.0472 3.35085 12.1085 3.29385C12.1672 3.2347 12.2372 3.18778 12.3144 3.15582C12.3915 3.12386 12.4744 3.10751 12.558 3.10772C12.6417 3.10666 12.7248 3.12262 12.8021 3.15463C12.8794 3.18664 12.9493 3.23402 13.0075 3.29385C13.0677 3.35169 13.1154 3.42116 13.1476 3.49798C13.1798 3.5748 13.1958 3.65736 13.1948 3.74058V5.22966C13.1965 5.31078 13.1807 5.39132 13.1484 5.46583C13.1161 5.54034 13.068 5.60707 13.0075 5.66149C12.8847 5.77284 12.7242 5.83401 12.558 5.83274C12.3914 5.83631 12.23 5.77483 12.1085 5.66149C12.0463 5.60839 11.9971 5.5419 11.9646 5.46707C11.9322 5.39225 11.9173 5.31105 11.9212 5.22966ZM16.0491 15.0353C16.0446 14.9574 16.0578 14.8795 16.0876 14.8073C16.1174 14.7352 16.1631 14.6706 16.2214 14.6183C16.2761 14.561 16.3425 14.5161 16.4162 14.4866C16.4899 14.457 16.5691 14.4436 16.6485 14.4471C16.8151 14.4435 16.9764 14.505 17.098 14.6183L18.1843 15.6756C18.3015 15.7979 18.366 15.9609 18.3641 16.1297C18.3655 16.2112 18.3503 16.2922 18.3194 16.3677C18.2885 16.4432 18.2426 16.5117 18.1843 16.569C18.0614 16.6805 17.9011 16.7423 17.7348 16.7423C17.5684 16.7423 17.4081 16.6805 17.2853 16.569L16.2439 15.5118C16.1815 15.449 16.1321 15.3746 16.0987 15.2928C16.0653 15.2111 16.0484 15.1235 16.0491 15.0353ZM16.0491 6.89743C16.0473 6.81559 16.0638 6.73437 16.0975 6.65967C16.1312 6.58497 16.1812 6.51868 16.2439 6.4656L17.2853 5.35623C17.4102 5.24446 17.5743 5.18568 17.7423 5.19243C17.8262 5.19 17.9097 5.20533 17.9872 5.23743C18.0647 5.26952 18.1344 5.31763 18.1918 5.37857C18.252 5.43641 18.2996 5.50588 18.3318 5.5827C18.3641 5.65952 18.3801 5.74208 18.3791 5.82529C18.3823 5.91035 18.368 5.99516 18.3371 6.07453C18.3061 6.15391 18.2592 6.22617 18.1993 6.28691L17.098 7.3516C16.9764 7.46566 16.8157 7.52954 16.6485 7.53029C16.5724 7.52886 16.4975 7.51231 16.428 7.48162C16.3585 7.45093 16.2959 7.40672 16.2439 7.3516C16.182 7.29468 16.1327 7.22556 16.0991 7.14864C16.0656 7.07173 16.0486 6.9887 16.0491 6.90488V6.89743ZM17.7423 10.9775C17.7412 10.8052 17.8084 10.6393 17.9295 10.5159C17.9836 10.4593 18.0486 10.4143 18.1208 10.3836C18.1929 10.3528 18.2706 10.3371 18.3491 10.3372H19.8474C20.0195 10.3393 20.1838 10.4088 20.3044 10.5308C20.3661 10.5879 20.4154 10.6571 20.449 10.7339C20.4827 10.8108 20.5 10.8937 20.5 10.9775C20.5 11.0613 20.4827 11.1443 20.449 11.2211C20.4154 11.298 20.3661 11.3671 20.3044 11.4242C20.2446 11.484 20.1733 11.5312 20.0948 11.5631C20.0164 11.5951 19.9322 11.6112 19.8474 11.6104H18.3491C18.2675 11.6121 18.1864 11.5964 18.1114 11.5643C18.0365 11.5322 17.9693 11.4844 17.9146 11.4242C17.8005 11.3035 17.7387 11.1431 17.7423 10.9775Z"/>
+<path class="haze" d="M1.54885 13.6789C1.51525 13.6019 1.49864 13.5186 1.50015 13.4346C1.49829 13.3524 1.51402 13.2707 1.54631 13.195C1.5786 13.1193 1.6267 13.0512 1.68744 12.9953C1.74792 12.937 1.81946 12.8911 1.89791 12.8604C1.97636 12.8298 2.06015 12.8149 2.14444 12.8166H9.20166C9.28378 12.8143 9.36549 12.829 9.44159 12.8598C9.51768 12.8905 9.58651 12.9367 9.64367 12.9953C9.75691 13.1154 9.81993 13.2738 9.81993 13.4383C9.81993 13.6029 9.75691 13.7613 9.64367 13.8813C9.58746 13.9417 9.51898 13.9895 9.44278 14.0216C9.36658 14.0537 9.28439 14.0693 9.20166 14.0675H2.14444C2.06051 14.0699 1.97703 14.0546 1.89953 14.0225C1.82203 13.9904 1.75229 13.9423 1.69493 13.8813C1.63226 13.825 1.58245 13.756 1.54885 13.6789Z"/>
+<path class="haze" d="M1.79265 18.2569C1.76036 18.1799 1.74492 18.097 1.74738 18.0135C1.74694 17.9308 1.76406 17.849 1.79762 17.7733C1.83119 17.6976 1.88044 17.6298 1.94216 17.5743C2.00074 17.5154 2.07087 17.4692 2.14821 17.4384C2.22554 17.4077 2.30841 17.3931 2.39166 17.3956H9.44888C9.53317 17.3938 9.61696 17.4087 9.69541 17.4394C9.77386 17.4701 9.8454 17.5159 9.90588 17.5743C9.96662 17.6301 10.0147 17.6982 10.047 17.7739C10.0793 17.8496 10.095 17.9313 10.0932 18.0135C10.0932 18.0973 10.0765 18.1802 10.044 18.2575C10.0115 18.3347 9.96395 18.4048 9.90402 18.4637C9.84409 18.5226 9.773 18.569 9.69488 18.6004C9.61675 18.6318 9.53314 18.6474 9.44888 18.6464H2.38417C2.30025 18.6488 2.21677 18.6335 2.13927 18.6014C2.06177 18.5693 1.99202 18.5212 1.93467 18.4603C1.87335 18.4033 1.82494 18.334 1.79265 18.2569Z"/>
+<path class="haze" d="M2.80355 15.9457C2.77119 15.8698 2.75591 15.7878 2.75876 15.7055C2.75903 15.62 2.77715 15.5355 2.81197 15.4573C2.84678 15.3791 2.89754 15.309 2.96104 15.2513C3.02403 15.1921 3.09814 15.1459 3.17913 15.1153C3.26011 15.0846 3.34639 15.0701 3.43302 15.0726H10.4603C10.5424 15.0703 10.6241 15.085 10.7002 15.1157C10.7763 15.1465 10.8451 15.1927 10.9023 15.2513C10.9597 15.312 11.0044 15.3834 11.034 15.4613C11.0636 15.5392 11.0774 15.6222 11.0746 15.7055C11.0784 15.7866 11.065 15.8676 11.0353 15.9433C11.0056 16.0189 10.9603 16.0876 10.9023 16.1447C10.8437 16.201 10.7745 16.2451 10.6986 16.2745C10.6227 16.3039 10.5417 16.318 10.4603 16.316H3.41803C3.24413 16.3231 3.07447 16.2615 2.94605 16.1447C2.88453 16.0895 2.8359 16.0216 2.80355 15.9457Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/hot.svg b/browser/themes/shared/weather/hot.svg
new file mode 100644
index 0000000000..65caf9975a
--- /dev/null
+++ b/browser/themes/shared/weather/hot.svg
@@ -0,0 +1,39 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .thermometer-stroke {
+    stroke: context-stroke #C50043;
+  }
+  .thermometer-fill {
+    fill: context-fill #C50043;
+  }
+  .sun-stroke {
+    stroke: context-stroke #E27F2E;
+  }
+  .sun-fill {
+    fill: context-fill #E27F2E;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .thermometer-stroke {
+      stroke: context-stroke #FF6A75;
+    }
+    .thermometer-fill {
+      fill: context-fill #FF6A75;
+    }
+    .sun-stroke {
+      stroke: context-stroke #FFFF98;
+    }
+    .sun-fill {
+      fill: context-fill #FFFF98;
+    }
+  }
+</style>
+<path class="thermometer-stroke" d="M11.083 13.7962V7.42919C11.083 6.14019 10.038 5.09619 8.75 5.09619C7.461 5.09619 6.417 6.14119 6.417 7.42919V13.7962C5.566 14.5632 5.081 15.7272 5.305 17.0092C5.552 18.4232 6.708 19.5872 8.122 19.8332C10.332 20.2172 12.25 18.5262 12.25 16.3882C12.25 15.3552 11.794 14.4372 11.083 13.7962Z" stroke-width="1.1552" stroke-miterlimit="10" stroke-linecap="round"/>
+<path class="thermometer-stroke" d="M8.75 16.3672V7.61719" stroke-width="1.1552" stroke-miterlimit="10" stroke-linecap="round"/>
+<path class="thermometer-fill" d="M8.75 18.1172C9.57843 18.1172 10.25 17.4456 10.25 16.6172C10.25 15.7888 9.57843 15.1172 8.75 15.1172C7.92157 15.1172 7.25 15.7888 7.25 16.6172C7.25 17.4456 7.92157 18.1172 8.75 18.1172Z"/>
+<path class="sun-fill" d="M15.937 5.62019C15.882 5.67419 15.838 5.73919 15.808 5.81119C15.778 5.88319 15.764 5.96019 15.765 6.03919C15.766 6.11819 15.783 6.19619 15.815 6.26819C15.847 6.34119 15.892 6.40719 15.949 6.46319C16.003 6.51919 16.067 6.56419 16.139 6.59319C16.21 6.62319 16.287 6.63719 16.363 6.63519C16.441 6.63519 16.518 6.62019 16.589 6.58919C16.66 6.55919 16.724 6.51519 16.777 6.45919L17.772 5.46419C17.828 5.41119 17.872 5.34719 17.902 5.27619C17.932 5.20519 17.948 5.12819 17.948 5.05019C17.951 4.97319 17.937 4.89719 17.907 4.82519C17.877 4.75319 17.832 4.68919 17.775 4.63619C17.72 4.57819 17.654 4.53219 17.581 4.50119C17.508 4.47019 17.43 4.45319 17.351 4.45419C17.272 4.45219 17.194 4.46519 17.122 4.49519C17.05 4.52419 16.985 4.56919 16.932 4.62519L15.937 5.62019ZM17.601 9.47819C17.545 9.53119 17.502 9.59519 17.473 9.66619C17.445 9.73719 17.432 9.81519 17.435 9.89219C17.43 9.96819 17.442 10.0442 17.47 10.1162C17.498 10.1882 17.542 10.2532 17.598 10.3062C17.654 10.3622 17.72 10.4072 17.793 10.4372C17.866 10.4672 17.944 10.4812 18.022 10.4792L19.434 10.4992C19.513 10.5082 19.592 10.4982 19.666 10.4712C19.74 10.4442 19.805 10.4002 19.858 10.3432C19.967 10.2312 20.027 10.0792 20.024 9.92019C20.021 9.76119 19.955 9.60819 19.841 9.49419C19.787 9.44019 19.721 9.39819 19.65 9.37219C19.578 9.34619 19.502 9.33519 19.427 9.34119L18.005 9.32019C17.93 9.31719 17.855 9.33019 17.786 9.35619C17.717 9.38519 17.654 9.42619 17.601 9.47819ZM16.058 13.2792C16.002 13.3332 15.96 13.3982 15.932 13.4702C15.904 13.5422 15.893 13.6202 15.898 13.6982C15.897 13.7782 15.912 13.8582 15.944 13.9332C15.975 14.0082 16.022 14.0762 16.081 14.1322L17.076 15.1272C17.131 15.1852 17.197 15.2312 17.27 15.2622C17.343 15.2932 17.421 15.3102 17.5 15.3092C17.579 15.3122 17.658 15.2992 17.731 15.2712C17.804 15.2432 17.87 15.1992 17.925 15.1442C17.98 15.0922 18.022 15.0282 18.05 14.9582C18.078 14.8872 18.09 14.8112 18.086 14.7352C18.079 14.5752 18.01 14.4232 17.894 14.3112L16.899 13.3162C16.837 13.2602 16.766 13.2172 16.688 13.1892C16.61 13.1612 16.528 13.1492 16.446 13.1532C16.3 13.1462 16.159 13.1942 16.051 13.2892L16.058 13.2792ZM12.489 4.70719C12.158 4.70719 11.889 4.43819 11.889 4.10719V2.71719C11.889 2.38619 12.158 2.11719 12.489 2.11719C12.82 2.11719 13.089 2.38619 13.089 2.71719V4.10719C13.089 4.43819 12.821 4.70719 12.489 4.70719Z"/>
+<path class="sun-stroke" d="M12.576 6.81921C14.233 6.81921 15.576 8.16221 15.576 9.81921C15.576 11.4762 14.233 12.8192 12.576 12.8192" stroke-width="1.1552" stroke-miterlimit="10"/>
+</svg>
diff --git a/browser/themes/shared/weather/ice.svg b/browser/themes/shared/weather/ice.svg
new file mode 100644
index 0000000000..8b83d83726
--- /dev/null
+++ b/browser/themes/shared/weather/ice.svg
@@ -0,0 +1,52 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .thermometer-stroke {
+    stroke: context-stroke #7542E5;
+  }
+  .thermometer-fill {
+    fill: context-fill #7542E5;
+  }
+  .snowflake-stroke {
+    stroke: context-stroke #80808F;
+  }
+  .snowflake-fill {
+    fill: context-fill #80808F;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .thermometer-stroke {
+      stroke: context-stroke #D9BFFF;
+    }
+    .thermometer-fill {
+      fill: context-fill #D9BFFF;
+    }
+    .snowflake-stroke {
+      stroke: context-stroke white;
+    }
+    .snowflake-fill {
+      fill: context-fill white;
+    }
+  }
+</style>
+<g clip-path="url(#clip0_1504_37149)">
+<path class="thermometer-stroke" d="M11.083 14.7962V8.42919C11.083 7.14019 10.038 6.09619 8.75 6.09619C7.461 6.09619 6.417 7.14119 6.417 8.42919V14.7962C5.566 15.5632 5.081 16.7272 5.305 18.0092C5.552 19.4232 6.708 20.5872 8.122 20.8332C10.332 21.2172 12.25 19.5262 12.25 17.3882C12.25 16.3552 11.794 15.4372 11.083 14.7962Z" stroke-width="1.1552" stroke-miterlimit="10" stroke-linecap="round"/>
+<path class="thermometer-stroke" d="M8.75 17.3672V14.6172" stroke-width="1.1552" stroke-miterlimit="10" stroke-linecap="round"/>
+<path class="thermometer-fill" d="M8.75 19.1172C9.57843 19.1172 10.25 18.4456 10.25 17.6172C10.25 16.7888 9.57843 16.1172 8.75 16.1172C7.92157 16.1172 7.25 16.7888 7.25 17.6172C7.25 18.4456 7.92157 19.1172 8.75 19.1172Z"/>
+<path class="snowflake-stroke" d="M15.5229 2.77625V13.3222" stroke-width="1.1552" stroke-miterlimit="10" stroke-linecap="round"/>
+<path class="snowflake-fill" d="M13 7.47119H20.795C21.114 7.47119 21.373 7.72919 21.373 8.04819C21.373 8.36719 21.114 8.62519 20.795 8.62519H13V7.47119Z"/>
+<path class="snowflake-stroke" d="M20.25 5.50317L17.705 8.04917" stroke-width="1.1552" stroke-miterlimit="10" stroke-linecap="round"/>
+<path class="snowflake-stroke" d="M20.25 10.5942L17.705 8.04919" stroke-width="1.1552" stroke-miterlimit="10" stroke-linecap="round"/>
+<path class="snowflake-stroke" d="M18.0681 3.50317L15.5231 6.04917" stroke-width="1.1552" stroke-miterlimit="10" stroke-linecap="round"/>
+<path class="snowflake-stroke" d="M12.9771 3.50317L15.5231 6.04917" stroke-width="1.1552" stroke-miterlimit="10" stroke-linecap="round"/>
+<path class="snowflake-stroke" d="M18.0681 12.5942L15.5231 10.0492" stroke-width="1.1552" stroke-miterlimit="10" stroke-linecap="round"/>
+<path class="snowflake-stroke" d="M12.9771 12.5942L15.5231 10.0492" stroke-width="1.1552" stroke-miterlimit="10" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1504_37149">
+<rect fill="white" width="22" height="22" transform="translate(0 0.617188)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/browser/themes/shared/weather/mostly-cloudy-with-showers.svg b/browser/themes/shared/weather/mostly-cloudy-with-showers.svg
new file mode 100644
index 0000000000..3d1b8817d3
--- /dev/null
+++ b/browser/themes/shared/weather/mostly-cloudy-with-showers.svg
@@ -0,0 +1,41 @@
+<!-- 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="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .sun {
+    fill: context-fill #E27F2E;
+  }
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .rain {
+    fill: context-fill #054096;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .sun {
+      fill: context-fill #FFFF98;
+    }
+    .cloud {
+      fill: context-fill #BFBFC9;
+    }
+    .rain {
+      fill: context-fill #00B3F4;
+    }
+  }
+</style>
+<path class="sun" d="M13.2417 4.36517C13.3131 4.36783 13.3843 4.35573 13.4508 4.32962C13.5174 4.30351 13.5778 4.26395 13.6283 4.21342C13.6788 4.16289 13.7184 4.10247 13.7445 4.03595C13.7706 3.96944 13.7827 3.89824 13.78 3.82683V2.56017C13.7828 2.48782 13.7707 2.41567 13.7445 2.34816C13.7184 2.28064 13.6788 2.21916 13.628 2.1675C13.5228 2.07047 13.3849 2.0166 13.2417 2.0166C13.0986 2.0166 12.9606 2.07047 12.8554 2.1675C12.8047 2.21916 12.765 2.28064 12.7389 2.34816C12.7127 2.41567 12.7007 2.48782 12.7034 2.56017V3.82683C12.7007 3.89824 12.7128 3.96944 12.7389 4.03595C12.765 4.10247 12.8046 4.16289 12.8551 4.21342C12.9057 4.26395 12.9661 4.30351 13.0326 4.32962C13.0991 4.35573 13.1703 4.36783 13.2417 4.36517V4.36517Z"/>
+<path class="sun" d="M16.7566 5.83449C16.8959 5.8271 17.0281 5.77107 17.1303 5.67616L18.036 4.75782C18.1353 4.64885 18.1896 4.50626 18.188 4.35882C18.1897 4.28903 18.1773 4.21961 18.1516 4.15471C18.1258 4.0898 18.0873 4.03076 18.0382 3.9811C17.9891 3.93144 17.9306 3.89218 17.866 3.86567C17.8014 3.83916 17.7321 3.82595 17.6623 3.82682C17.5189 3.82649 17.3807 3.88085 17.276 3.97882L16.364 4.88449C16.269 4.99311 16.2171 5.13284 16.2183 5.27716C16.216 5.34797 16.2276 5.41855 16.2526 5.48484C16.2776 5.55114 16.3155 5.61185 16.364 5.66349C16.471 5.76436 16.6099 5.82482 16.7566 5.83449Z"/>
+<path class="sun" d="M11.4493 5.9929C11.7848 6.19371 12.0934 6.43632 12.3677 6.7149C12.6444 6.59091 12.9448 6.52825 13.248 6.53123C13.5433 6.53123 13.8356 6.58939 14.1084 6.70237C14.3812 6.81536 14.629 6.98097 14.8378 7.18975C15.0466 7.39853 15.2122 7.64638 15.3252 7.91916C15.4382 8.19194 15.4963 8.48431 15.4963 8.77956C15.5057 8.88914 15.5057 8.99932 15.4963 9.1089C15.6526 9.23438 15.7988 9.37203 15.9333 9.52056C16.0811 9.69386 16.2126 9.88043 16.326 10.0779C16.4946 9.66404 16.5765 9.22 16.5667 8.77323C16.5635 8.33812 16.4753 7.90782 16.307 7.50656C16.1429 7.11051 15.9018 6.75099 15.5977 6.4489C15.2986 6.13643 14.9386 5.88856 14.54 5.72056C14.1397 5.54935 13.7088 5.46102 13.2733 5.4609C12.6252 5.44735 11.9886 5.63304 11.4493 5.9929V5.9929Z"/>
+<path class="sun" d="M17.6243 12.3896C17.5777 12.341 17.5216 12.3024 17.4595 12.2763C17.3974 12.2501 17.3307 12.237 17.2633 12.2376C17.1926 12.2367 17.1224 12.2498 17.0568 12.2761C16.9912 12.3024 16.9313 12.3414 16.8808 12.3908C16.8302 12.4402 16.7898 12.4991 16.762 12.5641C16.7342 12.629 16.7195 12.6989 16.7186 12.7696C16.721 12.9186 16.7799 13.0612 16.8833 13.1686L17.276 13.5739C17.3247 13.6315 17.3847 13.6786 17.4521 13.7124C17.5196 13.7461 17.5933 13.7658 17.6686 13.7703C17.8101 13.7477 17.9398 13.6777 18.0364 13.5719C18.1331 13.466 18.191 13.3306 18.2006 13.1876C18.1972 13.0443 18.1382 12.908 18.036 12.8076L17.6243 12.3896Z"/>
+<path class="sun" d="M8.88435 5.20126C8.97933 5.29601 9.10802 5.34922 9.24218 5.34922C9.37634 5.34922 9.50503 5.29601 9.60001 5.20126C9.69911 5.09722 9.75366 4.95859 9.75201 4.81492C9.75635 4.73858 9.74512 4.66216 9.71899 4.5903C9.69286 4.51844 9.65238 4.45264 9.60001 4.39692L9.20101 3.97892C9.09932 3.87988 8.96297 3.82446 8.82101 3.82446C8.67906 3.82446 8.54271 3.87988 8.44101 3.97892C8.38918 4.02741 8.34825 4.08637 8.32095 4.15188C8.29366 4.2174 8.28061 4.28798 8.28268 4.35892C8.27961 4.43187 8.29214 4.50464 8.31945 4.57235C8.34675 4.64007 8.3882 4.70117 8.44101 4.75159L8.88435 5.20126Z"/>
+<path  class="sun" d="M19.8537 8.36778C19.8016 8.31766 19.7401 8.2784 19.6727 8.2523C19.6053 8.22621 19.5333 8.21379 19.4611 8.21578H18.1944C18.1244 8.21421 18.055 8.22751 17.9905 8.25481C17.9261 8.2821 17.8682 8.32277 17.8207 8.37412C17.7261 8.48049 17.6742 8.6181 17.6751 8.76045C17.6751 8.89818 17.7298 9.03028 17.8272 9.12767C17.9246 9.22507 18.0567 9.27978 18.1944 9.27978H19.4611C19.608 9.28511 19.7511 9.23284 19.8601 9.13412C19.9099 9.08579 19.9492 9.02761 19.9754 8.96328C20.0016 8.89895 20.014 8.82987 20.0121 8.76045C20.0151 8.6875 20.0026 8.61474 19.9753 8.54702C19.948 8.4793 19.9065 8.4182 19.8537 8.36778V8.36778Z"/>
+<path class="rain" d="M12.3677 12.2122C12.3028 12.1939 12.2349 12.1885 12.168 12.1964C12.101 12.2043 12.0363 12.2253 11.9775 12.2583C11.9187 12.2912 11.8669 12.3354 11.8252 12.3884C11.7835 12.4413 11.7526 12.502 11.7343 12.5669L11.5 13.2382C11.5 13.2889 11.5 13.3395 11.5 13.3839C11.5021 13.4922 11.5351 13.5976 11.595 13.6879C11.6268 13.7387 11.6684 13.7828 11.7173 13.8176C11.7662 13.8524 11.8215 13.8772 11.88 13.8905H12.0383C12.158 13.8916 12.2743 13.8513 12.3677 13.7765C12.4603 13.7016 12.5232 13.5961 12.545 13.4789L12.716 12.8455C12.7508 12.7129 12.7317 12.5718 12.6629 12.4531C12.5941 12.3345 12.4811 12.2479 12.3487 12.2122H12.3677Z"/>
+<path class="rain" d="M11.5 15.2396C11.4354 15.217 11.3666 15.2093 11.2986 15.217C11.2306 15.2247 11.1652 15.2475 11.1073 15.2839C10.9816 15.3531 10.8882 15.4692 10.8476 15.6069L10.6766 16.2402C10.6766 16.2402 10.6766 16.2719 10.6766 16.2909C10.6766 16.3099 10.6766 16.3289 10.6766 16.3416C10.6766 16.3542 10.6766 16.3732 10.6766 16.3859C10.6831 16.5033 10.7245 16.6162 10.7956 16.7099C10.8667 16.8036 10.9642 16.8738 11.0756 16.9116H11.234C11.3416 16.9111 11.4461 16.8755 11.5316 16.8102C11.6346 16.7321 11.7065 16.6198 11.7343 16.4936L11.918 15.8602C11.9375 15.7904 11.9425 15.7172 11.9327 15.6453C11.9229 15.5735 11.8985 15.5043 11.861 15.4422C11.82 15.3834 11.7662 15.3346 11.7037 15.2995C11.6412 15.2644 11.5715 15.2439 11.5 15.2396Z"/>
+<path class="rain" d="M9.72669 14.1565C9.65537 14.1342 9.58016 14.1272 9.50596 14.136C9.43175 14.1447 9.36022 14.169 9.29602 14.2072C9.2344 14.2421 9.18138 14.2904 9.14084 14.3485C9.10029 14.4065 9.07325 14.473 9.06169 14.5428L8.88435 15.1762C8.87546 15.2137 8.87546 15.2527 8.88435 15.2902C8.8858 15.4054 8.92103 15.5177 8.98569 15.6132C9.05508 15.7204 9.16074 15.7991 9.28335 15.8348C9.35038 15.8546 9.42081 15.8602 9.49011 15.8511C9.55942 15.842 9.62605 15.8186 9.68572 15.7822C9.74538 15.7458 9.79676 15.6973 9.83655 15.6398C9.87633 15.5823 9.90363 15.5172 9.91669 15.4485L10.0687 14.8152C10.0913 14.7477 10.0995 14.6762 10.093 14.6053C10.0864 14.5345 10.0652 14.4657 10.0307 14.4035C9.96396 14.2859 9.85544 14.1977 9.72669 14.1565V14.1565Z"/>
+<path class="rain" d="M7.25665 15.1889C7.11399 15.1501 6.96184 15.1683 6.83232 15.2396C6.77099 15.2749 6.71819 15.3232 6.67769 15.3813C6.63719 15.4393 6.60997 15.5055 6.59799 15.5752L6.42065 16.2086C6.42065 16.2402 6.42065 16.2846 6.42065 16.3416C6.42217 16.4608 6.45729 16.5771 6.52199 16.6772C6.58713 16.7845 6.68807 16.8652 6.80699 16.9052C6.87036 16.9269 6.93763 16.9347 7.00427 16.9281C7.07092 16.9216 7.13538 16.9008 7.19332 16.8672C7.26197 16.8325 7.32236 16.7834 7.37043 16.7233C7.4185 16.6632 7.45313 16.5935 7.47199 16.5189L7.63032 15.8539C7.65286 15.7893 7.66057 15.7205 7.6529 15.6525C7.64522 15.5845 7.62236 15.5192 7.58599 15.4612C7.55171 15.3964 7.50497 15.339 7.44846 15.2923C7.39195 15.2455 7.32677 15.2104 7.25665 15.1889V15.1889Z"/>
+<path class="rain" d="M8.89072 17.1965C8.82298 17.1737 8.7511 17.1658 8.68002 17.1735C8.60895 17.1811 8.54038 17.2041 8.47906 17.2409C8.35527 17.3109 8.26419 17.427 8.22572 17.5639L8.04839 18.1972C8.02865 18.2388 8.01786 18.2841 8.01672 18.3302C8.02161 18.4439 8.05898 18.5538 8.12439 18.6469C8.19863 18.7562 8.3082 18.8367 8.43472 18.8749H8.59306C8.67347 18.8774 8.75345 18.8622 8.82739 18.8305C8.89634 18.7938 8.95574 18.7415 9.00083 18.6777C9.04593 18.6139 9.07545 18.5405 9.08706 18.4632L9.25806 17.8299C9.28089 17.7621 9.28876 17.6902 9.2811 17.6192C9.27345 17.5481 9.25046 17.4795 9.21372 17.4182C9.13772 17.3064 9.02241 17.2272 8.89072 17.1965V17.1965Z"/>
+<path class="rain" d="M8.33337 13.4789L8.48537 12.8455C8.5079 12.7809 8.51562 12.7121 8.50794 12.6441C8.50027 12.5762 8.4774 12.5108 8.44103 12.4529C8.40872 12.383 8.36127 12.3211 8.30212 12.2719C8.24297 12.2226 8.1736 12.187 8.09903 12.1679C8.02854 12.1473 7.95461 12.1411 7.88169 12.1498C7.80877 12.1585 7.73836 12.1819 7.6747 12.2185C7.6141 12.2531 7.56175 12.3005 7.52129 12.3574C7.48083 12.4143 7.45321 12.4793 7.44037 12.5479L7.25037 13.1812C7.25037 13.2319 7.25037 13.2825 7.25037 13.3332C7.25065 13.4503 7.29102 13.5639 7.36476 13.6549C7.43849 13.7459 7.54117 13.8089 7.6557 13.8335C7.7192 13.863 7.78836 13.8783 7.85837 13.8783C7.92837 13.8783 7.99753 13.863 8.06103 13.8335C8.12998 13.7984 8.19021 13.7484 8.23733 13.687C8.28444 13.6256 8.31726 13.5545 8.33337 13.4789V13.4789Z"/>
+<path class="cloud" d="M15.1986 9.88782C15.0636 9.75318 14.9174 9.6303 14.7616 9.52048L14.6096 9.43182C14.5209 9.37482 14.4259 9.33048 14.3373 9.27982L14.0333 9.16582L13.8496 9.11515C13.7416 9.08102 13.6316 9.05353 13.5203 9.03282C13.3485 9.00521 13.1749 8.99039 13.0009 8.98848H12.7666C12.7307 8.83553 12.6841 8.68528 12.6273 8.53882C12.5795 8.40617 12.5223 8.27707 12.4563 8.15248V8.15248C12.3866 8.01878 12.3083 7.88973 12.2219 7.76615V7.76615C11.7905 7.13596 11.1791 6.65041 10.4676 6.37282V6.37282C10.0283 6.20846 9.56232 6.12686 9.09328 6.13215C8.23652 6.11902 7.40169 6.40327 6.73095 6.93648C6.05702 7.46662 5.59258 8.21826 5.41995 9.05815C4.72777 9.20987 4.10855 9.59436 3.66562 10.1475C3.22043 10.697 2.98079 11.3846 2.98795 12.0918C2.98598 12.4966 3.06574 12.8977 3.22244 13.271C3.37915 13.6442 3.60959 13.982 3.89995 14.2641C4.4624 14.8577 5.23602 15.2058 6.05328 15.2331C6.06791 15.2353 6.08284 15.234 6.09687 15.2293C6.1109 15.2246 6.12366 15.2168 6.13411 15.2063C6.14457 15.1959 6.15244 15.1831 6.15709 15.1691C6.16175 15.155 6.16307 15.1401 6.16095 15.1255V14.2768C6.16095 14.2008 6.12295 14.1628 6.05328 14.1628C5.7935 14.1545 5.53803 14.0941 5.30197 13.9853C5.06592 13.8766 4.85407 13.7215 4.67895 13.5295C4.31004 13.1477 4.10737 12.6353 4.11528 12.1045C4.10743 11.5947 4.29822 11.1018 4.64728 10.7301C4.99236 10.3496 5.46619 10.1105 5.97728 10.0588H6.29395C6.37628 10.0588 6.42062 10.0208 6.42062 9.94482L6.43328 9.57115C6.48896 8.90816 6.80008 8.29274 7.30095 7.85482C7.79209 7.40217 8.4381 7.1551 9.10595 7.16448C9.77574 7.15477 10.4239 7.40177 10.9173 7.85482C11.4209 8.29064 11.7326 8.90723 11.7849 9.57115L11.8293 9.93215C11.8272 9.94761 11.8287 9.96335 11.8337 9.97813C11.8387 9.99292 11.847 10.0064 11.858 10.0174C11.8691 10.0284 11.8825 10.0368 11.8973 10.0417C11.9121 10.0467 11.9278 10.0482 11.9433 10.0461H13.0009C13.4011 10.0453 13.7927 10.1621 14.127 10.3822C14.4612 10.6023 14.7233 10.9158 14.8807 11.2838C15.038 11.6518 15.0835 12.0579 15.0117 12.4516C14.9399 12.8453 14.7538 13.2091 14.4766 13.4978C14.1164 13.8733 13.628 14.0994 13.1086 14.1311C13.0389 14.1311 13.0009 14.1691 13.0009 14.2451V15.0938C12.9988 15.1084 13.0001 15.1234 13.0048 15.1374C13.0095 15.1514 13.0173 15.1642 13.0278 15.1746C13.0382 15.1851 13.051 15.193 13.065 15.1976C13.0791 15.2023 13.094 15.2036 13.1086 15.2015C13.6478 15.1934 14.174 15.0355 14.6286 14.7455C15.0826 14.4661 15.4559 14.0732 15.7116 13.6055C15.9751 13.1335 16.1105 12.6007 16.1043 12.0601C16.1027 11.7142 16.0405 11.3713 15.9206 11.0468C15.7718 10.6103 15.5248 10.2138 15.1986 9.88782V9.88782Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/mostly-cloudy-with-thunderstorms.svg b/browser/themes/shared/weather/mostly-cloudy-with-thunderstorms.svg
new file mode 100644
index 0000000000..3d5de2b43e
--- /dev/null
+++ b/browser/themes/shared/weather/mostly-cloudy-with-thunderstorms.svg
@@ -0,0 +1,36 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .sun {
+    fill: context-fill #E27F2E;
+  }
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .thunder {
+    stroke: context-stroke #FF7139;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .sun {
+      fill: context-fill #FFFF98;
+     }
+    .cloud {
+      fill: context-fill #BFBFC9;
+    }
+    .thunder {
+      stroke: context-stroke #FFA437;
+    }
+  }
+</style>
+<path class="thunder" d="M9.55803 13.6641L7.53003 17.1761H10.47L8.44903 20.6771" stroke-width="1.1552" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path class="sun" d="M13.0136 5.02672C13.0926 5.02967 13.1713 5.01629 13.2448 4.98742C13.3184 4.95855 13.3852 4.91481 13.4411 4.85894C13.4969 4.80306 13.5407 4.73626 13.5695 4.66272C13.5984 4.58917 13.6118 4.51045 13.6088 4.43149V3.03095C13.6118 2.95095 13.5985 2.87118 13.5696 2.79653C13.5407 2.72187 13.4969 2.6539 13.4408 2.59678C13.3244 2.48949 13.1719 2.42993 13.0136 2.42993C12.8553 2.42993 12.7028 2.48949 12.5864 2.59678C12.5304 2.6539 12.4865 2.72187 12.4576 2.79653C12.4287 2.87118 12.4154 2.95095 12.4184 3.03095V4.43149C12.4154 4.51045 12.4288 4.58917 12.4577 4.66272C12.4866 4.73626 12.5303 4.80306 12.5862 4.85894C12.642 4.91481 12.7088 4.95855 12.7824 4.98742C12.8559 5.01629 12.9347 5.02967 13.0136 5.02672V5.02672Z"/>
+<path class="sun" d="M16.9001 6.6513C17.0541 6.64314 17.2003 6.58118 17.3133 6.47624L18.3147 5.46084C18.4245 5.34035 18.4846 5.1827 18.4827 5.01967C18.4846 4.9425 18.4709 4.86574 18.4425 4.79398C18.414 4.72222 18.3714 4.65693 18.3171 4.60202C18.2629 4.54711 18.1981 4.5037 18.1267 4.47439C18.0553 4.44509 17.9787 4.43048 17.9015 4.43144C17.7429 4.43108 17.5902 4.49118 17.4743 4.59951L16.466 5.6009C16.3609 5.721 16.3036 5.8755 16.3049 6.03506C16.3023 6.11336 16.3152 6.1914 16.3428 6.2647C16.3705 6.338 16.4123 6.40513 16.466 6.46223C16.5843 6.57376 16.7378 6.64061 16.9001 6.6513Z"/>
+<path class="sun" d="M11.0319 6.82642C11.4028 7.04846 11.744 7.31671 12.0473 7.62473C12.3533 7.48763 12.6853 7.41836 13.0206 7.42165C13.3471 7.42165 13.6704 7.48595 13.972 7.61088C14.2736 7.73582 14.5476 7.91893 14.7785 8.14977C15.0093 8.38062 15.1924 8.65467 15.3174 8.95628C15.4423 9.25789 15.5066 9.58116 15.5066 9.90762C15.517 10.0288 15.517 10.1506 15.5066 10.2718C15.6794 10.4105 15.841 10.5627 15.9898 10.7269C16.1532 10.9185 16.2985 11.1248 16.424 11.3432C16.6104 10.8856 16.7009 10.3946 16.6901 9.90062C16.6866 9.41952 16.589 8.94374 16.4029 8.50007C16.2215 8.06215 15.955 7.66464 15.6186 7.33062C15.2879 6.98512 14.8899 6.71105 14.4492 6.5253C14.0065 6.33599 13.5301 6.23833 13.0486 6.23819C12.332 6.22321 11.6281 6.42853 11.0319 6.82642V6.82642Z"/>
+<path class="sun" d="M17.8595 13.8992C17.808 13.8454 17.746 13.8028 17.6773 13.7739C17.6087 13.745 17.5349 13.7304 17.4604 13.7311C17.3822 13.7302 17.3046 13.7447 17.2321 13.7737C17.1595 13.8028 17.0934 13.8459 17.0374 13.9005C16.9815 13.9551 16.9369 14.0202 16.9061 14.0921C16.8754 14.164 16.8591 14.2412 16.8582 14.3193C16.8608 14.4841 16.9259 14.6418 17.0402 14.7605L17.4744 15.2087C17.5283 15.2724 17.5946 15.3245 17.6692 15.3618C17.7438 15.3991 17.8253 15.4209 17.9086 15.4258C18.065 15.4008 18.2084 15.3235 18.3153 15.2064C18.4221 15.0894 18.4861 14.9396 18.4968 14.7815C18.493 14.6231 18.4277 14.4724 18.3147 14.3614L17.8595 13.8992Z"/>
+<path class="sun" d="M8.19579 5.95114C8.30081 6.05591 8.4431 6.11475 8.59144 6.11475C8.73979 6.11475 8.88208 6.05591 8.9871 5.95114C9.09667 5.83611 9.15698 5.68283 9.15516 5.52398C9.15996 5.43957 9.14754 5.35506 9.11864 5.27561C9.08975 5.19615 9.04499 5.12341 8.9871 5.0618L8.54593 4.59962C8.43348 4.49011 8.28272 4.42883 8.12576 4.42883C7.9688 4.42883 7.81805 4.49011 7.7056 4.59962C7.64829 4.65323 7.60303 4.71842 7.57285 4.79086C7.54267 4.8633 7.52824 4.94134 7.53053 5.01978C7.52713 5.10044 7.541 5.1809 7.57119 5.25577C7.60138 5.33064 7.6472 5.39821 7.7056 5.45395L8.19579 5.95114Z"/>
+<path class="sun" d="M20.3246 9.45247C20.267 9.39705 20.1989 9.35364 20.1244 9.32479C20.0499 9.29593 19.9703 9.28221 19.8904 9.28441H18.4899C18.4125 9.28267 18.3357 9.29738 18.2645 9.32756C18.1933 9.35774 18.1293 9.4027 18.0767 9.45948C17.9721 9.57709 17.9148 9.72925 17.9157 9.88664C17.9157 10.0389 17.9762 10.185 18.0838 10.2927C18.1915 10.4004 18.3376 10.4609 18.4899 10.4609H19.8904C20.0529 10.4668 20.2112 10.409 20.3316 10.2998C20.3868 10.2464 20.4302 10.182 20.4591 10.1109C20.4881 10.0398 20.5019 9.9634 20.4997 9.88664C20.5031 9.80598 20.4892 9.72553 20.459 9.65065C20.4288 9.57578 20.383 9.50822 20.3246 9.45247V9.45247Z"/>
+<path class="cloud" d="M14.9986 11.0618C14.8494 10.9129 14.6877 10.7771 14.5155 10.6557L14.3474 10.5577C14.2494 10.4946 14.1444 10.4456 14.0464 10.3896L13.7103 10.2636L13.5073 10.2076C13.3879 10.1699 13.2663 10.1395 13.1432 10.1166C12.9533 10.086 12.7614 10.0697 12.5691 10.0676H12.31C12.2703 9.89847 12.2188 9.73236 12.156 9.57045C12.1031 9.42381 12.04 9.28109 11.9669 9.14336V9.14336C11.8899 8.99555 11.8034 8.85289 11.7079 8.71627V8.71627C11.2309 8.01961 10.5551 7.48284 9.7685 7.17596V7.17596C9.28282 6.99426 8.7677 6.90406 8.24919 6.9099C7.30204 6.89539 6.37915 7.20962 5.63765 7.79909C4.89263 8.38514 4.37919 9.21607 4.18836 10.1446C3.42316 10.3123 2.73862 10.7373 2.24896 11.3488C1.75682 11.9563 1.49189 12.7164 1.49981 13.4983C1.49763 13.9458 1.5858 14.3892 1.75904 14.8018C1.93228 15.2144 2.18702 15.5879 2.50801 15.8997C3.1298 16.5559 3.98502 16.9408 4.8885 16.971C4.90467 16.9733 4.92117 16.9719 4.93669 16.9667C4.9522 16.9615 4.9663 16.9528 4.97785 16.9413C4.98941 16.9297 4.99811 16.9156 5.00326 16.9001C5.00841 16.8846 5.00987 16.8681 5.00752 16.8519V15.9137C5.00752 15.8297 4.96552 15.7877 4.8885 15.7877C4.60131 15.7785 4.31889 15.7118 4.05794 15.5915C3.79698 15.4713 3.56278 15.2999 3.36919 15.0876C2.96136 14.6655 2.73731 14.0991 2.74606 13.5123C2.73738 12.9487 2.9483 12.4038 3.33418 11.9929C3.71566 11.5723 4.23948 11.3079 4.80448 11.2508H5.15455C5.24557 11.2508 5.29458 11.2088 5.29458 11.1248L5.30859 10.7117C5.37014 9.97875 5.71407 9.29842 6.26778 8.81429C6.81073 8.3139 7.5249 8.04077 8.26319 8.05114C9.00364 8.0404 9.72012 8.31346 10.2656 8.81429C10.8223 9.29609 11.1669 9.97773 11.2248 10.7117L11.2738 11.1108C11.2715 11.1279 11.2732 11.1453 11.2787 11.1616C11.2842 11.1779 11.2934 11.1928 11.3056 11.205C11.3178 11.2172 11.3327 11.2264 11.349 11.2319C11.3653 11.2374 11.3827 11.2391 11.3998 11.2368H12.5691C13.0115 11.2358 13.4444 11.365 13.8139 11.6083C14.1834 11.8516 14.4732 12.1982 14.6471 12.605C14.821 13.0118 14.8714 13.4608 14.7919 13.896C14.7125 14.3312 14.5068 14.7334 14.2004 15.0526C13.8022 15.4676 13.2623 15.7176 12.6881 15.7527C12.6111 15.7527 12.5691 15.7947 12.5691 15.8787V16.8169C12.5667 16.8331 12.5682 16.8496 12.5733 16.8651C12.5785 16.8806 12.5872 16.8947 12.5987 16.9063C12.6103 16.9178 12.6244 16.9265 12.6399 16.9317C12.6554 16.9368 12.6719 16.9383 12.6881 16.936C13.2841 16.927 13.8659 16.7525 14.3684 16.4319C14.8703 16.123 15.283 15.6886 15.5657 15.1716C15.857 14.6498 16.0067 14.0608 15.9998 13.4632C15.998 13.0808 15.9293 12.7017 15.7967 12.343C15.6322 11.8605 15.3591 11.4222 14.9986 11.0618V11.0618Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/mostly-sunny.svg b/browser/themes/shared/weather/mostly-sunny.svg
new file mode 100644
index 0000000000..c5cd0329ef
--- /dev/null
+++ b/browser/themes/shared/weather/mostly-sunny.svg
@@ -0,0 +1,32 @@
+<!-- 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="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .sun-1, .sun-2, .sun-3, .sun-4, .sun-5, .sun-6, .sun-7 {
+    fill: context-fill #E27F2E;
+  }
+
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .sun-1, .sun-2, .sun-3, .sun-4, .sun-5, .sun-6, .sun-7 {
+      fill: context-fill #FFFF98;
+    }
+
+    .cloud {
+      fill: context-fill #BFBFC9;
+    }
+  }
+</style>
+<path class="sun-1" d="M6.06372 12.12C6.11995 12.0716 6.16492 12.0114 6.19548 11.9438C6.24306 11.838 6.25655 11.7201 6.23407 11.6063C6.2116 11.4925 6.15428 11.3885 6.07007 11.3088C5.95568 11.2044 5.80579 11.1477 5.65097 11.15H4.60957C4.52886 11.1472 4.4484 11.1607 4.37304 11.1897C4.29833 11.2181 4.22986 11.2607 4.17142 11.3151C4.11339 11.3686 4.06786 11.4342 4.03807 11.5072C4.00898 11.5787 3.99598 11.6556 3.99997 11.7326C3.9971 11.8067 4.01066 11.8804 4.03966 11.9485C4.07007 12.0172 4.11439 12.0788 4.16984 12.1295C4.22979 12.1812 4.29864 12.2215 4.37304 12.2486C4.44916 12.2739 4.52951 12.2842 4.60957 12.2787H5.63668C5.79414 12.2827 5.94707 12.2258 6.06372 12.12V12.12Z"/>
+<path class="sun-2" d="M14.8569 8.41161C14.9704 8.51391 15.1177 8.57053 15.2705 8.57053C15.4232 8.57053 15.5705 8.51391 15.684 8.41161L16.7175 7.41308C16.7715 7.36255 16.8138 7.30077 16.8413 7.2321C16.8686 7.16413 16.8806 7.09093 16.8762 7.01779C16.8804 6.94259 16.8685 6.86736 16.8413 6.79713C16.8135 6.72674 16.7713 6.66294 16.7175 6.60981C16.601 6.50464 16.4489 6.44786 16.292 6.45106C16.2153 6.45088 16.1393 6.46595 16.0684 6.49538C15.9976 6.52481 15.9333 6.56802 15.8793 6.62251L14.8569 7.57977C14.8024 7.63268 14.7597 7.69652 14.7315 7.76709C14.7022 7.83847 14.6892 7.91547 14.6934 7.99251C14.6901 8.07053 14.7031 8.14838 14.7315 8.22111C14.7601 8.29239 14.8027 8.35718 14.8569 8.41161V8.41161Z"/>
+<path class="sun-3" d="M11.0246 6.85274C11.1113 6.93007 11.218 6.98126 11.3326 7.00038C11.4474 7.02027 11.5655 7.00819 11.6739 6.96545C11.7795 6.92143 11.8707 6.84887 11.9374 6.7559C12.0042 6.66315 12.0418 6.55261 12.0454 6.4384V5.05569C12.044 4.98056 12.0256 4.90671 11.9914 4.83979C11.9577 4.77281 11.9101 4.71381 11.8517 4.66676C11.7368 4.55974 11.5856 4.50024 11.4286 4.50024C11.2716 4.50024 11.1204 4.55974 11.0056 4.66676C10.9494 4.7153 10.9045 4.77542 10.8738 4.84297C10.8422 4.90943 10.8259 4.98212 10.8262 5.05569L10.8436 6.4384C10.847 6.59498 10.912 6.7439 11.0246 6.85274Z"/>
+<path class="sun-4" d="M6.18439 7.41324L7.16387 8.41177C7.28311 8.51436 7.4352 8.57077 7.5925 8.57077C7.74979 8.57077 7.90188 8.51436 8.02112 8.41177C8.07677 8.35819 8.12104 8.29394 8.15129 8.22286C8.18107 8.14992 8.19461 8.07137 8.19098 7.99267C8.19131 7.91583 8.17647 7.83968 8.14733 7.76858C8.11818 7.69748 8.07529 7.63283 8.02112 7.57833L7.01623 6.60996C6.90142 6.50072 6.74926 6.43941 6.59079 6.43851C6.51328 6.43513 6.43593 6.44811 6.36377 6.47661C6.29313 6.50536 6.22931 6.54863 6.17645 6.60361C6.07154 6.71575 6.01458 6.86442 6.0177 7.01795C6.01771 7.09184 6.0334 7.16488 6.06374 7.23226C6.09019 7.30071 6.13138 7.36249 6.18439 7.41324V7.41324Z"/>
+<path class="sun-5" d="M18.4557 11.5057C18.4259 11.4331 18.381 11.3676 18.3239 11.3136C18.2089 11.2093 18.0585 11.1526 17.9032 11.1549H16.8761C16.7954 11.1522 16.715 11.1656 16.6396 11.1946C16.5651 11.2233 16.4967 11.2659 16.438 11.32C16.3797 11.3727 16.3337 11.4375 16.3033 11.51C16.2728 11.5824 16.2587 11.6606 16.2618 11.7391C16.2595 11.8132 16.2735 11.8869 16.303 11.955C16.3323 12.0239 16.3762 12.0856 16.4316 12.136C16.4916 12.1876 16.5604 12.228 16.6348 12.255C16.7103 12.281 16.7901 12.2923 16.8698 12.2884H17.8985C18.0532 12.2899 18.2028 12.2333 18.3176 12.1296C18.3724 12.0781 18.4162 12.016 18.4462 11.947C18.4758 11.8795 18.4909 11.8065 18.4906 11.7327C18.495 11.6555 18.4831 11.5781 18.4557 11.5057V11.5057Z"/>
+<path class="sun-6" d="M15.6839 15.0235C15.5682 14.9269 15.4219 14.8746 15.2712 14.8759C15.1943 14.8741 15.1178 14.887 15.0458 14.914C14.975 14.9412 14.9106 14.9828 14.8568 15.0362C14.8031 15.0882 14.7609 15.151 14.733 15.2204C14.7042 15.2891 14.6906 15.3634 14.6933 15.4379C14.6913 15.5137 14.7043 15.5893 14.7315 15.6601C14.7588 15.7309 14.7997 15.7957 14.8521 15.8506L15.849 16.8031C15.9322 16.8933 16.0414 16.9554 16.1614 16.9808C16.2815 17.0061 16.4064 16.9934 16.5189 16.9444C16.593 16.912 16.6591 16.8637 16.7126 16.8031C16.7673 16.7519 16.8096 16.6889 16.8364 16.619C16.8644 16.5501 16.8764 16.4757 16.8714 16.4015C16.8728 16.3281 16.8595 16.2551 16.8322 16.187C16.8049 16.1188 16.7643 16.0568 16.7126 16.0046L15.6839 15.0235Z"/>
+<path class="sun-7" d="M14.7839 10.35C14.4943 9.70482 14.0247 9.15698 13.4313 8.7723C12.838 8.38762 12.1462 8.18245 11.439 8.18146C10.7998 8.1778 10.1708 8.34202 9.61498 8.6577C9.06704 8.96461 8.60896 9.40956 8.28625 9.94834C8.15749 10.1699 8.05418 10.4053 7.97827 10.65C8.33438 10.5358 8.70602 10.4774 9.07999 10.477C9.16572 10.477 9.25144 10.4881 9.33717 10.4944C9.44967 10.3038 9.58864 10.1301 9.74992 9.9785C9.97526 9.76337 10.2406 9.59456 10.531 9.48161C11.13 9.25768 11.7904 9.26164 12.3867 9.49273C12.6848 9.61183 12.9551 9.79127 13.1805 10.0198C13.4041 10.2434 13.5806 10.5095 13.6996 10.8024C13.8215 11.095 13.8821 11.4094 13.8774 11.7263C13.8799 12.1314 13.7729 12.5296 13.5678 12.8789C13.5551 12.9027 13.5345 12.9201 13.5202 12.9424C13.8024 13.1721 14.043 13.4487 14.2314 13.7599C14.2521 13.798 14.26 13.8377 14.2806 13.8758C14.4117 13.728 14.5291 13.5686 14.6315 13.3996C14.8951 12.9384 15.0468 12.4218 15.0744 11.8913C15.1019 11.3608 15.0046 10.8312 14.7902 10.3452L14.7839 10.35Z"/>
+<path class="cloud" d="M13.5393 15.3251C13.5393 15.306 13.5393 15.287 13.5393 15.2679C13.5321 15.1286 13.5108 14.9903 13.4758 14.8552C13.4631 14.8107 13.4536 14.7647 13.4377 14.7218C13.2888 14.2662 12.9819 13.8789 12.5725 13.6296C12.5551 13.6165 12.5371 13.6044 12.5185 13.5931C12.2119 13.4156 11.8662 13.3163 11.5121 13.3042C11.2489 12.6697 10.7659 12.1512 10.1516 11.8437C9.80547 11.6854 9.4288 11.6052 9.04826 11.6088H8.97047C8.50516 11.6285 8.05333 11.7709 7.66079 12.0215L7.5322 12.1056C7.43663 12.1745 7.34544 12.2493 7.25915 12.3295V12.3374C6.95353 12.6279 6.72449 12.9895 6.5924 13.3899C6.1538 13.5149 5.76734 13.7783 5.49068 14.1408C5.2733 14.4313 5.13589 14.7737 5.09216 15.1339C5.04842 15.494 5.0999 15.8594 5.24144 16.1934C5.35157 16.4504 5.51373 16.6817 5.71769 16.8729C5.91445 17.0775 6.1511 17.2396 6.41302 17.3491C6.67638 17.457 6.95869 17.511 7.24328 17.5079H11.42C11.703 17.5112 11.9838 17.4572 12.2455 17.3491C12.6898 17.165 13.0559 16.8315 13.2805 16.4062C13.4501 16.071 13.5388 15.7007 13.5393 15.3251V15.3251ZM12.2979 15.7585C12.2487 15.8777 12.1757 15.9857 12.0835 16.076C11.9939 16.1681 11.8857 16.2401 11.766 16.2871C11.6485 16.3366 11.5221 16.3614 11.3946 16.3601H7.24804C7.11965 16.3633 6.99202 16.3395 6.87339 16.2903C6.75352 16.2422 6.64528 16.1692 6.55589 16.076C6.46513 15.9855 6.39382 15.8775 6.34634 15.7585C6.29792 15.6413 6.27415 15.5154 6.27649 15.3886C6.27167 15.1534 6.35881 14.9255 6.51938 14.7536C6.67796 14.5809 6.89543 14.4739 7.12898 14.4535L7.50521 14.4059C7.58459 14.4059 7.62745 14.3583 7.62745 14.2694L7.68142 13.9392C7.71406 13.6062 7.87384 13.2986 8.12751 13.0804C8.3717 12.8536 8.69446 12.7307 9.02762 12.7375C9.36257 12.7359 9.68667 12.8561 9.93958 13.0757C10.1925 13.2954 10.357 13.5994 10.4024 13.9313L10.45 14.3154C10.4865 14.4043 10.5357 14.4504 10.5961 14.4504H11.3993C11.5263 14.4498 11.652 14.4747 11.7692 14.5234C11.8874 14.5703 11.9953 14.6398 12.0867 14.7282C12.1797 14.8119 12.2534 14.9148 12.3026 15.0298C12.3517 15.1434 12.3756 15.2664 12.3725 15.3902C12.3731 15.5168 12.3477 15.6421 12.2979 15.7585V15.7585Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/night-clear.svg b/browser/themes/shared/weather/night-clear.svg
new file mode 100644
index 0000000000..d988b15ba1
--- /dev/null
+++ b/browser/themes/shared/weather/night-clear.svg
@@ -0,0 +1,17 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .moon {
+    fill: context-fill #5B5B66;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .moon {
+      fill: context-fill #FFFFCC;
+    }
+  }
+</style>
+<path class="moon" d="M3.92444 11.637C3.93378 9.76376 4.67692 7.96875 5.99444 6.63705C6.65121 6.00524 7.42137 5.50312 8.26444 5.15705C9.12849 4.76279 10.0648 4.55169 11.0144 4.53705H12.1544C12.2207 4.54689 12.2809 4.58099 12.3234 4.63274C12.3659 4.68448 12.3876 4.75017 12.3844 4.81705L12.4344 5.69705C12.4492 6.91478 12.9411 8.07812 13.8044 8.93705C14.6447 9.81606 15.7988 10.3266 17.0144 10.357L17.8344 10.427C17.8662 10.4223 17.8986 10.4249 17.9292 10.4346C17.9598 10.4443 17.9878 10.4609 18.0109 10.4831C18.0341 10.5053 18.0519 10.5325 18.0629 10.5627C18.0739 10.5929 18.0779 10.6251 18.0744 10.657V11.657C18.076 12.8876 17.748 14.0962 17.1244 15.157C16.5118 16.2324 15.625 17.1261 14.5544 17.747C13.478 18.377 12.2516 18.7051 11.0044 18.697C10.051 18.705 9.1056 18.5214 8.22444 18.157C7.39914 17.8065 6.64888 17.3007 6.01444 16.667C5.37345 16.0174 4.86411 15.25 4.51444 14.407C4.14199 13.5301 3.94168 12.5897 3.92444 11.637V11.637ZM5.75444 11.637C5.75199 12.358 5.8961 13.0719 6.17802 13.7355C6.45994 14.399 6.87379 14.9983 7.39444 15.497C7.88568 15.959 8.45882 16.3253 9.08444 16.577C9.69705 16.8413 10.3573 16.9775 11.0244 16.977C11.6272 16.9748 12.2242 16.8594 12.7844 16.637C13.383 16.3913 13.9396 16.0539 14.4344 15.637C14.9567 15.2267 15.4005 14.7253 15.7444 14.157C16.1136 13.5127 16.3547 12.803 16.4544 12.067C14.9582 11.8002 13.5855 11.0648 12.5344 9.96705C11.5535 8.92565 10.9543 7.58267 10.8344 6.15705C9.90068 6.20798 8.99841 6.51219 8.22444 7.03705C7.46106 7.54219 6.83556 8.22955 6.40444 9.03705C5.97434 9.83595 5.75089 10.7297 5.75444 11.637V11.637Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/night-hazy-moonlight.svg b/browser/themes/shared/weather/night-hazy-moonlight.svg
new file mode 100644
index 0000000000..54ea87b240
--- /dev/null
+++ b/browser/themes/shared/weather/night-hazy-moonlight.svg
@@ -0,0 +1,30 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .moon, .haze {
+    fill: context-fill #80808F;
+  }
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .moon {
+      fill: context-fill #FFFFCC;
+    }
+    .cloud {
+      fill: context-fill #F0F0F4;
+    }
+    .haze {
+      fill: context-fill #BFBFC9;
+    }
+  }
+</style>
+<path class="cloud" d="M3.75024 12.9736C3.75024 13.0371 3.75024 13.0653 3.85517 13.0653H4.8904C4.93236 13.0653 4.98133 13.03 5.03029 12.9525C5.19271 12.592 5.44893 12.2826 5.77174 12.0571C6.08948 11.8261 6.46506 11.6893 6.85593 11.6623L7.24065 11.613C7.31759 11.613 7.35956 11.5707 7.35956 11.4861L7.40852 11.1335C7.46816 10.397 7.81226 9.71345 8.36681 9.23C8.9152 8.74179 9.62166 8.47235 10.3533 8.47235C11.085 8.47235 11.7915 8.74179 12.3399 9.23C12.8844 9.71072 13.2228 10.3854 13.2842 11.1124L13.3401 11.5143C13.3401 11.5918 13.3891 11.6341 13.48 11.6341H14.5922C15.0297 11.6296 15.4585 11.7573 15.8233 12.0007C16.1848 12.236 16.4714 12.5714 16.6486 12.9666C16.6976 13.0441 16.7466 13.0794 16.7955 13.0794H17.7958C17.8797 13.0794 17.9147 13.03 17.8937 12.9172C17.6948 12.2073 17.2665 11.5845 16.6766 11.1476C16.0755 10.682 15.3363 10.4336 14.5782 10.4426H14.3544C14.1386 9.52835 13.6206 8.7153 12.8854 8.13722C12.1641 7.54769 11.261 7.23095 10.3323 7.24185C9.38102 7.23242 8.45697 7.56202 7.72329 8.17247C6.98497 8.77759 6.47811 9.6224 6.28936 10.5625C5.70017 10.6988 5.15868 10.9937 4.72252 11.4156C4.27921 11.8341 3.95551 12.3648 3.78522 12.9525C3.78522 12.9525 3.75024 12.9454 3.75024 12.9736Z"/>
+<path class="haze" d="M1.86874 16.6385C1.83861 16.7126 1.82428 16.7923 1.82667 16.8723C1.82503 16.9491 1.8398 17.0254 1.86997 17.0959C1.90014 17.1665 1.94501 17.2297 2.00154 17.2812C2.12296 17.3892 2.28031 17.4471 2.44222 17.4434H15.5015C15.6572 17.4475 15.8081 17.3892 15.9212 17.2812C15.9785 17.2303 16.0238 17.1672 16.0541 17.0965C16.0843 17.0258 16.0986 16.9492 16.0961 16.8723C16.099 16.7928 16.0856 16.7136 16.0568 16.6395C16.028 16.5655 15.9843 16.4982 15.9285 16.442C15.8727 16.3857 15.8059 16.3417 15.7325 16.3126C15.659 16.2835 15.5804 16.2701 15.5015 16.273H2.44222C2.36133 16.2707 2.28078 16.2844 2.20517 16.3134C2.12955 16.3424 2.06036 16.3862 2.00154 16.4422C1.94411 16.4976 1.89886 16.5644 1.86874 16.6385Z"/>
+<path class="haze" d="M3.70478 14.4272C3.67341 14.5001 3.65791 14.579 3.65931 14.6585C3.65831 14.7373 3.67331 14.8155 3.70338 14.8883C3.73346 14.961 3.77797 15.0268 3.83418 15.0816C3.88773 15.1393 3.95285 15.1848 4.02521 15.2152C4.09757 15.2456 4.17551 15.2601 4.25387 15.2578H17.3132C17.3894 15.2595 17.465 15.2446 17.535 15.2142C17.605 15.1838 17.6677 15.1385 17.7188 15.0816C17.8253 14.9672 17.8831 14.8153 17.8797 14.6585C17.8826 14.5821 17.87 14.5059 17.8427 14.4345C17.8154 14.3632 17.774 14.2981 17.721 14.2434C17.668 14.1887 17.6045 14.1454 17.5344 14.1161C17.4643 14.0869 17.389 14.0724 17.3132 14.0734H4.25387C4.1778 14.0711 4.10205 14.0843 4.03115 14.1121C3.96024 14.14 3.89563 14.182 3.84117 14.2355C3.78266 14.2889 3.73615 14.3542 3.70478 14.4272Z"/>
+<path class="haze" d="M4.93605 18.8016C4.90466 18.8734 4.88908 18.9512 4.89039 19.0296C4.88732 19.107 4.9007 19.1842 4.92966 19.2559C4.95861 19.3277 5.00247 19.3924 5.05827 19.4456C5.11226 19.5032 5.17731 19.5492 5.24945 19.5807C5.32159 19.6122 5.39933 19.6286 5.47796 19.6289H18.5442C18.6229 19.6289 18.7008 19.6132 18.7734 19.5826C18.846 19.5521 18.9118 19.5073 18.9671 19.4509C19.0224 19.3945 19.0661 19.3276 19.0956 19.2541C19.125 19.1806 19.1397 19.1019 19.1388 19.0226C19.1404 18.9458 19.1257 18.8695 19.0955 18.799C19.0653 18.7284 19.0205 18.6652 18.9639 18.6137C18.8505 18.5064 18.6998 18.4482 18.5442 18.4515H5.49195C5.41472 18.4483 5.33764 18.461 5.26547 18.4889C5.19329 18.5168 5.12754 18.5592 5.07226 18.6137C5.01392 18.6657 4.96745 18.7297 4.93605 18.8016Z"/>
+<path class="moon" d="M19.8391 7.22274H19.396C18.7924 7.21233 18.2174 6.96342 17.7967 6.53041C17.5797 6.31835 17.4067 6.0654 17.2879 5.78616C17.169 5.50691 17.1067 5.2069 17.1044 4.90343V4.44649C17.1049 4.37501 17.0791 4.30585 17.0318 4.25221C16.9846 4.19858 16.9192 4.16422 16.8483 4.15572H16.239C15.7194 4.15721 15.2056 4.26561 14.7297 4.47419C14.2636 4.66629 13.8402 4.94871 13.4837 5.30517C13.1273 5.66163 12.8448 6.0851 12.6527 6.55118C12.5881 6.70705 12.5326 6.86656 12.4866 7.02889C12.8534 7.19029 13.1997 7.39482 13.5181 7.63814L13.6151 7.72814C13.6604 7.39221 13.7635 7.06664 13.9197 6.7658C14.1399 6.35716 14.4559 6.00795 14.8405 5.74808C15.1926 5.50738 15.5999 5.35972 16.0244 5.31883C16.1268 6.0396 16.4482 6.71148 16.9452 7.24351C17.4908 7.81368 18.1951 8.20683 18.9668 8.37201C18.8245 9.02666 18.466 9.61437 17.9491 10.0405C17.7142 10.2243 17.4557 10.3756 17.1806 10.4905C17.5488 10.7468 17.8717 11.0627 18.136 11.4252C18.1543 11.4289 18.1731 11.4289 18.1914 11.4252C18.7822 11.0825 19.2717 10.5892 19.6098 9.99569C19.9479 9.40218 20.1226 8.72964 20.116 8.04661V7.52736C20.1255 7.4879 20.1251 7.44674 20.115 7.40745C20.1049 7.36817 20.0853 7.33194 20.058 7.30192C20.0307 7.27191 19.9965 7.249 19.9584 7.2352C19.9202 7.2214 19.8793 7.21713 19.8391 7.22274Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/night-mostly-clear.svg b/browser/themes/shared/weather/night-mostly-clear.svg
new file mode 100644
index 0000000000..39cb2c22e3
--- /dev/null
+++ b/browser/themes/shared/weather/night-mostly-clear.svg
@@ -0,0 +1,24 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .moon {
+    fill: context-fill #80808F;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .cloud {
+      fill: context-fill #F0F0F4;
+    }
+    .moon {
+      fill: context-fill #FFFFCC;
+    }
+  }
+</style>
+<path class="moon" d="M19.6886 7.73454H19.2023C18.5399 7.72311 17.9088 7.44994 17.4472 6.97472C17.2089 6.74199 17.0191 6.46439 16.8887 6.15792C16.7583 5.85146 16.6898 5.52221 16.6873 5.18916V4.68768C16.6879 4.60923 16.6595 4.53333 16.6077 4.47446C16.5558 4.4156 16.4841 4.3779 16.4062 4.36856H15.7376C15.1673 4.3702 14.6035 4.48917 14.0812 4.71808C13.5697 4.9289 13.1049 5.23885 12.7137 5.63006C12.3225 6.02126 12.0126 6.48601 11.8017 6.99752C11.7308 7.16859 11.6699 7.34364 11.6194 7.52179C12.022 7.69893 12.402 7.92339 12.7515 8.19042L12.8579 8.2892C12.9077 7.92052 13.0208 7.56322 13.1922 7.23306C13.4339 6.78458 13.7806 6.40134 14.2028 6.11613C14.5892 5.85198 15.0361 5.68992 15.502 5.64505C15.6144 6.43607 15.9672 7.17345 16.5126 7.75733C17.1114 8.38307 17.8843 8.81454 18.7312 8.99583C18.575 9.71429 18.1816 10.3593 17.6143 10.827C17.3566 11.0286 17.0729 11.1947 16.7709 11.3209C17.175 11.6021 17.5294 11.9488 17.8195 12.3466C17.8395 12.3507 17.8602 12.3507 17.8802 12.3466C18.5287 11.9705 19.0658 11.4291 19.4369 10.7778C19.808 10.1264 19.9997 9.38832 19.9925 8.63871V8.06885C20.0029 8.02554 20.0024 7.98037 19.9913 7.93725C19.9802 7.89414 19.9588 7.85438 19.9288 7.82144C19.8989 7.7885 19.8614 7.76336 19.8195 7.74822C19.7776 7.73307 19.7327 7.72838 19.6886 7.73454V7.73454Z"/>
+<path class="cloud" d="M2.00022 15.0897C2.00217 14.2436 2.2899 13.423 2.81675 12.761C3.34361 12.099 4.07867 11.6344 4.90271 11.4426C5.12416 10.429 5.69087 9.52388 6.50591 8.88198C7.3114 8.24409 8.30874 7.897 9.33622 7.897C10.3637 7.897 11.361 8.24409 12.1665 8.88198C12.9717 9.50546 13.5356 10.3889 13.7621 11.3818H14.0205C14.6834 11.3785 15.3357 11.5488 15.9124 11.8756C16.4851 12.1967 16.9603 12.6666 17.2877 13.2357C17.6261 13.7957 17.8096 14.4355 17.8195 15.0897C17.8244 15.7368 17.6619 16.3743 17.3477 16.9401C17.0335 17.5059 16.5783 17.9809 16.0264 18.3189C15.4747 18.6591 14.8431 18.8478 14.1952 18.8659H5.66252C5.17667 18.8513 4.69845 18.7412 4.25518 18.5417C3.81192 18.3422 3.4123 18.0574 3.07916 17.7034C2.73263 17.3628 2.45845 16.9557 2.27305 16.5066C2.08765 16.0575 1.99486 15.5755 2.00022 15.0897V15.0897ZM3.2995 15.0897C3.29168 15.7299 3.53752 16.3472 3.98333 16.8068C4.19718 17.0423 4.45582 17.2328 4.74414 17.3672C5.03245 17.5016 5.34467 17.5771 5.66252 17.5894H14.1496C14.4636 17.5797 14.7724 17.5075 15.0581 17.3771C15.3438 17.2466 15.6007 17.0605 15.8136 16.8296C16.0364 16.6032 16.2122 16.3348 16.3309 16.0401C16.4496 15.7454 16.5088 15.4301 16.5051 15.1125C16.5054 14.7879 16.4379 14.4669 16.3071 14.1699C16.1763 13.8729 15.9849 13.6065 15.7452 13.3877C15.5186 13.1477 15.2454 12.9565 14.9423 12.8258C14.6392 12.6952 14.3126 12.6278 13.9825 12.6279H12.7668C12.6832 12.6279 12.6376 12.5823 12.6376 12.4911L12.5844 12.058C12.5105 11.2574 12.1292 10.5167 11.5207 9.99131C10.9286 9.44702 10.1518 9.14823 9.34762 9.15552C8.54417 9.1476 7.76859 9.44967 7.18215 9.99891C6.5795 10.5261 6.20609 11.2675 6.1412 12.0656L6.08042 12.4987C6.08042 12.5899 6.02723 12.6355 5.92846 12.6355H5.54095C4.92693 12.7001 4.35856 12.9897 3.94534 13.4485C3.52564 13.8912 3.29411 14.4796 3.2995 15.0897V15.0897Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/night-mostly-cloudy-with-flurries.svg b/browser/themes/shared/weather/night-mostly-cloudy-with-flurries.svg
new file mode 100644
index 0000000000..2417bf56c8
--- /dev/null
+++ b/browser/themes/shared/weather/night-mostly-cloudy-with-flurries.svg
@@ -0,0 +1,34 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .moon .snow {
+    fill: context-fill #80808F;
+  }
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .moon {
+      fill: context-fill #FFFFCC;
+    }
+    .cloud {
+      fill: context-fill #F0F0F4;
+    }
+    .snow {
+      fill: context-fill #FFFFFF;
+    }
+  }
+</style>
+<path class="cloud" d="M16.2819 10.2269C16.1327 10.0781 15.9711 9.94223 15.7988 9.82083L15.6308 9.72281C15.5327 9.6598 15.4277 9.61079 15.3297 9.55478L14.9936 9.42875L14.7906 9.37274C14.6712 9.33501 14.5496 9.30462 14.4265 9.28172C14.2366 9.2512 14.0447 9.23482 13.8524 9.23271H13.5933C13.5536 9.06363 13.5022 8.89752 13.4393 8.73561C13.3865 8.58897 13.3233 8.44625 13.2503 8.30852V8.30852C13.1732 8.16071 13.0867 8.01805 12.9912 7.88144V7.88144C12.5142 7.18477 11.8384 6.648 11.0518 6.34112V6.34112C10.5661 6.15942 10.051 6.06922 9.53251 6.07507C8.58537 6.06055 7.66248 6.37478 6.92098 6.96425C6.17596 7.5503 5.66252 8.38123 5.47168 9.30973C4.70648 9.47745 4.02194 9.90251 3.53228 10.514C3.04014 11.1215 2.77522 11.8816 2.78313 12.6634C2.78095 13.1109 2.86912 13.5543 3.04236 13.967C3.2156 14.3796 3.47035 14.753 3.79134 15.0649C4.41313 15.7211 5.26835 16.1059 6.17182 16.1361C6.188 16.1385 6.2045 16.137 6.22001 16.1319C6.23552 16.1267 6.24962 16.118 6.26118 16.1065C6.27274 16.0949 6.28144 16.0808 6.28659 16.0653C6.29174 16.0498 6.2932 16.0333 6.29085 16.0171V15.0789C6.29085 14.9949 6.24884 14.9529 6.17182 14.9529C5.88464 14.9437 5.60222 14.8769 5.34126 14.7567C5.0803 14.6364 4.84611 14.4651 4.65251 14.2527C4.24469 13.8307 4.02064 13.2643 4.02939 12.6774C4.02071 12.1138 4.23162 11.569 4.61751 11.1581C4.99899 10.7374 5.5228 10.473 6.08781 10.416H6.43788C6.5289 10.416 6.57791 10.3739 6.57791 10.2899L6.59191 9.87684C6.65346 9.14392 6.9974 8.46358 7.55111 7.97945C8.09406 7.47906 8.80822 7.20593 9.54652 7.2163C10.287 7.20556 11.0034 7.47862 11.5489 7.97945C12.1056 8.46125 12.4502 9.14289 12.5081 9.87684L12.5571 10.2759C12.5548 10.293 12.5565 10.3104 12.562 10.3268C12.5675 10.3431 12.5767 10.358 12.5889 10.3702C12.6011 10.3823 12.616 10.3916 12.6323 10.3971C12.6487 10.4026 12.6661 10.4043 12.6832 10.402H13.8524C14.2948 10.401 14.7277 10.5302 15.0972 10.7735C15.4667 11.0167 15.7565 11.3634 15.9304 11.7702C16.1043 12.177 16.1547 12.6259 16.0753 13.0611C15.9958 13.4964 15.7901 13.8986 15.4837 14.2177C15.0855 14.6328 14.5456 14.8828 13.9714 14.9179C13.8944 14.9179 13.8524 14.9599 13.8524 15.0439V15.9821C13.85 15.9983 13.8515 16.0148 13.8567 16.0303C13.8618 16.0458 13.8705 16.0599 13.8821 16.0714C13.8936 16.083 13.9077 16.0917 13.9232 16.0969C13.9387 16.102 13.9552 16.1035 13.9714 16.1011C14.5674 16.0922 15.1492 15.9176 15.6518 15.597C16.1536 15.2882 16.5663 14.8538 16.849 14.3368C17.1403 13.815 17.29 13.226 17.2831 12.6284C17.2813 12.246 17.2126 11.8669 17.0801 11.5082C16.9155 11.0257 16.6424 10.5873 16.2819 10.2269V10.2269Z" fill="#5B5B66"/>
+<path class="snow" d="M7.14957 15.2954C7.11974 15.3675 7.1048 15.4448 7.10564 15.5228C7.10324 15.6032 7.11742 15.6832 7.14728 15.7579C7.17714 15.8325 7.22205 15.9002 7.27921 15.9568C7.33348 16.0154 7.39958 16.0618 7.47314 16.093C7.5467 16.1242 7.62604 16.1394 7.70591 16.1376C7.78591 16.1403 7.86555 16.1256 7.93925 16.0943C8.01295 16.0631 8.07894 16.0162 8.13261 15.9568C8.21748 15.8728 8.27538 15.7654 8.29892 15.6484C8.32246 15.5314 8.31056 15.41 8.26476 15.2997C8.21895 15.1895 8.14131 15.0954 8.04177 15.0295C7.94222 14.9636 7.82529 14.9289 7.70591 14.9298C7.62664 14.9275 7.54776 14.9418 7.47429 14.9717C7.40083 15.0016 7.33439 15.0464 7.27921 15.1034C7.22349 15.158 7.1794 15.2233 7.14957 15.2954Z" fill="#80808F"/>
+<path class="snow" d="M7.14454 17.9166C7.11589 17.9903 7.10265 18.0691 7.10564 18.1481V18.1626C7.10589 18.3142 7.16562 18.4596 7.27198 18.5676C7.38707 18.6766 7.54019 18.7363 7.69868 18.7339C7.77748 18.7376 7.85617 18.7247 7.92967 18.696C8.00317 18.6674 8.06984 18.6236 8.12538 18.5676C8.23586 18.453 8.29759 18.3001 8.29759 18.1409C8.29759 17.9817 8.23586 17.8288 8.12538 17.7142C8.01029 17.6052 7.85717 17.5455 7.69868 17.5479C7.61963 17.5458 7.541 17.56 7.46765 17.5896C7.3943 17.6191 7.32779 17.6634 7.27221 17.7196C7.21664 17.7759 7.17319 17.8429 7.14454 17.9166Z" fill="#80808F"/>
+<path class="snow" d="M9.59352 16.5209C9.47662 16.6407 9.41165 16.8018 9.41271 16.9693C9.41119 17.1311 9.47356 17.2871 9.58629 17.4032C9.63916 17.4617 9.70398 17.5081 9.77635 17.5393C9.84872 17.5704 9.92696 17.5857 10.0058 17.584C10.0871 17.585 10.1678 17.5698 10.2432 17.5393C10.3186 17.5088 10.3873 17.4637 10.4451 17.4065C10.503 17.3494 10.5489 17.2813 10.5802 17.2062C10.6116 17.1312 10.6277 17.0506 10.6277 16.9693C10.6223 16.806 10.555 16.651 10.4396 16.5355C10.3241 16.42 10.169 16.3527 10.0058 16.3473C9.92884 16.3466 9.85259 16.3616 9.7817 16.3915C9.71081 16.4213 9.64677 16.4654 9.59352 16.5209Z" fill="#80808F"/>
+<path class="snow" d="M9.41271 14.3361C9.41368 14.2604 9.42913 14.1855 9.45829 14.1156C9.48938 14.0409 9.5354 13.9735 9.59352 13.9173C9.70426 13.8097 9.85142 13.7478 10.0058 13.7437C10.0878 13.7417 10.1694 13.7567 10.2453 13.7878C10.3212 13.8189 10.3899 13.8655 10.4469 13.9245C10.5057 13.9802 10.5522 14.0475 10.5834 14.1223C10.6145 14.197 10.6296 14.2775 10.6277 14.3584C10.6295 14.4383 10.6143 14.5177 10.5832 14.5912C10.552 14.6648 10.5056 14.7309 10.4469 14.7851C10.3885 14.8418 10.3195 14.8864 10.2437 14.9162C10.168 14.946 10.0871 14.9604 10.0058 14.9587C9.92763 14.9604 9.85 14.9459 9.77779 14.916C9.70558 14.8861 9.64037 14.8416 9.58629 14.7851C9.52597 14.7234 9.47933 14.6496 9.44943 14.5686C9.41952 14.4876 9.40701 14.4012 9.41271 14.3151V14.3361Z" fill="#80808F"/>
+<path class="snow" d="M9.41271 19.6049C9.41344 19.5269 9.429 19.4497 9.45861 19.3774C9.48965 19.3017 9.53552 19.2329 9.59352 19.1751C9.64677 19.1196 9.71081 19.0756 9.7817 19.0457C9.85259 19.0159 9.92884 19.0008 10.0058 19.0015C10.0871 19.0006 10.1678 19.0158 10.2432 19.0462C10.3186 19.0767 10.3873 19.1218 10.4451 19.179C10.503 19.2362 10.5489 19.3043 10.5802 19.3793C10.6116 19.4544 10.6277 19.5349 10.6277 19.6163C10.6295 19.6961 10.6143 19.7755 10.5832 19.849C10.552 19.9226 10.5056 19.9887 10.4469 20.043C10.3885 20.0997 10.3195 20.1442 10.2437 20.174C10.168 20.2038 10.0871 20.2182 10.0058 20.2165C9.92763 20.2182 9.85 20.2037 9.77779 20.1738C9.70558 20.1439 9.64037 20.0994 9.58629 20.043C9.52577 19.9828 9.47893 19.9104 9.44897 19.8305C9.41902 19.7506 9.40665 19.6652 9.41271 19.5801V19.6049Z" fill="#80808F"/>
+<path class="snow" d="M11.7881 15.2942C11.757 15.3664 11.7412 15.4442 11.7415 15.5228C11.7414 15.6025 11.7574 15.6813 11.7885 15.7546C11.8195 15.8279 11.8651 15.8942 11.9223 15.9495C11.9777 16.0087 12.045 16.0555 12.1198 16.0866C12.1946 16.1178 12.2752 16.1327 12.3562 16.1303C12.4362 16.1331 12.5159 16.1183 12.5896 16.0871C12.6633 16.0559 12.7293 16.0089 12.7829 15.9495C12.8678 15.8656 12.9257 15.7582 12.9492 15.6412C12.9728 15.5241 12.9609 15.4027 12.9151 15.2925C12.8693 15.1823 12.7916 15.0882 12.6921 15.0223C12.5925 14.9564 12.4756 14.9217 12.3562 14.9226C12.2754 14.9215 12.1952 14.937 12.1206 14.9681C12.046 14.9992 11.9785 15.0452 11.9223 15.1034C11.8649 15.1571 11.8193 15.2221 11.7881 15.2942Z" fill="#80808F"/>
+<path class="snow" d="M11.7865 17.9138C11.7558 17.9881 11.7405 18.0678 11.7415 18.1481V18.1626C11.7428 18.2377 11.7596 18.3118 11.7907 18.3802C11.8218 18.4486 11.8666 18.5099 11.9223 18.5604C11.9788 18.6175 12.0465 18.6624 12.1212 18.6923C12.1959 18.7222 12.2759 18.7363 12.3562 18.7339C12.435 18.7376 12.5137 18.7247 12.5872 18.696C12.6607 18.6674 12.7274 18.6236 12.7829 18.5676C12.8376 18.511 12.8804 18.4442 12.9089 18.371C12.9375 18.2977 12.9512 18.2195 12.9493 18.1409C12.9534 18.062 12.9407 17.9832 12.912 17.9097C12.8833 17.8361 12.8393 17.7695 12.7829 17.7142C12.7264 17.6596 12.6595 17.6167 12.5863 17.5882C12.513 17.5596 12.4348 17.5459 12.3562 17.5479C12.2759 17.5449 12.1959 17.5583 12.1209 17.5872C12.0459 17.6162 11.9776 17.6601 11.9202 17.7162C11.8627 17.7723 11.8172 17.8396 11.7865 17.9138Z" fill="#80808F"/>
+<path class="moon" d="M18.9607 6.36598H18.5602C18.0147 6.35657 17.495 6.13159 17.1147 5.74022C16.9185 5.54855 16.7622 5.31992 16.6548 5.06753C16.5474 4.81514 16.491 4.54398 16.489 4.26969V3.85669C16.4894 3.79208 16.4661 3.72957 16.4234 3.68109C16.3807 3.63261 16.3216 3.60156 16.2575 3.59387H15.7068C15.2371 3.59522 14.7728 3.6932 14.3426 3.88172C13.9214 4.05535 13.5386 4.31061 13.2164 4.6328C12.8943 4.95498 12.639 5.33773 12.4654 5.75899C12.407 5.89988 12.3568 6.04405 12.3152 6.19076C12.6467 6.33665 12.9597 6.52151 13.2476 6.74143L13.3352 6.82278C13.3762 6.51915 13.4693 6.22489 13.6105 5.95298C13.8095 5.58363 14.0951 5.268 14.4428 5.03311C14.761 4.81556 15.1291 4.6821 15.5128 4.64514C15.6054 5.2966 15.8959 5.90388 16.3451 6.38475C16.8382 6.90009 17.4748 7.25544 18.1723 7.40473C18.0436 7.99643 17.7196 8.52763 17.2524 8.91281C17.0401 9.07887 16.8065 9.21568 16.5578 9.31955C16.8906 9.55119 17.1825 9.8367 17.4214 10.1643C17.4379 10.1677 17.4549 10.1677 17.4714 10.1643C18.0055 9.85455 18.4478 9.40873 18.7534 8.87229C19.059 8.33585 19.2169 7.72798 19.211 7.11063V6.64131C19.2195 6.60564 19.2192 6.56844 19.2101 6.53293C19.2009 6.49742 19.1832 6.46468 19.1586 6.43755C19.1339 6.41042 19.103 6.38971 19.0685 6.37724C19.034 6.36477 18.997 6.3609 18.9607 6.36598V6.36598Z" fill="#80808F"/>
+</svg>
diff --git a/browser/themes/shared/weather/night-partly-cloudy-with-showers.svg b/browser/themes/shared/weather/night-partly-cloudy-with-showers.svg
new file mode 100644
index 0000000000..e63ae59e72
--- /dev/null
+++ b/browser/themes/shared/weather/night-partly-cloudy-with-showers.svg
@@ -0,0 +1,36 @@
+<!-- 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="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .moon {
+    fill: context-fill #80808F;
+  }
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .rain {
+    fill: context-fill #054096;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .moon {
+      fill: context-fill #FFFFCC;
+    }
+    .cloud {
+      fill: context-fill #F0F0F4;
+    }
+    .rain {
+      fill: context-fill #00B3F4;
+    }
+  }
+</style>
+<path class="rain" d="M12.3677 12.5002C12.3028 12.4819 12.2349 12.4765 12.168 12.4844C12.101 12.4923 12.0363 12.5134 11.9775 12.5463C11.9187 12.5792 11.8669 12.6234 11.8252 12.6764C11.7835 12.7294 11.7526 12.79 11.7343 12.8549L11.5 13.5262C11.5 13.5769 11.5 13.6276 11.5 13.6719C11.5021 13.7802 11.5351 13.8857 11.595 13.9759C11.6268 14.0268 11.6684 14.0709 11.7173 14.1056C11.7662 14.1404 11.8215 14.1652 11.88 14.1786H12.0383C12.158 14.1796 12.2743 14.1394 12.3677 14.0646C12.4603 13.9896 12.5232 13.8841 12.545 13.7669L12.716 13.1336C12.7508 13.0009 12.7317 12.8598 12.6629 12.7412C12.5941 12.6225 12.4811 12.5359 12.3487 12.5002H12.3677Z"/>
+<path class="rain" d="M11.5 15.5275C11.4354 15.505 11.3666 15.4973 11.2986 15.505C11.2306 15.5126 11.1652 15.5355 11.1073 15.5719C10.9816 15.6411 10.8882 15.7572 10.8476 15.8949L10.6766 16.5282C10.6766 16.5282 10.6766 16.5599 10.6766 16.5789C10.6766 16.5979 10.6766 16.6169 10.6766 16.6295C10.6766 16.6422 10.6766 16.6612 10.6766 16.6739C10.6831 16.7913 10.7245 16.9041 10.7956 16.9978C10.8667 17.0915 10.9642 17.1618 11.0756 17.1995H11.234C11.3416 17.1991 11.4461 17.1635 11.5316 17.0982C11.6346 17.02 11.7065 16.9078 11.7343 16.7815L11.918 16.1482C11.9375 16.0783 11.9425 16.0052 11.9327 15.9333C11.9229 15.8614 11.8985 15.7923 11.861 15.7302C11.82 15.6714 11.7662 15.6226 11.7037 15.5875C11.6412 15.5524 11.5715 15.5319 11.5 15.5275Z"/>
+<path class="rain" d="M9.72669 14.4445C9.65537 14.4223 9.58016 14.4153 9.50596 14.424C9.43175 14.4327 9.36022 14.457 9.29602 14.4952C9.2344 14.5301 9.18138 14.5784 9.14084 14.6365C9.10029 14.6946 9.07325 14.761 9.06169 14.8309L8.88435 15.4642C8.87546 15.5017 8.87546 15.5407 8.88435 15.5782C8.8858 15.6935 8.92103 15.8058 8.98569 15.9012C9.05508 16.0084 9.16074 16.0871 9.28335 16.1229C9.35038 16.1427 9.42081 16.1482 9.49011 16.1391C9.55942 16.1301 9.62605 16.1066 9.68572 16.0702C9.74538 16.0338 9.79676 15.9853 9.83655 15.9278C9.87633 15.8704 9.90363 15.8052 9.91669 15.7365L10.0687 15.1032C10.0913 15.0357 10.0995 14.9642 10.093 14.8934C10.0864 14.8225 10.0652 14.7538 10.0307 14.6915C9.96396 14.5739 9.85544 14.4858 9.72669 14.4445V14.4445Z"/>
+<path class="rain" d="M7.25665 15.4769C7.11399 15.4381 6.96184 15.4563 6.83232 15.5275C6.77099 15.5628 6.71819 15.6112 6.67769 15.6692C6.63719 15.7272 6.60997 15.7935 6.59799 15.8632L6.42065 16.4965C6.42065 16.5282 6.42065 16.5725 6.42065 16.6295C6.42217 16.7487 6.45729 16.8651 6.52199 16.9652C6.58713 17.0724 6.68807 17.1532 6.80699 17.1932C6.87036 17.2148 6.93763 17.2226 7.00427 17.2161C7.07092 17.2095 7.13538 17.1888 7.19332 17.1552C7.26197 17.1204 7.32236 17.0713 7.37043 17.0113C7.4185 16.9512 7.45313 16.8815 7.47199 16.8069L7.63032 16.1419C7.65286 16.0773 7.66057 16.0085 7.6529 15.9405C7.64522 15.8725 7.62236 15.8071 7.58599 15.7492C7.55171 15.6844 7.50497 15.6269 7.44846 15.5802C7.39195 15.5335 7.32677 15.4984 7.25665 15.4769V15.4769Z"/>
+<path class="rain" d="M8.89072 17.4846C8.82298 17.4617 8.7511 17.4539 8.68002 17.4615C8.60895 17.4692 8.54038 17.4922 8.47906 17.5289C8.35527 17.5989 8.26419 17.715 8.22572 17.8519L8.04839 18.4852C8.02865 18.5269 8.01786 18.5722 8.01672 18.6182C8.02161 18.7319 8.05898 18.8418 8.12439 18.9349C8.19863 19.0442 8.3082 19.1247 8.43472 19.1629H8.59306C8.67347 19.1654 8.75345 19.1503 8.82739 19.1186C8.89634 19.0819 8.95574 19.0295 9.00083 18.9657C9.04593 18.9019 9.07545 18.8285 9.08706 18.7512L9.25806 18.1179C9.28089 18.0502 9.28876 17.9783 9.2811 17.9072C9.27345 17.8361 9.25046 17.7676 9.21372 17.7062C9.13772 17.5944 9.02241 17.5153 8.89072 17.4846V17.4846Z"/>
+<path class="rain" d="M8.33337 13.7669L8.48537 13.1335C8.5079 13.069 8.51562 13.0001 8.50794 12.9322C8.50027 12.8642 8.4774 12.7988 8.44103 12.7409C8.40872 12.671 8.36127 12.6092 8.30212 12.5599C8.24297 12.5106 8.1736 12.4751 8.09903 12.4559C8.02854 12.4353 7.95461 12.4292 7.88169 12.4379C7.80877 12.4466 7.73836 12.4699 7.6747 12.5066C7.6141 12.5412 7.56175 12.5886 7.52129 12.6454C7.48083 12.7023 7.45321 12.7673 7.44037 12.8359L7.25037 13.4692C7.25037 13.5199 7.25037 13.5706 7.25037 13.6212C7.25065 13.7384 7.29102 13.8519 7.36476 13.9429C7.43849 14.0339 7.54117 14.097 7.6557 14.1215C7.7192 14.151 7.78836 14.1663 7.85837 14.1663C7.92837 14.1663 7.99753 14.151 8.06103 14.1215C8.12998 14.0864 8.19021 14.0364 8.23733 13.975C8.28444 13.9137 8.31726 13.8426 8.33337 13.7669V13.7669Z"/>
+<path class="cloud" d="M15.1986 10.1759C15.0636 10.0413 14.9174 9.91838 14.7616 9.80857L14.6096 9.7199C14.5209 9.6629 14.4259 9.61857 14.3373 9.5679L14.0333 9.4539L13.8496 9.40324C13.7416 9.36911 13.6316 9.34161 13.5203 9.3209C13.3485 9.29329 13.1749 9.27847 13.0009 9.27657H12.7666C12.7307 9.12362 12.6841 8.97337 12.6273 8.8269C12.5795 8.69425 12.5223 8.56515 12.4563 8.44057V8.44057C12.3866 8.30686 12.3083 8.17782 12.2219 8.05424V8.05424C11.7905 7.42405 11.1791 6.9385 10.4676 6.6609V6.6609C10.0283 6.49654 9.56232 6.41495 9.09328 6.42023C8.23652 6.40711 7.40169 6.69135 6.73095 7.22457C6.05702 7.7547 5.59258 8.50634 5.41995 9.34624C4.72777 9.49795 4.10855 9.88245 3.66562 10.4356C3.22043 10.9851 2.98079 11.6727 2.98795 12.3799C2.98598 12.7847 3.06574 13.1858 3.22244 13.5591C3.37915 13.9323 3.60959 14.2701 3.89995 14.5522C4.4624 15.1458 5.23602 15.4939 6.05328 15.5212C6.06791 15.5234 6.08284 15.522 6.09687 15.5174C6.1109 15.5127 6.12366 15.5049 6.13411 15.4944C6.14457 15.4839 6.15244 15.4712 6.15709 15.4572C6.16175 15.4431 6.16307 15.4282 6.16095 15.4136V14.5649C6.16095 14.4889 6.12295 14.4509 6.05328 14.4509C5.7935 14.4426 5.53803 14.3822 5.30197 14.2734C5.06592 14.1646 4.85407 14.0096 4.67895 13.8176C4.31004 13.4358 4.10737 12.9234 4.11528 12.3926C4.10743 11.8828 4.29822 11.3899 4.64728 11.0182C4.99236 10.6377 5.46619 10.3985 5.97728 10.3469H6.29395C6.37628 10.3469 6.42062 10.3089 6.42062 10.2329L6.43328 9.85923C6.48896 9.19625 6.80008 8.58083 7.30095 8.1429C7.79209 7.69026 8.4381 7.44319 9.10595 7.45257C9.77574 7.44285 10.4239 7.68986 10.9173 8.1429C11.4209 8.57872 11.7326 9.19531 11.7849 9.85923L11.8293 10.2202C11.8272 10.2357 11.8287 10.2514 11.8337 10.2662C11.8387 10.281 11.847 10.2944 11.858 10.3055C11.8691 10.3165 11.8825 10.3248 11.8973 10.3298C11.9121 10.3348 11.9278 10.3363 11.9433 10.3342H13.0009C13.4011 10.3333 13.7927 10.4502 14.127 10.6703C14.4612 10.8904 14.7233 11.2039 14.8807 11.5719C15.038 11.9399 15.0835 12.346 15.0117 12.7397C14.9399 13.1334 14.7538 13.4972 14.4766 13.7859C14.1164 14.1614 13.628 14.3875 13.1086 14.4192C13.0389 14.4192 13.0009 14.4572 13.0009 14.5332V15.3819C12.9988 15.3965 13.0001 15.4115 13.0048 15.4255C13.0095 15.4395 13.0173 15.4523 13.0278 15.4627C13.0382 15.4732 13.051 15.4811 13.065 15.4857C13.0791 15.4904 13.094 15.4917 13.1086 15.4896C13.6478 15.4815 14.174 15.3236 14.6286 15.0336C15.0826 14.7542 15.4559 14.3613 15.7116 13.8936C15.9751 13.4216 16.1105 12.8888 16.1043 12.3482C16.1027 12.0023 16.0405 11.6594 15.9206 11.3349C15.7718 10.8984 15.5248 10.5019 15.1986 10.1759V10.1759Z"/>
+<path class="moon" d="M17.7754 6.24598H17.3749C16.8294 6.23657 16.3097 6.0116 15.9294 5.62022C15.7332 5.42856 15.5769 5.19993 15.4695 4.94754C15.3621 4.69514 15.3057 4.42398 15.3037 4.14969V3.73669C15.3041 3.67209 15.2808 3.60958 15.2381 3.5611C15.1954 3.51262 15.1363 3.48157 15.0722 3.47388H14.5215C14.0518 3.47522 13.5875 3.57321 13.1573 3.76173C12.7361 3.93536 12.3533 4.19062 12.0311 4.5128C11.709 4.83499 11.4537 5.21773 11.2801 5.639C11.2217 5.77988 11.1715 5.92405 11.1299 6.07077C11.4614 6.21665 11.7744 6.40151 12.0623 6.62143L12.1499 6.70278C12.1909 6.39915 12.284 6.10489 12.4252 5.83298C12.6242 5.46363 12.9098 5.14801 13.2575 4.91312C13.5757 4.69557 13.9438 4.5621 14.3275 4.52515C14.4201 5.17661 14.7106 5.78389 15.1598 6.26475C15.6529 6.78009 16.2895 7.13544 16.987 7.28474C16.8583 7.87644 16.5343 8.40763 16.0671 8.79281C15.8548 8.95888 15.6212 9.09568 15.3725 9.19955C15.7053 9.4312 15.9972 9.7167 16.2361 10.0443C16.2526 10.0477 16.2696 10.0477 16.2861 10.0443C16.8202 9.73456 17.2625 9.28873 17.5681 8.75229C17.8737 8.21585 18.0316 7.60798 18.0257 6.99063V6.52131C18.0342 6.48565 18.0339 6.44844 18.0247 6.41293C18.0156 6.37742 17.9979 6.34468 17.9733 6.31755C17.9486 6.29042 17.9177 6.26972 17.8832 6.25725C17.8487 6.24477 17.8117 6.24091 17.7754 6.24598V6.24598Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/night-partly-cloudy-with-thunderstorms.svg b/browser/themes/shared/weather/night-partly-cloudy-with-thunderstorms.svg
new file mode 100644
index 0000000000..d301a02ff0
--- /dev/null
+++ b/browser/themes/shared/weather/night-partly-cloudy-with-thunderstorms.svg
@@ -0,0 +1,31 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .moon {
+    fill: context-fill #80808F;
+  }
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .thunder {
+    fill: context-fill #FF7139;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .moon {
+      fill: context-fill #FFFFCC;
+    }
+    .cloud {
+      fill: context-fill #F0F0F4;
+    }
+    .thunder {
+      fill: context-fill #FFA437;
+    }
+  }
+</style>
+<path class="thunder" fill-rule="evenodd" clip-rule="evenodd" d="M11.2583 12.6547C11.5346 12.8142 11.6292 13.1675 11.4697 13.4437L9.94201 16.0893H11.8815C12.0878 16.0893 12.2785 16.1994 12.3817 16.3781C12.4849 16.5568 12.4849 16.777 12.3817 16.9557L10.3607 20.4567C10.2012 20.7329 9.848 20.8276 9.57172 20.6681C9.29545 20.5087 9.20077 20.1554 9.36026 19.8791L10.8811 17.2445H8.94149C8.73513 17.2445 8.54444 17.1344 8.44126 16.9557C8.33809 16.777 8.3381 16.5568 8.4413 16.3781L10.4693 12.8661C10.6288 12.5898 10.9821 12.4952 11.2583 12.6547Z"/>
+<path class="cloud" d="M16.4101 10.5526C16.2609 10.4038 16.0992 10.2679 15.927 10.1465L15.7589 10.0485C15.6609 9.98548 15.5559 9.93647 15.4579 9.88046L15.1218 9.75444L14.9188 9.69842C14.7994 9.6607 14.6778 9.6303 14.5547 9.60741C14.3648 9.57688 14.1729 9.5605 13.9806 9.55839H13.7215C13.6818 9.38931 13.6303 9.22321 13.5675 9.06129C13.5146 8.91465 13.4515 8.77193 13.3784 8.63421V8.63421C13.3014 8.4864 13.2149 8.34374 13.1194 8.20712V8.20712C12.6424 7.51045 11.9666 6.97368 11.18 6.6668V6.6668C10.6943 6.48511 10.1792 6.3949 9.66069 6.40075C8.71354 6.38624 7.79065 6.70047 7.04915 7.28993C6.30413 7.87599 5.79069 8.70692 5.59985 9.63541C4.83466 9.80313 4.15012 10.2282 3.66046 10.8397C3.16831 11.4472 2.90339 12.2073 2.91131 12.9891C2.90913 13.4366 2.9973 13.88 3.17054 14.2926C3.34378 14.7053 3.59852 15.0787 3.91951 15.3906C4.5413 16.0468 5.39652 16.4316 6.3 16.4618C6.31617 16.4642 6.33267 16.4627 6.34819 16.4575C6.3637 16.4524 6.37779 16.4437 6.38935 16.4321C6.40091 16.4206 6.40961 16.4065 6.41476 16.391C6.41991 16.3755 6.42137 16.359 6.41902 16.3428V15.4046C6.41902 15.3206 6.37701 15.2786 6.3 15.2786C6.01281 15.2693 5.73039 15.2026 5.46943 15.0824C5.20848 14.9621 4.97428 14.7907 4.78069 14.5784C4.37286 14.1564 4.14881 13.5899 4.15756 13.0031C4.14888 12.4395 4.3598 11.8946 4.74568 11.4838C5.12716 11.0631 5.65098 10.7987 6.21598 10.7416H6.56605C6.65707 10.7416 6.70608 10.6996 6.70608 10.6156L6.72008 10.2025C6.78164 9.4696 7.12557 8.78926 7.67928 8.30514C8.22223 7.80475 8.93639 7.53161 9.67469 7.54198C10.4151 7.53124 11.1316 7.80431 11.6771 8.30514C12.2338 8.78693 12.5784 9.46857 12.6363 10.2025L12.6853 10.6016C12.683 10.6187 12.6847 10.6361 12.6902 10.6524C12.6957 10.6688 12.7049 10.6836 12.7171 10.6958C12.7293 10.708 12.7442 10.7172 12.7605 10.7228C12.7768 10.7283 12.7942 10.7299 12.8113 10.7276H13.9806C14.423 10.7266 14.8559 10.8558 15.2254 11.0991C15.5949 11.3424 15.8847 11.6891 16.0586 12.0959C16.2325 12.5026 16.2829 12.9516 16.2034 13.3868C16.124 13.822 15.9183 14.2243 15.6119 14.5434C15.2137 14.9585 14.6738 15.2084 14.0996 15.2436C14.0226 15.2436 13.9806 15.2856 13.9806 15.3696V16.3078C13.9782 16.324 13.9797 16.3405 13.9848 16.356C13.99 16.3715 13.9987 16.3856 14.0102 16.3971C14.0218 16.4087 14.0359 16.4174 14.0514 16.4225C14.0669 16.4277 14.0834 16.4291 14.0996 16.4268C14.6956 16.4179 15.2774 16.2433 15.7799 15.9227C16.2818 15.6139 16.6945 15.1795 16.9772 14.6624C17.2685 14.1406 17.4182 13.5517 17.4113 12.9541C17.4095 12.5717 17.3408 12.1926 17.2082 11.8339C17.0437 11.3513 16.7706 10.913 16.4101 10.5526V10.5526Z"/>
+<path class="moon" d="M18.8325 6.4148H18.4321C17.8865 6.40539 17.3668 6.18042 16.9866 5.78905C16.7904 5.59738 16.634 5.36875 16.5266 5.11636C16.4192 4.86397 16.3629 4.5928 16.3608 4.31852V3.90552C16.3613 3.84091 16.3379 3.7784 16.2952 3.72992C16.2525 3.68144 16.1934 3.65039 16.1293 3.6427H15.5786C15.109 3.64405 14.6446 3.74203 14.2145 3.93055C13.7932 4.10418 13.4105 4.35944 13.0883 4.68162C12.7661 5.00381 12.5108 5.38656 12.3372 5.80782C12.2788 5.94871 12.2287 6.09287 12.187 6.23959C12.5186 6.38548 12.8316 6.57033 13.1194 6.79026L13.207 6.87161C13.248 6.56798 13.3411 6.27371 13.4823 6.0018C13.6814 5.63245 13.9669 5.31683 14.3146 5.08194C14.6328 4.86439 15.0009 4.73093 15.3846 4.69397C15.4772 5.34543 15.7677 5.95271 16.2169 6.43358C16.71 6.94892 17.3466 7.30426 18.0441 7.45356C17.9155 8.04526 17.5915 8.57646 17.1242 8.96163C16.912 9.1277 16.6783 9.2645 16.4296 9.36838C16.7624 9.60002 17.0543 9.88552 17.2932 10.2131C17.3097 10.2165 17.3267 10.2165 17.3432 10.2131C17.8773 9.90338 18.3197 9.45756 18.6252 8.92112C18.9308 8.38468 19.0887 7.7768 19.0829 7.15945V6.69014C19.0914 6.65447 19.091 6.61727 19.0819 6.58176C19.0727 6.54625 19.0551 6.51351 19.0304 6.48637C19.0057 6.45924 18.9748 6.43854 18.9403 6.42607C18.9059 6.4136 18.8689 6.40973 18.8325 6.4148V6.4148Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/partly-sunny-with-flurries.svg b/browser/themes/shared/weather/partly-sunny-with-flurries.svg
new file mode 100644
index 0000000000..aeaf0ac59c
--- /dev/null
+++ b/browser/themes/shared/weather/partly-sunny-with-flurries.svg
@@ -0,0 +1,42 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .sun {
+    fill: context-fill #E27F2E;
+  }
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .snow {
+    fill: context-fill #80808F;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .sun {
+      fill: context-fill #FFFF98;
+    }
+    .cloud {
+      fill: context-fill #BFBFC9;
+    }
+    .snow {
+      fill: context-fill #FFFFFF;
+    }
+  }
+</style>
+<path class="sun" d="M13.0136 5.02672C13.0926 5.02967 13.1713 5.01629 13.2448 4.98742C13.3184 4.95855 13.3852 4.91481 13.4411 4.85894C13.4969 4.80306 13.5407 4.73626 13.5695 4.66272C13.5984 4.58917 13.6118 4.51045 13.6088 4.43149V3.03095C13.6118 2.95095 13.5985 2.87118 13.5696 2.79653C13.5407 2.72187 13.4969 2.6539 13.4408 2.59678C13.3244 2.48949 13.1719 2.42993 13.0136 2.42993C12.8553 2.42993 12.7028 2.48949 12.5864 2.59678C12.5304 2.6539 12.4865 2.72187 12.4576 2.79653C12.4287 2.87118 12.4154 2.95095 12.4184 3.03095V4.43149C12.4154 4.51045 12.4288 4.58917 12.4577 4.66272C12.4866 4.73626 12.5303 4.80306 12.5862 4.85894C12.642 4.91481 12.7088 4.95855 12.7824 4.98742C12.8559 5.01629 12.9347 5.02967 13.0136 5.02672V5.02672Z"/>
+<path class="sun" d="M16.9001 6.6513C17.0541 6.64314 17.2003 6.58118 17.3133 6.47624L18.3147 5.46084C18.4245 5.34035 18.4846 5.1827 18.4827 5.01967C18.4846 4.9425 18.4709 4.86574 18.4425 4.79398C18.414 4.72222 18.3714 4.65693 18.3171 4.60202C18.2629 4.54711 18.1981 4.5037 18.1267 4.47439C18.0553 4.44509 17.9787 4.43048 17.9015 4.43144C17.7429 4.43108 17.5902 4.49118 17.4743 4.59951L16.466 5.6009C16.3609 5.721 16.3036 5.8755 16.3049 6.03506C16.3023 6.11336 16.3152 6.1914 16.3428 6.2647C16.3705 6.338 16.4123 6.40513 16.466 6.46223C16.5843 6.57376 16.7378 6.64061 16.9001 6.6513Z"/>
+<path class="sun" d="M11.0319 6.82642C11.4028 7.04846 11.744 7.31671 12.0473 7.62473C12.3533 7.48763 12.6853 7.41836 13.0206 7.42165C13.3471 7.42165 13.6704 7.48595 13.972 7.61088C14.2736 7.73582 14.5476 7.91893 14.7785 8.14977C15.0093 8.38062 15.1924 8.65467 15.3174 8.95628C15.4423 9.25789 15.5066 9.58116 15.5066 9.90762C15.517 10.0288 15.517 10.1506 15.5066 10.2718C15.6794 10.4105 15.841 10.5627 15.9898 10.7269C16.1532 10.9185 16.2985 11.1248 16.424 11.3432C16.6104 10.8856 16.7009 10.3946 16.6901 9.90062C16.6866 9.41952 16.589 8.94374 16.4029 8.50007C16.2215 8.06215 15.955 7.66464 15.6186 7.33062C15.2879 6.98512 14.8899 6.71105 14.4492 6.5253C14.0065 6.33599 13.5301 6.23833 13.0486 6.23819C12.332 6.22321 11.6281 6.42853 11.0319 6.82642V6.82642Z"/>
+<path class="sun" d="M17.8595 13.8992C17.808 13.8454 17.746 13.8028 17.6773 13.7739C17.6087 13.745 17.5349 13.7304 17.4604 13.7311C17.3822 13.7302 17.3046 13.7447 17.2321 13.7737C17.1595 13.8028 17.0934 13.8459 17.0374 13.9005C16.9815 13.9551 16.9369 14.0202 16.9061 14.0921C16.8754 14.164 16.8591 14.2412 16.8582 14.3193C16.8608 14.4841 16.9259 14.6418 17.0402 14.7605L17.4744 15.2087C17.5283 15.2724 17.5946 15.3245 17.6692 15.3618C17.7438 15.3991 17.8253 15.4209 17.9086 15.4258C18.065 15.4008 18.2084 15.3235 18.3153 15.2064C18.4221 15.0894 18.4861 14.9396 18.4968 14.7815C18.493 14.6231 18.4277 14.4724 18.3147 14.3614L17.8595 13.8992Z"/>
+<path class="sun" d="M8.19579 5.95114C8.30081 6.05591 8.4431 6.11475 8.59144 6.11475C8.73979 6.11475 8.88208 6.05591 8.9871 5.95114C9.09667 5.83611 9.15698 5.68283 9.15516 5.52398C9.15996 5.43957 9.14754 5.35506 9.11864 5.27561C9.08975 5.19615 9.04499 5.12341 8.9871 5.0618L8.54593 4.59962C8.43348 4.49011 8.28272 4.42883 8.12576 4.42883C7.9688 4.42883 7.81805 4.49011 7.7056 4.59962C7.64829 4.65323 7.60303 4.71842 7.57285 4.79086C7.54267 4.8633 7.52824 4.94134 7.53053 5.01978C7.52713 5.10044 7.541 5.1809 7.57119 5.25577C7.60138 5.33064 7.6472 5.39821 7.7056 5.45395L8.19579 5.95114Z"/>
+<path class="sun" d="M20.3246 9.45247C20.267 9.39705 20.1989 9.35364 20.1244 9.32479C20.0499 9.29593 19.9703 9.28221 19.8904 9.28441H18.4899C18.4125 9.28267 18.3357 9.29738 18.2645 9.32756C18.1933 9.35774 18.1293 9.4027 18.0767 9.45948C17.9721 9.57709 17.9148 9.72925 17.9157 9.88664C17.9157 10.0389 17.9762 10.185 18.0838 10.2927C18.1915 10.4004 18.3376 10.4609 18.4899 10.4609H19.8904C20.0529 10.4668 20.2112 10.409 20.3316 10.2998C20.3868 10.2464 20.4302 10.182 20.4591 10.1109C20.4881 10.0398 20.5019 9.9634 20.4997 9.88664C20.5031 9.80598 20.4892 9.72553 20.459 9.65065C20.4288 9.57578 20.383 9.50822 20.3246 9.45247V9.45247Z"/>
+<path class="cloud" d="M14.9986 11.0618C14.8494 10.9129 14.6877 10.7771 14.5155 10.6557L14.3474 10.5577C14.2494 10.4946 14.1444 10.4456 14.0464 10.3896L13.7103 10.2636L13.5073 10.2076C13.3879 10.1699 13.2663 10.1395 13.1432 10.1166C12.9533 10.086 12.7614 10.0697 12.5691 10.0676H12.31C12.2703 9.89847 12.2188 9.73236 12.156 9.57045C12.1031 9.42381 12.04 9.28109 11.9669 9.14336V9.14336C11.8899 8.99555 11.8034 8.85289 11.7079 8.71627V8.71627C11.2309 8.01961 10.5551 7.48284 9.7685 7.17596V7.17596C9.28282 6.99426 8.7677 6.90406 8.24919 6.9099C7.30204 6.89539 6.37915 7.20962 5.63765 7.79909C4.89263 8.38514 4.37919 9.21607 4.18836 10.1446C3.42316 10.3123 2.73862 10.7373 2.24896 11.3488C1.75682 11.9563 1.49189 12.7164 1.49981 13.4983C1.49763 13.9458 1.5858 14.3892 1.75904 14.8018C1.93228 15.2144 2.18702 15.5879 2.50801 15.8997C3.1298 16.5559 3.98502 16.9408 4.8885 16.971C4.90467 16.9733 4.92117 16.9719 4.93669 16.9667C4.9522 16.9615 4.9663 16.9528 4.97785 16.9413C4.98941 16.9297 4.99811 16.9156 5.00326 16.9001C5.00841 16.8846 5.00987 16.8681 5.00752 16.8519V15.9137C5.00752 15.8297 4.96552 15.7877 4.8885 15.7877C4.60131 15.7785 4.31889 15.7118 4.05794 15.5915C3.79698 15.4713 3.56278 15.2999 3.36919 15.0876C2.96136 14.6655 2.73731 14.0991 2.74606 13.5123C2.73738 12.9487 2.9483 12.4038 3.33418 11.9929C3.71566 11.5723 4.23948 11.3079 4.80448 11.2508H5.15455C5.24557 11.2508 5.29458 11.2088 5.29458 11.1248L5.30859 10.7117C5.37014 9.97875 5.71407 9.29842 6.26778 8.81429C6.81073 8.3139 7.5249 8.04077 8.26319 8.05114C9.00364 8.0404 9.72012 8.31346 10.2656 8.81429C10.8223 9.29609 11.1669 9.97773 11.2248 10.7117L11.2738 11.1108C11.2715 11.1279 11.2732 11.1453 11.2787 11.1616C11.2842 11.1779 11.2934 11.1928 11.3056 11.205C11.3178 11.2172 11.3327 11.2264 11.349 11.2319C11.3653 11.2374 11.3827 11.2391 11.3998 11.2368H12.5691C13.0115 11.2358 13.4444 11.365 13.8139 11.6083C14.1834 11.8516 14.4732 12.1982 14.6471 12.605C14.821 13.0118 14.8714 13.4608 14.7919 13.896C14.7125 14.3312 14.5068 14.7334 14.2004 15.0526C13.8022 15.4676 13.2623 15.7176 12.6881 15.7527C12.6111 15.7527 12.5691 15.7947 12.5691 15.8787V16.8169C12.5667 16.8331 12.5682 16.8496 12.5733 16.8651C12.5785 16.8806 12.5872 16.8947 12.5987 16.9063C12.6103 16.9178 12.6244 16.9265 12.6399 16.9317C12.6554 16.9368 12.6719 16.9383 12.6881 16.936C13.2841 16.927 13.8659 16.7525 14.3684 16.4319C14.8703 16.123 15.283 15.6886 15.5657 15.1716C15.857 14.6498 16.0067 14.0608 15.9998 13.4632C15.998 13.0808 15.9293 12.7017 15.7967 12.343C15.6322 11.8605 15.3591 11.4222 14.9986 11.0618V11.0618Z"/>
+<path class="snow" d="M5.86624 16.1302C5.83641 16.2023 5.82147 16.2797 5.82231 16.3577C5.81992 16.438 5.83409 16.518 5.86395 16.5927C5.89381 16.6674 5.93872 16.7351 5.99589 16.7916C6.05015 16.8502 6.11625 16.8967 6.18981 16.9278C6.26337 16.959 6.34272 16.9742 6.42259 16.9724C6.50259 16.9752 6.58222 16.9604 6.65592 16.9292C6.72963 16.8979 6.79562 16.851 6.84929 16.7916C6.93415 16.7076 6.99205 16.6003 7.01559 16.4832C7.03913 16.3662 7.02724 16.2448 6.98143 16.1346C6.93563 16.0243 6.85799 15.9302 6.75844 15.8643C6.6589 15.7985 6.54196 15.7637 6.42259 15.7646C6.34331 15.7624 6.26443 15.7766 6.19097 15.8065C6.11751 15.8364 6.05107 15.8812 5.99589 15.9382C5.94017 15.9928 5.89607 16.0581 5.86624 16.1302Z"/>
+<path class="snow" d="M5.86121 18.7515C5.83256 18.8252 5.81932 18.9039 5.82231 18.983V18.9974C5.82257 19.149 5.8823 19.2944 5.98865 19.4024C6.10374 19.5114 6.25687 19.5711 6.41535 19.5688C6.49416 19.5724 6.57285 19.5595 6.64635 19.5309C6.71984 19.5022 6.78651 19.4585 6.84205 19.4024C6.95253 19.2879 7.01427 19.1349 7.01427 18.9757C7.01427 18.8166 6.95253 18.6636 6.84205 18.549C6.72697 18.44 6.57384 18.3804 6.41535 18.3827C6.33631 18.3807 6.25768 18.3949 6.18433 18.4244C6.11098 18.4539 6.04446 18.4982 5.98889 18.5544C5.93331 18.6107 5.88986 18.6778 5.86121 18.7515Z"/>
+<path class="snow" d="M8.31019 17.3557C8.19329 17.4756 8.12833 17.6367 8.12939 17.8041C8.12786 17.966 8.19023 18.1219 8.30296 18.238C8.35583 18.2965 8.42065 18.3429 8.49302 18.3741C8.5654 18.4053 8.64364 18.4206 8.72243 18.4189C8.80377 18.4198 8.88448 18.4046 8.9599 18.3742C9.03532 18.3437 9.10395 18.2986 9.1618 18.2414C9.21965 18.1842 9.26558 18.1161 9.29692 18.041C9.32827 17.966 9.34441 17.8855 9.3444 17.8041C9.33898 17.6409 9.27172 17.4858 9.15623 17.3703C9.04074 17.2548 8.88567 17.1876 8.72243 17.1821C8.64551 17.1814 8.56927 17.1965 8.49837 17.2263C8.42748 17.2562 8.36344 17.3002 8.31019 17.3557Z"/>
+<path class="snow" d="M8.12939 15.1709C8.13035 15.0952 8.14581 15.0204 8.17496 14.9504C8.20605 14.8758 8.25207 14.8083 8.31019 14.7521C8.42094 14.6446 8.5681 14.5826 8.72243 14.5786C8.80447 14.5765 8.88604 14.5915 8.96198 14.6227C9.03792 14.6538 9.10657 14.7003 9.1636 14.7594C9.22242 14.815 9.26891 14.8824 9.30005 14.9571C9.3312 15.0319 9.34631 15.1123 9.3444 15.1933C9.3462 15.2732 9.33101 15.3525 9.29984 15.4261C9.26867 15.4996 9.22223 15.5657 9.1636 15.62C9.10521 15.6767 9.03615 15.7212 8.96042 15.751C8.88469 15.7808 8.80379 15.7953 8.72243 15.7936C8.6443 15.7953 8.56667 15.7807 8.49447 15.7508C8.42226 15.721 8.35704 15.6764 8.30296 15.62C8.24264 15.5582 8.19601 15.4844 8.1661 15.4034C8.1362 15.3224 8.12369 15.236 8.12939 15.1499V15.1709Z"/>
+<path class="snow" d="M8.12939 20.4397C8.13011 20.3617 8.14567 20.2845 8.17528 20.2123C8.20633 20.1365 8.2522 20.0677 8.31019 20.0099C8.36344 19.9544 8.42748 19.9104 8.49837 19.8805C8.56927 19.8507 8.64551 19.8357 8.72243 19.8364C8.80377 19.8354 8.88448 19.8506 8.9599 19.8811C9.03532 19.9115 9.10395 19.9567 9.1618 20.0138C9.21965 20.071 9.26558 20.1391 9.29692 20.2142C9.32827 20.2892 9.34441 20.3698 9.3444 20.4511C9.3462 20.531 9.33101 20.6103 9.29984 20.6839C9.26867 20.7574 9.22223 20.8235 9.1636 20.8778C9.10521 20.9345 9.03615 20.979 8.96042 21.0088C8.88469 21.0386 8.80379 21.0531 8.72243 21.0514C8.6443 21.0531 8.56667 21.0385 8.49447 21.0086C8.42226 20.9788 8.35704 20.9342 8.30296 20.8778C8.24244 20.8177 8.1956 20.7452 8.16565 20.6653C8.13569 20.5854 8.12333 20.5 8.12939 20.4149V20.4397Z"/>
+<path class="snow" d="M10.5048 16.1291C10.4737 16.2013 10.4578 16.2791 10.4582 16.3577C10.4581 16.4373 10.4741 16.5161 10.5052 16.5894C10.5362 16.6627 10.5817 16.729 10.639 16.7844C10.6943 16.8436 10.7617 16.8903 10.8365 16.9215C10.9113 16.9526 10.9919 16.9675 11.0729 16.9652C11.1529 16.9679 11.2325 16.9532 11.3062 16.9219C11.3799 16.8907 11.4459 16.8438 11.4996 16.7844C11.5845 16.7004 11.6424 16.5931 11.6659 16.476C11.6894 16.359 11.6775 16.2376 11.6317 16.1273C11.5859 16.0171 11.5083 15.923 11.4088 15.8571C11.3092 15.7912 11.1923 15.7565 11.0729 15.7574C10.9921 15.7564 10.9119 15.7719 10.8373 15.803C10.7626 15.8341 10.6952 15.8801 10.639 15.9382C10.5816 15.9919 10.5359 16.0569 10.5048 16.1291Z"/>
+<path class="snow" d="M10.5031 18.7487C10.4724 18.8229 10.4571 18.9026 10.4582 18.983V18.9974C10.4595 19.0726 10.4762 19.1466 10.5073 19.2151C10.5384 19.2835 10.5832 19.3448 10.639 19.3952C10.6955 19.4524 10.7632 19.4973 10.8379 19.5271C10.9125 19.557 10.9925 19.5712 11.0729 19.5688C11.1517 19.5724 11.2304 19.5595 11.3039 19.5309C11.3774 19.5022 11.4441 19.4585 11.4996 19.4024C11.5542 19.3459 11.5971 19.279 11.6256 19.2058C11.6542 19.1325 11.6679 19.0543 11.6659 18.9757C11.67 18.8969 11.6573 18.8181 11.6287 18.7445C11.6 18.6709 11.556 18.6043 11.4996 18.549C11.4431 18.4944 11.3762 18.4516 11.303 18.423C11.2297 18.3945 11.1515 18.3807 11.0729 18.3827C10.9926 18.3797 10.9125 18.3931 10.8376 18.4221C10.7626 18.451 10.6943 18.4949 10.6368 18.551C10.5793 18.6072 10.5339 18.6744 10.5031 18.7487Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/partly-sunny.svg b/browser/themes/shared/weather/partly-sunny.svg
new file mode 100644
index 0000000000..12a253b11c
--- /dev/null
+++ b/browser/themes/shared/weather/partly-sunny.svg
@@ -0,0 +1,31 @@
+<!-- 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="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .sun-1, .sun-2, .sun-3, .sun-4, .sun-5, .sun-6 {
+    fill: context-fill #E27F2E;
+  }
+
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .sun-1, .sun-2, .sun-3, .sun-4, .sun-5, .sun-6 {
+      fill: context-fill #FFFF98;
+    }
+
+    .cloud {
+      fill: context-fill #BFBFC9;
+    }
+  }
+</style>
+<path class="sun-1" d="M16.5349 7.52486C16.6804 7.5158 16.8189 7.45946 16.9294 7.36441L17.8854 6.40834C17.9913 6.29125 18.0487 6.13828 18.0459 5.98045C18.0477 5.90677 18.0346 5.83349 18.0075 5.76497C17.9803 5.69646 17.9396 5.63413 17.8878 5.58171C17.836 5.52928 17.7742 5.48784 17.706 5.45986C17.6378 5.43187 17.5647 5.41793 17.491 5.41885C17.4186 5.41599 17.3464 5.42886 17.2795 5.45656C17.2125 5.48426 17.1524 5.52613 17.1032 5.5793L16.1204 6.53537C16.026 6.653 15.9742 6.79908 15.9733 6.94989C15.9655 7.10209 16.0184 7.25119 16.1204 7.36441C16.2362 7.4636 16.3825 7.52022 16.5349 7.52486V7.52486Z"/>
+<path class="sun-2" d="M10.8854 7.7589C11.2404 7.96163 11.5664 8.21125 11.8548 8.50102C12.2144 8.33632 12.6096 8.26463 13.0041 8.29253C13.3986 8.32043 13.7798 8.44704 14.1126 8.66071C14.4455 8.87438 14.7193 9.16827 14.9088 9.51537C15.0984 9.86247 15.1978 10.2516 15.1977 10.6472C15.1946 10.7861 15.1812 10.9247 15.1576 11.0617C15.3551 11.2291 15.5384 11.4124 15.7058 11.6099C15.8226 11.7589 15.9298 11.9153 16.0267 12.0779C16.2268 11.6273 16.3315 11.1402 16.3343 10.6472C16.3309 10.1878 16.2378 9.73359 16.0602 9.31C15.7927 8.67484 15.3434 8.1329 14.7689 7.75225C14.1943 7.37161 13.5201 7.16923 12.8309 7.17055C12.1371 7.15998 11.4571 7.3656 10.8854 7.7589V7.7589Z"/>
+<path class="sun-3" d="M12.8309 5.98717C12.9067 5.99016 12.9824 5.97811 13.0535 5.95172C13.1247 5.92533 13.1899 5.88511 13.2454 5.8334C13.2984 5.77876 13.3395 5.71369 13.366 5.64233C13.3924 5.57096 13.4038 5.49486 13.3992 5.41888V4.08173C13.4013 4.00844 13.3881 3.93552 13.3605 3.86761C13.3329 3.7997 13.2914 3.73828 13.2387 3.68727C13.1851 3.63478 13.1212 3.59401 13.051 3.56754C12.9808 3.54107 12.9058 3.52947 12.8309 3.53349C12.7583 3.5317 12.686 3.54437 12.6182 3.57076C12.5505 3.59716 12.4887 3.63677 12.4365 3.68727C12.3843 3.73836 12.3437 3.79995 12.3171 3.86796C12.2906 3.93596 12.2789 4.00883 12.2827 4.08173V5.41888C12.2797 5.4947 12.2917 5.57037 12.3181 5.64151C12.3445 5.71265 12.3847 5.77787 12.4365 5.8334C12.4875 5.88553 12.5491 5.9262 12.6171 5.95271C12.6852 5.97922 12.758 5.99097 12.8309 5.98717V5.98717Z"/>
+<path class="sun-4" d="M8.2245 6.83622C8.34093 6.94393 8.49378 7.00364 8.65239 7.00336C8.7225 7.0021 8.79154 6.98595 8.85494 6.95598C8.91834 6.92601 8.97464 6.88291 9.02011 6.82953C9.12574 6.71766 9.18334 6.56885 9.18057 6.41501C9.17905 6.33839 9.16021 6.26311 9.12548 6.1948C9.09074 6.12649 9.04101 6.06692 8.97999 6.02055L8.61228 5.56592C8.5017 5.4625 8.35585 5.40511 8.20445 5.40546C8.12759 5.40347 8.05114 5.41727 7.97984 5.44602C7.90854 5.47477 7.8439 5.51786 7.78993 5.57261C7.73521 5.62379 7.69201 5.68603 7.66319 5.75519C7.63437 5.82436 7.6206 5.89886 7.62278 5.97375C7.62105 6.1294 7.67839 6.27992 7.78324 6.39496L8.2245 6.83622Z"/>
+<path class="sun-5" d="M19.8176 10.2459C19.7682 10.1926 19.7082 10.1501 19.6414 10.1213C19.5746 10.0925 19.5025 10.078 19.4298 10.0788H18.0927C18.0146 10.075 17.9366 10.088 17.864 10.1168C17.7914 10.1456 17.7257 10.1896 17.6715 10.2459C17.6155 10.2965 17.5711 10.3585 17.5411 10.4277C17.5111 10.4968 17.4963 10.5717 17.4976 10.6471C17.4973 10.7203 17.5127 10.7928 17.5427 10.8597C17.5727 10.9266 17.6166 10.9863 17.6715 11.0348C17.7252 11.0875 17.789 11.1289 17.8591 11.1565C17.9292 11.184 18.004 11.1972 18.0793 11.1953H19.4165C19.5609 11.1971 19.7003 11.1419 19.8042 11.0415C19.8564 10.9904 19.897 10.9288 19.9235 10.8608C19.9501 10.7928 19.9618 10.7199 19.958 10.6471C19.9648 10.5002 19.9145 10.3564 19.8176 10.2459V10.2459Z"/>
+<path class="sun-6" d="M17.4575 14.4647C17.4083 14.4133 17.3491 14.3726 17.2835 14.345C17.218 14.3174 17.1475 14.3035 17.0764 14.3042C17.0021 14.302 16.9282 14.3151 16.8591 14.3427C16.7901 14.3703 16.7275 14.4118 16.6753 14.4647C16.6193 14.5152 16.5749 14.5772 16.5449 14.6464C16.5149 14.7156 16.5001 14.7904 16.5014 14.8658C16.5001 14.9436 16.5141 15.0208 16.5428 15.0931C16.5715 15.1654 16.6143 15.2313 16.6686 15.287L17.1032 15.7082C17.1524 15.7614 17.2125 15.8033 17.2794 15.831C17.3464 15.8587 17.4185 15.8715 17.4909 15.8687C17.5658 15.8709 17.6403 15.8571 17.7095 15.8283C17.7787 15.7994 17.8409 15.7562 17.8921 15.7015C17.945 15.6465 17.9864 15.5816 18.014 15.5104C18.0415 15.4392 18.0546 15.3633 18.0525 15.287C18.0533 15.2149 18.0395 15.1434 18.0119 15.0767C17.9843 15.0101 17.9436 14.9497 17.8921 14.8992L17.4575 14.4647Z"/>
+<path class="cloud" d="M14.8634 11.8707C14.7306 11.7432 14.5874 11.6269 14.4355 11.523C14.3171 11.4372 14.1919 11.3611 14.0611 11.2957L13.9942 11.2623C13.8585 11.1935 13.7177 11.1354 13.573 11.0885H13.4727C13.3431 11.048 13.2115 11.0145 13.0783 10.9882C12.8992 10.9588 12.7182 10.9431 12.5367 10.9414H12.3228C12.173 10.3488 11.888 9.79899 11.4901 9.33501C11.0922 8.87103 10.5923 8.5055 10.0296 8.26707V8.26707C9.52909 8.03545 8.98307 7.91894 8.43166 7.92609C7.5342 7.92154 6.66167 8.2211 5.95627 8.77595C5.25087 9.3308 4.7542 10.1082 4.54722 10.9815C3.81989 11.1404 3.17151 11.5498 2.71532 12.1381C2.24636 12.7188 1.99351 13.4443 1.99995 14.1907C1.99284 14.6277 2.07289 15.0617 2.23544 15.4674C2.39798 15.8732 2.63975 16.2424 2.94662 16.5537C3.25349 16.8649 3.6193 17.1118 4.02269 17.2801C4.42608 17.4483 4.85896 17.5345 5.29603 17.5335H12.5367C12.977 17.538 13.4137 17.4546 13.8213 17.2882C14.2288 17.1218 14.5991 16.8757 14.9105 16.5644C15.2218 16.2531 15.4678 15.8828 15.6342 15.4752C15.8007 15.0676 15.8841 14.6309 15.8796 14.1907C15.8653 13.3178 15.5102 12.4852 14.8901 11.8707H14.8634ZM14.0678 15.7484C13.8737 15.9592 13.638 16.1274 13.3756 16.2425C13.1133 16.3576 12.8299 16.417 12.5434 16.417H5.29603C5.0104 16.4177 4.7278 16.3586 4.46641 16.2434C4.20503 16.1283 3.97065 15.9597 3.77836 15.7484C3.57416 15.5455 3.41273 15.3037 3.30364 15.0372C3.19454 14.7708 3.13999 14.4852 3.14321 14.1973C3.13493 13.6592 3.33633 13.1389 3.70482 12.7465C4.0691 12.3448 4.5693 12.0923 5.10883 12.0378H5.44312C5.45971 12.0398 5.47653 12.0382 5.4924 12.0329C5.50826 12.0277 5.52278 12.019 5.5349 12.0075C5.54703 11.996 5.55648 11.982 5.56257 11.9664C5.56866 11.9509 5.57125 11.9342 5.57015 11.9175L5.637 11.5297C5.71767 10.8304 6.05329 10.1853 6.5797 9.71788C7.08696 9.23929 7.7611 8.97779 8.4584 8.98913C9.16844 8.98034 9.85494 9.24346 10.3772 9.72456C10.9088 10.1846 11.2379 10.8355 11.2932 11.5364L11.34 11.9242C11.3416 11.9409 11.3466 11.9571 11.3546 11.9719C11.3626 11.9867 11.3734 11.9997 11.3864 12.0103C11.3995 12.0209 11.4145 12.0288 11.4306 12.0335C11.4468 12.0382 11.4637 12.0397 11.4804 12.0378H12.5568C13.128 12.0447 13.674 12.2743 14.0785 12.6776C14.4831 13.0809 14.7143 13.6262 14.723 14.1973C14.7247 14.4868 14.6676 14.7736 14.5549 15.0403C14.4423 15.307 14.2765 15.5479 14.0678 15.7484Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/rain.svg b/browser/themes/shared/weather/rain.svg
new file mode 100644
index 0000000000..f581c0f5a3
--- /dev/null
+++ b/browser/themes/shared/weather/rain.svg
@@ -0,0 +1,26 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .rain {
+    fill: context-fill #054096;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .cloud {
+      fill: context-fill #BFBFC9;
+    }
+    .rain {
+      fill: context-fill #00B3F4;
+    }
+  }
+</style>
+<path class="cloud" d="M2.00104 12.1238C1.9927 11.1763 2.30608 10.2557 2.88666 9.52229C3.44737 8.78194 4.23805 8.26415 5.12529 8.05628C5.36668 6.92925 5.97801 5.92324 6.85552 5.20902C7.72347 4.50179 8.79657 4.11719 9.90187 4.11719C11.0072 4.11719 12.0803 4.50179 12.9482 5.20902C13.8109 5.89579 14.4188 6.86814 14.6702 7.96307H14.9327C15.6453 7.96091 16.3463 8.15075 16.9663 8.51388C17.5836 8.8742 18.0972 9.39754 18.4545 10.0303C18.8118 10.6631 19.0001 11.3827 18.9999 12.1153C19.0043 12.8379 18.8276 13.5494 18.4871 14.1805C18.1465 14.8116 17.6537 15.3409 17.0565 15.7168C16.4652 16.0975 15.785 16.3054 15.0885 16.3185C14.9819 16.3185 14.9245 16.2676 14.9245 16.1744V15.0473C14.9245 14.9457 14.9819 14.8948 15.0885 14.8948C15.426 14.8838 15.7581 14.8032 16.0651 14.6577C16.3721 14.5121 16.6478 14.3047 16.8761 14.0474C17.3572 13.5348 17.6225 12.8463 17.6141 12.1323C17.6133 11.7718 17.54 11.4154 17.3988 11.0857C17.2576 10.756 17.0517 10.4602 16.7941 10.2172C16.5508 9.95013 16.2573 9.73724 15.9316 9.59153C15.6058 9.44582 15.2548 9.37035 14.8999 9.36976H13.6042C13.5058 9.36976 13.4566 9.31891 13.4566 9.2257L13.391 8.73421C13.3122 7.84538 12.9037 7.0225 12.2512 6.43775C11.6089 5.84282 10.7767 5.51381 9.91417 5.51381C9.05163 5.51381 8.21943 5.84282 7.57713 6.43775C6.92817 7.02233 6.52762 7.84714 6.46192 8.73421L6.40451 9.18333C6.40585 9.20557 6.40246 9.22784 6.39457 9.24858C6.38668 9.26932 6.37449 9.28802 6.35886 9.30337C6.34322 9.31871 6.32453 9.33033 6.30408 9.33741C6.28363 9.34449 6.26194 9.34685 6.24051 9.34434H5.8059C5.14435 9.42029 4.53219 9.74261 4.08388 10.2511C3.62717 10.7424 3.37667 11.4002 3.38687 12.0814C3.37843 12.7955 3.64375 13.484 4.12488 13.9966C4.35315 14.2538 4.62889 14.4613 4.93589 14.6068C5.24288 14.7523 5.57492 14.833 5.91251 14.844C6.00271 14.844 6.05191 14.8948 6.05191 14.9965V16.1829C6.05466 16.2024 6.05295 16.2224 6.04692 16.2412C6.04089 16.26 6.0307 16.277 6.01716 16.291C6.00362 16.305 5.98711 16.3155 5.96895 16.3218C5.95078 16.328 5.93145 16.3298 5.91251 16.3269C5.38676 16.3117 4.8691 16.1894 4.38923 15.9669C3.90937 15.7444 3.47677 15.4261 3.11626 15.0304C2.7514 14.6479 2.46466 14.1934 2.27308 13.6941C2.0815 13.1948 1.98899 12.6608 2.00104 12.1238Z"/>
+<path class="rain" d="M6.39632 17.6234C6.38824 17.6796 6.38824 17.7367 6.39632 17.7929C6.38473 17.9467 6.41908 18.1005 6.49472 18.2335C6.59094 18.3745 6.73394 18.474 6.89653 18.5132H6.97853H7.06873C7.22536 18.5222 7.37984 18.4723 7.5035 18.3725C7.62716 18.2728 7.7116 18.1301 7.74114 17.9708L9.07776 13.1152C9.10643 13.0212 9.11541 12.9219 9.10409 12.8241C9.09278 12.7262 9.06145 12.6319 9.01216 12.5475C8.96609 12.464 8.9023 12.3925 8.82561 12.3381C8.74891 12.2838 8.6613 12.2482 8.56936 12.2339H8.37255C8.23748 12.2372 8.1063 12.2814 7.99535 12.361C7.8689 12.4504 7.7762 12.5821 7.73294 12.7339L6.39632 17.6234Z"/>
+<path class="rain" d="M10.5456 12.7424L8.54476 20.1741H8.53656C8.51111 20.2611 8.50307 20.3526 8.51294 20.4429C8.52281 20.5332 8.55037 20.6205 8.59396 20.6995C8.69245 20.8596 8.84405 20.9771 9.02036 21.03C9.08538 21.0577 9.15502 21.0721 9.22537 21.0723C9.37756 21.0725 9.5252 21.0187 9.64357 20.9198C9.76333 20.8325 9.84794 20.7029 9.88138 20.5554L11.874 13.1152C11.8999 13.0254 11.9081 12.9312 11.8983 12.8381C11.8884 12.7449 11.8606 12.6548 11.8166 12.5729C11.7758 12.4918 11.7189 12.4205 11.6497 12.3635C11.5805 12.3066 11.5004 12.2653 11.4148 12.2424C11.3412 12.2341 11.267 12.2341 11.1934 12.2424C11.0504 12.2441 10.911 12.2883 10.7916 12.3695C10.7278 12.4106 10.6729 12.465 10.6306 12.5292C10.5882 12.5934 10.5593 12.666 10.5456 12.7424Z"/>
+<path class="rain" d="M11.9314 17.6149C11.9246 17.6797 11.9246 17.7451 11.9314 17.8098H11.9232C11.9229 17.9567 11.9627 18.1006 12.038 18.2251C12.1285 18.359 12.2623 18.4551 12.4152 18.4962L12.612 18.5386C12.7628 18.5386 12.9096 18.4881 13.0302 18.3945C13.1514 18.299 13.2334 18.1599 13.2598 18.0047L14.5965 13.1491V13.0474C14.6035 12.9941 14.6062 12.9402 14.6047 12.8864C14.6032 12.7439 14.5603 12.6052 14.4817 12.4882C14.3913 12.3558 14.2571 12.2623 14.1044 12.2255H13.8912C13.7559 12.2271 13.6243 12.2715 13.514 12.3526C13.3946 12.4456 13.3082 12.5766 13.268 12.7254L11.9314 17.6149Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/showers.svg b/browser/themes/shared/weather/showers.svg
new file mode 100644
index 0000000000..829f65f819
--- /dev/null
+++ b/browser/themes/shared/weather/showers.svg
@@ -0,0 +1,29 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .rain {
+    fill: context-fill #054096;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .cloud {
+      fill: context-fill #BFBFC9;
+    }
+    .rain {
+      fill: context-fill #00B3F4;
+    }
+  }
+</style>
+<path class="cloud" d="M2.00089 11.8446C1.98978 12.3636 2.08263 12.8796 2.27397 13.3622C2.46532 13.8448 2.75128 14.2842 3.11504 14.6545C3.47423 15.0362 3.9051 15.3433 4.38302 15.5584C4.86095 15.7734 5.37656 15.8922 5.9004 15.908C5.91933 15.9107 5.93864 15.909 5.95679 15.903C5.97494 15.8969 5.99143 15.8868 6.00496 15.8732C6.01848 15.8597 6.02866 15.8432 6.03469 15.8251C6.04071 15.8069 6.04242 15.7876 6.03967 15.7687V14.6709C6.04242 14.652 6.04071 14.6327 6.03469 14.6145C6.02866 14.5964 6.01848 14.5799 6.00496 14.5664C5.99143 14.5529 5.97494 14.5427 5.95679 14.5366C5.93864 14.5306 5.91933 14.5289 5.9004 14.5317C5.56306 14.5215 5.23119 14.4437 4.92443 14.303C4.61767 14.1623 4.34226 13.9615 4.11449 13.7124C3.63382 13.2169 3.36876 12.5513 3.37719 11.861C3.37002 11.2045 3.61654 10.5706 4.06534 10.0915C4.50883 9.59863 5.11841 9.28654 5.77752 9.21489H6.21171C6.31821 9.21489 6.37556 9.16573 6.37556 9.05923L6.42471 8.62504C6.49673 7.76746 6.89916 6.97141 7.54705 6.40494C8.18873 5.82979 9.02013 5.51173 9.88184 5.51173C10.7436 5.51173 11.575 5.82979 12.2166 6.40494C12.8645 6.9734 13.2717 7.7672 13.3554 8.62504L13.4209 9.10019C13.4209 9.19031 13.47 9.23946 13.5684 9.23946H14.9119C15.2665 9.24004 15.6172 9.313 15.9426 9.45386C16.268 9.59473 16.5612 9.80054 16.8043 10.0587C17.0627 10.2946 17.269 10.5819 17.4101 10.9021C17.5512 11.2223 17.6238 11.5684 17.6235 11.9183C17.6319 12.6086 17.3669 13.2742 16.8862 13.7698C16.6582 14.0185 16.3827 14.219 16.076 14.3597C15.7693 14.5004 15.4376 14.5784 15.1003 14.589C14.9938 14.589 14.9365 14.6382 14.9365 14.7283V15.826C14.9365 15.9162 14.9938 15.9653 15.1003 15.9653C15.7962 15.9527 16.4757 15.7517 17.0664 15.3837C17.6603 15.02 18.1503 14.5091 18.489 13.9006C18.8277 13.2921 19.0037 12.6065 18.9998 11.9101C19.0067 11.198 18.8168 10.4977 18.4509 9.88665C18.0955 9.27706 17.5836 8.77359 16.9681 8.42843C16.3479 8.05027 15.6382 7.84387 14.9119 7.83039H14.6497C14.3876 6.77016 13.7799 5.8274 12.9225 5.15094C12.065 4.47449 11.0067 4.10286 9.91461 4.09473C8.80156 4.09444 7.72136 4.47193 6.85077 5.16543C5.98017 5.85893 5.37072 6.82738 5.12214 7.91232C4.23417 8.10944 3.44304 8.61078 2.88566 9.32958C2.30868 10.0403 1.99599 10.9292 2.00089 11.8446Z"/>
+<path class="rain" d="M13.8485 12.1765C13.7683 12.1538 13.6845 12.1472 13.6018 12.157C13.5191 12.1667 13.4391 12.1927 13.3664 12.2334C13.2937 12.2741 13.2298 12.3287 13.1782 12.3942C13.1266 12.4596 13.0885 12.5345 13.0659 12.6147L12.7764 13.4443C12.7764 13.5069 12.7764 13.5695 12.7764 13.6243C12.779 13.7581 12.8197 13.8884 12.8938 13.9999C12.9331 14.0628 12.9844 14.1172 13.0449 14.1602C13.1053 14.2032 13.1736 14.2338 13.2459 14.2503H13.4416C13.5894 14.2517 13.7331 14.2019 13.8485 14.1095C13.963 14.0169 14.0407 13.8864 14.0676 13.7417L14.2789 12.9591C14.322 12.7951 14.2984 12.6208 14.2133 12.4742C14.1283 12.3276 13.9887 12.2205 13.825 12.1765H13.8485Z"/>
+<path class="rain" d="M12.7763 15.9172C12.6965 15.8894 12.6114 15.8798 12.5274 15.8893C12.4434 15.8988 12.3627 15.927 12.2911 15.972C12.1357 16.0575 12.0204 16.201 11.9702 16.3711L11.7589 17.1537C11.7589 17.1537 11.7589 17.1928 11.7589 17.2163C11.7589 17.2398 11.7589 17.2632 11.7589 17.2789C11.7589 17.2945 11.7589 17.318 11.7589 17.3337C11.7668 17.4788 11.818 17.6182 11.9059 17.734C11.9938 17.8498 12.1143 17.9366 12.2519 17.9832H12.4476C12.5806 17.9827 12.7097 17.9387 12.8154 17.858C12.9427 17.7614 13.0314 17.6227 13.0658 17.4667L13.2928 16.6841C13.3169 16.5978 13.3231 16.5074 13.3109 16.4186C13.2988 16.3298 13.2687 16.2444 13.2223 16.1676C13.1717 16.0949 13.1053 16.0346 13.028 15.9913C12.9508 15.9479 12.8647 15.9226 12.7763 15.9172Z"/>
+<path class="rain" d="M10.5851 14.5791C10.497 14.5516 10.404 14.5429 10.3123 14.5537C10.2207 14.5645 10.1323 14.5945 10.0529 14.6417C9.97679 14.6849 9.91128 14.7445 9.86118 14.8163C9.81107 14.888 9.77766 14.9701 9.76337 15.0565L9.54425 15.839C9.53326 15.8853 9.53326 15.9336 9.54425 15.9799C9.54603 16.1223 9.58957 16.2611 9.66946 16.379C9.75521 16.5115 9.88577 16.6087 10.0373 16.6529C10.1201 16.6774 10.2071 16.6843 10.2928 16.673C10.3784 16.6618 10.4607 16.6328 10.5345 16.5878C10.6082 16.5429 10.6717 16.4829 10.7208 16.4119C10.77 16.3409 10.8037 16.2604 10.8199 16.1755L11.0077 15.393C11.0356 15.3096 11.0458 15.2213 11.0377 15.1337C11.0296 15.0461 11.0034 14.9612 10.9607 14.8843C10.8783 14.739 10.7442 14.63 10.5851 14.5791V14.5791Z"/>
+<path class="rain" d="M7.53301 15.8547C7.35673 15.8068 7.16873 15.8293 7.00868 15.9173C6.9329 15.961 6.86766 16.0207 6.81761 16.0924C6.76756 16.1641 6.73394 16.2459 6.71912 16.3321L6.5 17.1147C6.5 17.1538 6.5 17.2086 6.5 17.279C6.50187 17.4263 6.54527 17.5701 6.62521 17.6938C6.70571 17.8263 6.83044 17.9261 6.97738 17.9755C7.05568 18.0023 7.13881 18.0119 7.22116 18.0038C7.3035 17.9957 7.38316 17.9701 7.45475 17.9286C7.53958 17.8856 7.6142 17.825 7.6736 17.7507C7.733 17.6765 7.77579 17.5904 7.79909 17.4982L7.99474 16.6765C8.02258 16.5967 8.03212 16.5116 8.02264 16.4276C8.01315 16.3436 7.9849 16.2628 7.93996 16.1913C7.8976 16.1111 7.83985 16.0402 7.77002 15.9824C7.70019 15.9247 7.61965 15.8813 7.53301 15.8547V15.8547Z"/>
+<path class="rain" d="M9.55214 18.3355C9.46843 18.3072 9.3796 18.2975 9.29178 18.307C9.20396 18.3164 9.11923 18.3448 9.04345 18.3902C8.89049 18.4767 8.77796 18.6202 8.73042 18.7894L8.5113 19.5719C8.4869 19.6234 8.47357 19.6794 8.47217 19.7363C8.47821 19.8767 8.52438 20.0125 8.60521 20.1276C8.69695 20.2627 8.83233 20.3621 8.98867 20.4093H9.18432C9.28368 20.4124 9.38251 20.3937 9.47388 20.3545C9.55908 20.3092 9.63248 20.2445 9.6882 20.1657C9.74391 20.0868 9.7804 19.9961 9.79474 19.9006L10.006 19.118C10.0343 19.0343 10.044 18.9455 10.0345 18.8577C10.0251 18.7699 9.99665 18.6851 9.95125 18.6094C9.85734 18.4712 9.71485 18.3734 9.55214 18.3355V18.3355Z"/>
+<path class="rain" d="M8.86349 13.7417L9.05131 12.9591C9.07916 12.8793 9.08869 12.7943 9.07921 12.7103C9.06972 12.6263 9.04147 12.5455 8.99653 12.4739C8.9566 12.3875 8.89797 12.3112 8.82488 12.2502C8.75179 12.1893 8.66607 12.1454 8.57393 12.1217C8.48683 12.0963 8.39548 12.0887 8.30537 12.0995C8.21526 12.1102 8.12826 12.1391 8.0496 12.1843C7.97472 12.2271 7.91004 12.2857 7.86004 12.356C7.81004 12.4262 7.77592 12.5065 7.76004 12.5913L7.52527 13.3739C7.52527 13.4365 7.52527 13.4991 7.52527 13.5617C7.52562 13.7064 7.5755 13.8467 7.66661 13.9592C7.75773 14.0717 7.8846 14.1496 8.02612 14.1799C8.10459 14.2164 8.19005 14.2352 8.27655 14.2352C8.36305 14.2352 8.44852 14.2164 8.52698 14.1799C8.61217 14.1366 8.6866 14.0747 8.74482 13.9989C8.80304 13.9231 8.84358 13.8352 8.86349 13.7417V13.7417Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/snow.svg b/browser/themes/shared/weather/snow.svg
new file mode 100644
index 0000000000..3bfccfd250
--- /dev/null
+++ b/browser/themes/shared/weather/snow.svg
@@ -0,0 +1,33 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .snow {
+    stroke: context-stroke #80808F;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .cloud {
+      fill: context-fill #BFBFC9;
+    }
+    .snow {
+      stroke: context-stroke #FFFFFF;
+    }
+  }
+</style>
+<g clip-path="url(#clip0_1504_37131)">
+<path class="cloud" d="M2.00103 11.7762C1.97803 10.8052 2.30003 9.85619 2.90803 9.09919C3.49503 8.34519 4.32203 7.81319 5.25203 7.59419C5.50003 6.45619 6.13503 5.44119 7.04803 4.71919C7.95303 4.00519 9.07303 3.61719 10.226 3.61719C11.379 3.61719 12.498 4.00519 13.404 4.71919C14.304 5.41219 14.938 6.39419 15.2 7.49919H15.474C16.033 7.49319 16.587 7.59819 17.105 7.80819C17.623 8.01819 18.095 8.32819 18.492 8.72119C18.889 9.11419 19.205 9.58119 19.421 10.0972C19.637 10.6132 19.749 11.1662 19.75 11.7252C19.746 12.8182 19.319 13.8672 18.558 14.6522C17.797 15.4372 16.762 15.8962 15.67 15.9342C15.559 15.9342 15.499 15.8832 15.499 15.7882V14.6592C15.499 14.5562 15.559 14.5052 15.67 14.5052C16.022 14.4942 16.369 14.4132 16.689 14.2662C17.009 14.1192 17.297 13.9102 17.535 13.6502C17.907 13.2522 18.154 12.7532 18.246 12.2172C18.338 11.6802 18.272 11.1282 18.055 10.6282C17.838 10.1282 17.48 9.70319 17.024 9.40419C16.569 9.10519 16.036 8.94619 15.491 8.94619H14.08C13.977 8.94619 13.926 8.89519 13.926 8.80119L13.858 8.30519C13.765 7.40719 13.344 6.57419 12.674 5.96819C12.005 5.36219 11.135 5.02419 10.231 5.02119C9.31503 5.01619 8.43103 5.35619 7.75503 5.97519C7.07903 6.59119 6.66103 7.44219 6.58603 8.35419L6.53503 8.78219C6.53603 8.80419 6.53303 8.82719 6.52503 8.84819C6.51703 8.86919 6.50403 8.88819 6.48803 8.90319C6.47103 8.91919 6.45103 8.93019 6.43003 8.93819C6.40803 8.94519 6.38603 8.94719 6.36403 8.94519L5.91003 9.00419C5.22303 9.04419 4.57803 9.35119 4.11403 9.86019C3.76103 10.2522 3.52503 10.7362 3.43603 11.2562C3.34703 11.7762 3.40703 12.3112 3.60903 12.7982C3.81103 13.2852 4.14803 13.7052 4.58003 14.0092C5.01203 14.3132 5.52003 14.4882 6.04703 14.5142C6.14103 14.5142 6.19203 14.5652 6.19203 14.6682V15.8062C6.19503 15.8262 6.19303 15.8462 6.18703 15.8652C6.18103 15.8842 6.17003 15.9012 6.15603 15.9152C6.14203 15.9292 6.12503 15.9402 6.10603 15.9462C6.08703 15.9522 6.06703 15.9542 6.04703 15.9512C5.50503 15.9402 4.97103 15.8202 4.47603 15.6002C3.98103 15.3802 3.53503 15.0632 3.16403 14.6682C2.42703 13.8842 2.01103 12.8522 2.00103 11.7762Z"/>
+<path class="snow" d="M11 13.1172V18.6172" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path class="snow" d="M13.5 14.4242L8.5 17.3102" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path class="snow" d="M8.5 14.4242L13.5 17.3102" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1504_37131">
+<rect width="22" height="22" fill="white" transform="translate(0 0.617188)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/browser/themes/shared/weather/sunny.svg b/browser/themes/shared/weather/sunny.svg
new file mode 100644
index 0000000000..7a28d4aedd
--- /dev/null
+++ b/browser/themes/shared/weather/sunny.svg
@@ -0,0 +1,17 @@
+<!-- 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="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .sunny {
+    fill: context-fill #E27F2E;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .sunny {
+      fill: context-fill #FFFF98;
+    }
+  }
+</style>
+<path class="sunny" d="M1.7052 10.9873C1.70259 10.8895 1.72068 10.7922 1.75836 10.7014C1.79603 10.6106 1.85249 10.5283 1.92424 10.4596C2.06546 10.3277 2.25401 10.2544 2.44991 10.2553H4.20217C4.29762 10.2533 4.3924 10.2713 4.48007 10.308C4.56775 10.3447 4.64628 10.3993 4.71032 10.4681C4.83745 10.6129 4.90728 10.797 4.90728 10.9873C4.90728 11.1777 4.83745 11.3617 4.71032 11.5066C4.64703 11.5763 4.56864 11.6315 4.48079 11.6683C4.39293 11.7051 4.29778 11.7225 4.20217 11.7194H2.44991C2.35199 11.7206 2.25484 11.7023 2.16444 11.6657C2.07405 11.6291 1.9923 11.575 1.92424 11.5066C1.85316 11.4391 1.79706 11.3583 1.75938 11.269C1.72171 11.1797 1.70327 11.0838 1.7052 10.9873ZM4.21093 16.8861C4.21141 16.695 4.28298 16.5106 4.41244 16.3668L5.70034 15.1496C5.7673 15.0833 5.84801 15.0315 5.93713 14.9977C6.02625 14.964 6.12174 14.949 6.21726 14.9539C6.4121 14.9498 6.60083 15.0201 6.74294 15.1496C6.81148 15.2113 6.86568 15.2865 6.90194 15.3702C6.9382 15.4539 6.95568 15.5441 6.95321 15.6348C6.95596 15.8356 6.88091 16.0301 6.74294 16.1796L5.49884 17.3883C5.35178 17.5193 5.15953 17.5919 4.96002 17.5919C4.76051 17.5919 4.56825 17.5193 4.4212 17.3883C4.35304 17.3227 4.29926 17.2444 4.26312 17.1581C4.22698 17.0718 4.20923 16.9792 4.21093 16.8861ZM4.21093 5.10561C4.21141 4.91458 4.28298 4.73017 4.41244 4.58639C4.56761 4.45334 4.76625 4.37795 4.97316 4.37359C5.16639 4.37311 5.35205 4.44649 5.49007 4.57787L6.74294 5.82912C6.81238 5.89375 6.86701 5.97188 6.90324 6.05842C6.93947 6.14496 6.9565 6.23795 6.95321 6.33132C6.95561 6.42585 6.93822 6.51988 6.90208 6.60768C6.86595 6.69548 6.81183 6.77524 6.74301 6.8421C6.67418 6.90897 6.59209 6.96155 6.50171 6.99665C6.41134 7.03176 6.31456 7.04866 6.21726 7.04632C6.12115 7.04952 6.02544 7.03298 5.93636 6.99778C5.84729 6.96257 5.76686 6.9095 5.70034 6.84204L4.4212 5.62484C4.35212 5.5564 4.2979 5.47517 4.26178 5.38597C4.22566 5.29677 4.20836 5.20143 4.21093 5.10561ZM6.44505 10.9873C6.43734 10.209 6.64946 9.44357 7.05834 8.77424C7.45966 8.09906 8.03679 7.53836 8.73175 7.14846C9.33893 6.80474 10.0206 6.60413 10.7221 6.56273C11.4235 6.52134 12.1252 6.64033 12.7707 6.91013C13.321 7.14542 13.8182 7.48384 14.2338 7.90602C15.0838 8.73977 15.5622 9.8649 15.5655 11.0384C15.5722 11.8193 15.3602 12.5872 14.9522 13.26C14.5515 13.9305 13.9777 14.4879 13.2876 14.8773C12.5924 15.2672 11.8037 15.4725 11.0009 15.4725C10.1981 15.4725 9.40947 15.2672 8.71422 14.8773C8.02409 14.4879 7.45034 13.9305 7.04958 13.26C6.64558 12.5674 6.43703 11.7834 6.44505 10.9873ZM7.93447 10.9873C7.93332 11.3819 8.01217 11.7729 8.16653 12.1378C8.32089 12.5028 8.54774 12.8347 8.83411 13.1145C9.12048 13.3943 9.46078 13.6165 9.83557 13.7686C10.2104 13.9206 10.6123 13.9994 11.0184 14.0005C11.8403 13.9983 12.6278 13.6801 13.209 13.1155C13.7901 12.5509 14.1176 11.7858 14.1199 10.9873C14.1287 10.5974 14.0555 10.2099 13.9048 9.8484C13.7542 9.48691 13.5293 9.15907 13.2438 8.88489C12.9567 8.60681 12.6146 8.38804 12.2382 8.24176C11.8618 8.09548 11.4588 8.0247 11.0535 8.0337C10.6508 8.02454 10.2504 8.09531 9.87676 8.24167C9.50316 8.38802 9.16423 8.60689 8.88069 8.88489C8.58083 9.15189 8.34175 9.47686 8.1788 9.83893C8.01585 10.201 7.93263 10.5922 7.93447 10.9873ZM10.265 17.6096C10.2621 17.5142 10.2802 17.4194 10.3179 17.3313C10.3557 17.2433 10.4123 17.164 10.484 17.0989C10.6247 16.9662 10.8136 16.8928 11.0097 16.8946C11.1083 16.8921 11.2064 16.9089 11.2983 16.944C11.3901 16.9791 11.4737 17.0317 11.5441 17.0989C11.6134 17.1654 11.6678 17.2451 11.7039 17.333C11.7401 17.4208 11.7573 17.515 11.7544 17.6096V19.312C11.757 19.4098 11.7389 19.5071 11.7012 19.5979C11.6636 19.6887 11.6071 19.771 11.5354 19.8397C11.4673 19.9081 11.3855 19.9623 11.2951 19.9989C11.2047 20.0355 11.1076 20.0537 11.0097 20.0525C10.9116 20.0547 10.8141 20.037 10.7236 20.0003C10.633 19.9636 10.5514 19.9089 10.484 19.8397C10.4123 19.771 10.3558 19.6887 10.3181 19.5979C10.2804 19.5071 10.2624 19.4098 10.265 19.312V17.6096ZM10.265 4.41615V2.71377C10.2637 2.61863 10.2825 2.52425 10.3202 2.43643C10.3578 2.3486 10.4136 2.26918 10.484 2.20306C10.5495 2.12626 10.631 2.0638 10.7231 2.01978C10.8152 1.97577 10.9159 1.9512 11.0184 1.9477C11.1165 1.94545 11.214 1.96323 11.3045 1.99989C11.3951 2.03655 11.4767 2.09126 11.5441 2.1605C11.6145 2.22663 11.6703 2.30604 11.7079 2.39387C11.7456 2.48169 11.7644 2.57607 11.7631 2.67121V4.41615C11.7652 4.50888 11.7467 4.60096 11.7089 4.68614C11.6711 4.77132 11.6149 4.84761 11.5441 4.90984C11.4025 5.0402 11.2134 5.11062 11.0184 5.10561C10.8238 5.10879 10.6354 5.03863 10.4928 4.90984C10.4217 4.84736 10.3647 4.77121 10.3255 4.68623C10.2863 4.60125 10.2657 4.50928 10.265 4.41615ZM15.1012 15.6348C15.1012 15.4565 15.1741 15.2854 15.3039 15.1593C15.4337 15.0332 15.6098 14.9624 15.7933 14.9624C15.9882 14.9583 16.1769 15.0286 16.319 15.1582L17.5982 16.4179C17.7352 16.5577 17.8107 16.744 17.8084 16.9371C17.8101 17.0303 17.7924 17.1228 17.7562 17.2092C17.7201 17.2955 17.6663 17.3738 17.5982 17.4393C17.4545 17.5667 17.267 17.6374 17.0725 17.6374C16.878 17.6374 16.6905 17.5667 16.5468 17.4393L15.3027 16.2307C15.1599 16.0642 15.0879 15.8511 15.1012 15.6348ZM15.1012 6.33983C15.0968 6.24709 15.1124 6.15448 15.1471 6.06797C15.1818 5.98147 15.2348 5.903 15.3027 5.83763L16.5468 4.58639C16.6848 4.455 16.8705 4.38163 17.0637 4.3821C17.1619 4.37932 17.2595 4.39685 17.3501 4.43354C17.4408 4.47023 17.5223 4.52523 17.5894 4.5949C17.6598 4.66103 17.7156 4.74044 17.7532 4.82827C17.7909 4.91609 17.8097 5.01047 17.8084 5.10561C17.8122 5.20285 17.7955 5.29981 17.7593 5.39055C17.7232 5.48129 17.6683 5.56391 17.5982 5.63335L16.319 6.85055C16.1768 6.98095 15.9889 7.05397 15.7933 7.05483C15.7012 7.05712 15.6097 7.04005 15.525 7.0048C15.4404 6.96954 15.3645 6.91692 15.3027 6.85055C15.1693 6.71248 15.097 6.52913 15.1012 6.33983ZM17.0812 10.9873C17.0785 10.7916 17.1539 10.6025 17.2915 10.4596C17.356 10.3943 17.4336 10.3424 17.5195 10.3073C17.6054 10.2722 17.6977 10.2545 17.7909 10.2553H19.5432C19.692 10.2539 19.8379 10.2959 19.9619 10.3759C20.0859 10.4558 20.1825 10.57 20.2391 10.7038C20.2956 10.8375 20.3097 10.9847 20.2793 11.1263C20.249 11.2678 20.1757 11.3973 20.0688 11.498C20.0008 11.5664 19.919 11.6206 19.8286 11.6572C19.7382 11.6938 19.6411 11.7121 19.5432 11.7108H17.7909C17.6953 11.714 17.6001 11.6965 17.5123 11.6598C17.4244 11.623 17.346 11.5677 17.2827 11.498C17.1502 11.3595 17.078 11.1765 17.0812 10.9873Z"/>
+</svg>
diff --git a/browser/themes/shared/weather/thunderstorms.svg b/browser/themes/shared/weather/thunderstorms.svg
new file mode 100644
index 0000000000..d6e1ce099d
--- /dev/null
+++ b/browser/themes/shared/weather/thunderstorms.svg
@@ -0,0 +1,31 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .cloud {
+    fill: context-fill #5B5B66;
+  }
+  .thunder {
+    stroke: context-stroke #FF7139;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .cloud {
+      fill: context-fill #BFBFC9;
+    }
+    .thunder {
+      stroke: context-stroke #FFA437;
+    }
+  }
+</style>
+<g clip-path="url(#clip0_1504_37074)">
+<path class="cloud" d="M2.00103 11.7762C1.97803 10.8052 2.30003 9.85619 2.90803 9.09919C3.49503 8.34519 4.32203 7.81319 5.25203 7.59419C5.50003 6.45619 6.13503 5.44119 7.04803 4.71919C7.95303 4.00519 9.07303 3.61719 10.226 3.61719C11.379 3.61719 12.498 4.00519 13.404 4.71919C14.304 5.41219 14.938 6.39419 15.2 7.49919H15.474C16.033 7.49319 16.587 7.59819 17.105 7.80819C17.623 8.01819 18.095 8.32819 18.492 8.72119C18.889 9.11419 19.205 9.58119 19.421 10.0972C19.637 10.6132 19.749 11.1662 19.75 11.7252C19.746 12.8182 19.319 13.8672 18.558 14.6522C17.797 15.4372 16.762 15.8962 15.67 15.9342C15.559 15.9342 15.499 15.8832 15.499 15.7882V14.6592C15.499 14.5562 15.559 14.5052 15.67 14.5052C16.022 14.4942 16.369 14.4132 16.689 14.2662C17.009 14.1192 17.297 13.9102 17.535 13.6502C17.907 13.2522 18.154 12.7532 18.246 12.2172C18.338 11.6802 18.272 11.1282 18.055 10.6282C17.838 10.1282 17.48 9.70319 17.024 9.40419C16.569 9.10519 16.036 8.94619 15.491 8.94619H14.08C13.977 8.94619 13.926 8.89519 13.926 8.80119L13.858 8.30519C13.765 7.40719 13.344 6.57419 12.674 5.96819C12.005 5.36219 11.135 5.02419 10.231 5.02119C9.31503 5.01619 8.43103 5.35619 7.75503 5.97519C7.07903 6.59119 6.66103 7.44219 6.58603 8.35419L6.53503 8.78219C6.53603 8.80419 6.53303 8.82719 6.52503 8.84819C6.51703 8.86919 6.50403 8.88819 6.48803 8.90319C6.47103 8.91919 6.45103 8.93019 6.43003 8.93819C6.40803 8.94519 6.38603 8.94719 6.36403 8.94519L5.91003 9.00419C5.22303 9.04419 4.57803 9.35119 4.11403 9.86019C3.76103 10.2522 3.52503 10.7362 3.43603 11.2562C3.34703 11.7762 3.40703 12.3112 3.60903 12.7982C3.81103 13.2852 4.14803 13.7052 4.58003 14.0092C5.01203 14.3132 5.52003 14.4882 6.04703 14.5142C6.14103 14.5142 6.19203 14.5652 6.19203 14.6682V15.8062C6.19503 15.8262 6.19303 15.8462 6.18703 15.8652C6.18103 15.8842 6.17003 15.9012 6.15603 15.9152C6.14203 15.9292 6.12503 15.9402 6.10603 15.9462C6.08703 15.9522 6.06703 15.9542 6.04703 15.9512C5.50503 15.9402 4.97103 15.8202 4.47603 15.6002C3.98103 15.3802 3.53503 15.0632 3.16403 14.6682C2.42703 13.8842 2.01103 12.8522 2.00103 11.7762Z"/>
+<path class="thunder" d="M11.637 11.3672L9.32104 15.3802H12.679L10.37 19.3802" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1504_37074">
+<rect width="22" height="22" fill="white" transform="translate(0 0.617188)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/browser/themes/shared/weather/windy.svg b/browser/themes/shared/weather/windy.svg
new file mode 100644
index 0000000000..bc8dccad7c
--- /dev/null
+++ b/browser/themes/shared/weather/windy.svg
@@ -0,0 +1,25 @@
+<!-- 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="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .wind {
+    stroke: context-stroke #5B5B66;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .wind {
+      stroke: context-stroke #BFBFC9;
+    }
+  }
+</style>
+<g clip-path="url(#clip0_1504_37206)">
+<path class="wind" d="M14.232 6.59919C15.208 5.62319 16.791 5.62319 17.768 6.59919C18.744 7.57519 18.744 9.15819 17.768 10.1352C17.373 10.5302 16.879 10.7652 16.367 10.8402C16.245 10.8582 3 10.8672 3 10.8672" stroke-width="1.5" stroke-miterlimit="10"/>
+<path class="wind" d="M9.232 18.1352C10.208 19.1112 11.791 19.1112 12.768 18.1352C13.744 17.1592 13.744 15.5762 12.768 14.5992C12.373 14.2042 11.879 13.9692 11.367 13.8942C11.245 13.8762 3 13.8672 3 13.8672" stroke-width="1.5" stroke-miterlimit="10"/>
+</g>
+<defs>
+<clipPath id="clip0_1504_37206">
+<rect width="22" height="22" fill="white" transform="translate(0 0.617188)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/browser/themes/shared/webRTC-indicator.css b/browser/themes/shared/webRTC-indicator.css
new file mode 100644
index 0000000000..6e6b1166ee
--- /dev/null
+++ b/browser/themes/shared/webRTC-indicator.css
@@ -0,0 +1,346 @@
+/* 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/. */
+
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: 5px;
+  --indicator-height: 32px;
+  --indicator-background-color: rgb(249,249,250);
+  --indicator-color: rgb(12,12,13);
+  --indicator-border-color: hsla(0,0%,0%,.32);
+  --indicator-icon-fill-opacity: 0.8;
+  --indicator-item-separator: 1px solid hsla(210,4%,10%,.14);
+  --indicator-stop-button-background-color: rgb(0,96,223);
+  --indicator-stop-button-hover-background-color: rgb(0,62,170);
+  --indicator-stop-button-color: rgb(255,255,255);
+  --minimize-button-background-color: hsla(240,5%,5%,.1);
+  --minimize-button-hover-background-color: hsla(240,5%,5%,.15);
+  --minimize-button-active-background-color: hsla(240,5%,5%,.2);
+  --control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.4);
+  --control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6);
+  --control-icon-checked-background-color: hsla(10,100%,50%,.16);
+  --control-icon-checked-icon-fill: rgb(215,0,34);
+  --control-icon-checked-hover-background-color: hsla(10,100%,50%,.24);
+  --control-icon-checked-active-background-color: hsla(10,100%,50%,.32);
+  max-height: var(--indicator-height);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --indicator-background-color: hsl(240, 1%, 20%);
+    --indicator-color: rgb(249, 249, 250);
+    --indicator-border-color: hsl(240, 1%, 40%);
+    --indicator-item-separator: 1px solid rgb(249, 249, 250);
+    --minimize-button-background-color: rgba(249,249,250,0.1);
+    --minimize-button-hover-background-color: rgba(249,249,250,0.15);
+    --minimize-button-active-background-color: rgba(249,249,250,0.2);
+    --control-icon-unchecked-hover-background-color: rgba(249,249,250,0.15);
+    --control-icon-unchecked-active-background-color: rgba(249,249,250,0.2);
+    --control-icon-checked-background-color: hsla(343,100%,58%,.16);
+    --control-icon-checked-icon-fill: rgb(255,40,102);
+    --control-icon-checked-hover-background-color: hsla(343,100%,58%,.24);
+    --control-icon-checked-active-background-color: hsla(343,100%,58%,.32);
+  }
+}
+
+body {
+  display: inline-flex;
+  background-color: var(--indicator-background-color);
+  color: var(--indicator-color);
+  margin: 0;
+  user-select: none;
+  -moz-window-dragging: drag;
+  /**
+   * On macOS, for windows with small enough dimensions, we seem to get
+   * vertical scrollbars on the body, even when the contents initially
+   * fit the window. We sidestep this by making sure we never display
+   * scrollbars.
+   */
+  overflow: hidden;
+  cursor: move;
+  border: 1px solid;
+  border-color: var(--indicator-border-color);
+  /* max-height = indicator height minus top and bottom border */
+  max-height: calc(var(--indicator-height) - 2px);
+}
+
+button,
+input[type="checkbox"] {
+  appearance: none;
+  border-style: none;
+  margin: 0;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--indicator-icon-fill-opacity);
+  background-repeat: no-repeat;
+  -moz-window-dragging: no-drag;
+  color: inherit;
+}
+
+.row-item {
+  display: flex;
+  align-items: center;
+  min-width: 30px;
+  margin-block: 5px;
+  margin-inline: 0 5px;
+  box-sizing: border-box;
+  padding: 0 5px;
+}
+
+.separator {
+  border-inline-end: var(--indicator-item-separator);
+  min-width: 1px;
+  padding: 0;
+}
+
+/**
+ * For display sharing, if we happen to be sharing both
+ * a window and a screen, we want to show the UI for sharing
+ * the screen, since that's the more privacy-sensitive one.
+ */
+:root[sharingwindow]:not([sharingscreen]) > body > #display-share > #screen-share-info,
+:root[sharingwindow]:not([sharingbrowserwindow]) > body > #display-share > #browser-window-share-info,
+:root[sharingwindow][sharingbrowserwindow] > body > #display-share > #window-share-info,
+:root[sharingscreen] > body > #display-share > #window-share-info,
+:root[sharingscreen] > body > #display-share > #browser-window-share-info,
+
+/**
+ * If we're not sharing either the screen or the window, we can
+ * hide the entire display sharing section.
+ */
+:root:not([sharingscreen],[sharingwindow]) > body > #display-share,
+:root:not([sharingscreen],[sharingwindow]) > body > #display-share + .separator,
+:root:not([sharingvideo]) > body > #device-share > #camera-mute-toggle,
+:root:not([sharingaudio]) > body > #device-share > #microphone-mute-toggle,
+:root:not([sharingvideo],[sharingaudio]) > body > #device-share,
+:root:not([sharingvideo],[sharingaudio]) > body > #device-share + .separator {
+  display:none;
+}
+
+xul|menu {
+  overflow: hidden;
+  min-height: 0 !important;
+  height: 0 !important;
+  width: 0 !important;
+  appearance: none !important;
+  padding: 0 !important;
+}
+
+.control-icon {
+  background-position: center;
+  background-size: 16px;
+  background-color: transparent;
+  padding: 10px 16px;
+  border-radius: 5px;
+}
+
+.control-icon + .control-icon {
+  margin-inline-start: 6px;
+}
+
+.control-icon:hover {
+  background-color: var(--control-icon-unchecked-hover-background-color);
+}
+
+.control-icon:active {
+  background-color: var(--control-icon-unchecked-active-background-color);
+}
+
+.control-icon:checked {
+  background-color: var(--control-icon-checked-background-color);
+  -moz-context-properties: fill;
+  fill: var(--control-icon-checked-icon-fill);
+}
+
+.control-icon:checked:hover {
+  background-color: var(--control-icon-checked-hover-background-color);
+}
+
+.control-icon:checked:active {
+  background-color: var(--control-icon-checked-active-background-color);
+}
+
+#display-share-icon {
+  background-image: url("chrome://browser/skin/notification-icons/screen.svg");
+  width: 16px;
+  height: 16px;
+  margin-inline: 5px 10px;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--indicator-icon-fill-opacity);
+}
+
+#camera-mute-toggle {
+  background-image: url("chrome://browser/skin/notification-icons/camera.svg");
+}
+
+#camera-mute-toggle:checked {
+  background-image: url("chrome://browser/skin/notification-icons/camera-blocked.svg");
+}
+
+#microphone-mute-toggle {
+  background-image: url("chrome://browser/skin/notification-icons/microphone.svg");
+}
+
+#microphone-mute-toggle:checked {
+  background-image: url("chrome://browser/skin/notification-icons/microphone-blocked.svg");
+}
+
+.stop-button {
+  background-color: var(--indicator-stop-button-background-color);
+  color: var(--indicator-stop-button-color);
+  border-radius: 5px;
+  padding: 3px 5px;
+  margin-inline-start: 15px;
+}
+
+.stop-button:hover {
+  background-color:  var(--indicator-stop-button-hover-background-color);
+}
+
+#window-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#minimize {
+  padding: 10px;
+  min-width: unset;
+  background-image: url("chrome://browser/skin/notification-icons/minimize.svg");
+  background-color: var(--minimize-button-background-color);
+}
+
+#minimize:hover {
+  background-color: var(--minimize-button-hover-background-color);
+}
+
+#minimize:active {
+  background-color: var(--minimize-button-active-background-color);
+}
+
+#drag-indicator {
+  background-image: url("chrome://browser/skin/notification-icons/drag-indicator.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 5px;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.4;
+  margin: 5px;
+}
+
+#webRTC-sharingCamera-menu,
+#webRTC-sharingMicrophone-menu,
+#webRTC-sharingScreen-menu {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#webRTC-sharingCamera-menu {
+  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
+}
+
+#webRTC-sharingMicrophone-menu {
+  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
+}
+
+#webRTC-sharingScreen-menu {
+  list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
+}
+
+#webRTC-sharingCamera-menu > menupopup,
+#webRTC-sharingMicrophone-menu > menupopup,
+#webRTC-sharingScreen-menu > menupopup {
+  list-style-image: none; /* don't inherit into menu items */
+}
+
+@media (-moz-platform: macos) {
+  /**
+   * On macOS, the ordering of the drag indicator and window controls is reversed
+   * to be more native. We re-order all items including their separators so that
+   * the markup and separator hiding and showing logic in the shared CSS file
+   * doesn't need to be macOS-specific.
+   */
+  #window-controls {
+    order: 1;
+  }
+
+  #display-share + .separator {
+    order: 2;
+  }
+
+  #display-share {
+    order: 3;
+  }
+
+  #device-share + .separator {
+    order: 4;
+  }
+
+  #device-share {
+    order: 5;
+  }
+
+  #drag-indicator {
+    order: 6;
+  }
+
+  /**
+   * The minimize button on macOS should be circular, and the icon should be
+   * centered. The asset we have for the minimize icon puts it along the bottom,
+   * so we manually offset it here.
+   */
+  #minimize {
+    background-position: center -5px;
+    padding: 8px;
+    border: 1px solid transparent;
+    border-radius: 1000px;
+  }
+}
+
+@media (-moz-platform: windows) {
+  @media (-moz-windows-default-theme: 0) {
+    :root {
+      --indicator-background-color: -moz-Dialog;
+      --indicator-color: -moz-DialogText;
+      --indicator-border-color: InactiveBorder;
+      --indicator-item-separator: 1px solid ThreeDShadow;
+      --indicator-stop-button-background-color: hsla(0,0%,70%,.2);
+      --indicator-stop-button-hover-background-color: hsla(0,0%,70%,.4);
+      --indicator-stop-button-color: inherit;
+      --minimize-button-background-color: hsla(0,0%,70%,.2);
+      --minimize-button-hover-background-color: hsla(0,0%,70%,.4);
+      --minimize-button-active-background-color: hsla(0,0%,70%,.6);
+      --control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.2);
+      --control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6);
+      --control-icon-checked-background-color: SelectedItem;
+      --control-icon-checked-icon-fill: SelectedItemText;
+      --control-icon-checked-hover-background-color: hsla(0,0%,70%,.2);
+      --control-icon-checked-active-background-color: hsla(0,0%,70%,.6);
+    }
+
+    #minimize,
+    .stop-button {
+      border: 1px outset ThreeDLightShadow;
+    }
+  }
+
+  #webRTC-sharingCamera-menu {
+    list-style-image: url("chrome://browser/skin/notification-icons/camera.png");
+  }
+
+  #webRTC-sharingMicrophone-menu {
+    list-style-image: url("chrome://browser/skin/notification-icons/microphone.png");
+  }
+
+  #webRTC-sharingScreen-menu {
+    list-style-image: url("chrome://browser/skin/notification-icons/screen.png");
+  }
+}
diff --git a/browser/themes/shared/webRTC-legacy-indicator.css b/browser/themes/shared/webRTC-legacy-indicator.css
new file mode 100644
index 0000000000..5c6443fba1
--- /dev/null
+++ b/browser/themes/shared/webRTC-legacy-indicator.css
@@ -0,0 +1,121 @@
+/* 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/. */
+
+window {
+  border: 1px solid #ff9500;
+}
+
+#audioVideoButton,
+#screenShareButton,
+#firefoxButton {
+  height: 29px;
+  margin: 0;
+  appearance: none;
+  border-style: none;
+}
+
+#audioVideoButton,
+#screenShareButton {
+  -moz-context-properties: fill;
+  fill: white;
+}
+
+#firefoxButton {
+  background-image: url("chrome://branding/content/icon48.png");
+  background-repeat: no-repeat;
+  background-size: 22px;
+  background-position: center center;
+  min-width: 29px;
+  background-color: white;
+}
+
+#firefoxButton:hover {
+  background-color: #f2f2f2;
+}
+
+#screenShareButton {
+  background-image: url("chrome://browser/skin/notification-icons/screen.svg");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  min-width: 27px;
+  display: none;
+}
+
+window[sharingscreen] > #screenShareButton {
+  display: -moz-box;
+}
+
+#audioVideoButton {
+  display: none;
+  background-repeat: no-repeat;
+}
+
+/* When screen sharing, need to pull in the separator: */
+window[sharingscreen] > #audioVideoButton {
+  margin-right: -1px;
+}
+
+/* Single icon button: */
+window[sharingvideo] > #audioVideoButton,
+window[sharingaudio] > #audioVideoButton {
+  display: -moz-box;
+  background-position: center center;
+  background-size: 16px;
+  min-width: 26px;
+}
+
+window[sharingvideo] > #audioVideoButton {
+  background-image: url("chrome://browser/skin/notification-icons/camera.svg");
+}
+
+window[sharingaudio] > #audioVideoButton {
+  background-image: url("chrome://browser/skin/notification-icons/microphone.svg");
+}
+
+/* Multi-icon button: */
+window[sharingaudio][sharingvideo] > #audioVideoButton {
+  background-image: url("chrome://browser/skin/notification-icons/camera.svg"),
+                    url("chrome://browser/skin/notification-icons/microphone.svg");
+  background-position: 6px center, 26px center;
+  background-size: 16px, 16px;
+  min-width: 46px;
+}
+
+/* Hover styles */
+#audioVideoButton,
+#screenShareButton {
+  background-color: #ffaa33;
+}
+
+#audioVideoButton:hover,
+#screenShareButton:hover {
+  background-color: #ff9500;
+}
+
+/* Don't show the dropmarker for the type="menu" case */
+#audioVideoButton > .box-inherit > .button-menu-dropmarker,
+#screenShareButton > .box-inherit > .button-menu-dropmarker {
+  display: none;
+}
+
+/* Separator in case of screen sharing + video/audio sharing */
+#shareSeparator {
+  width: 1px;
+  margin: 4px -1px 4px 0;
+  background-color: #FFCA80;
+  /* Separator needs to show above either button when they're hovered: */
+  position: relative;
+  z-index: 1;
+  display: none;
+}
+
+window[sharingscreen][sharingvideo] > #shareSeparator,
+window[sharingscreen][sharingaudio] > #shareSeparator {
+  display: -moz-box;
+}
+
+:is(#audioVideoButton, #screenShareButton, #firefoxButton):-moz-focusring {
+  outline: none;
+}
diff --git a/browser/themes/shared/webRTC-menubar-indicator.css b/browser/themes/shared/webRTC-menubar-indicator.css
new file mode 100644
index 0000000000..0183efdef4
--- /dev/null
+++ b/browser/themes/shared/webRTC-menubar-indicator.css
@@ -0,0 +1,28 @@
+/* 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/. */
+
+#webRTC-sharingCamera-menu,
+#webRTC-sharingMicrophone-menu,
+#webRTC-sharingScreen-menu {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#webRTC-sharingCamera-menu {
+  list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
+}
+
+#webRTC-sharingMicrophone-menu {
+  list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
+}
+
+#webRTC-sharingScreen-menu {
+  list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
+}
+
+#webRTC-sharingCamera-menu > menupopup,
+#webRTC-sharingMicrophone-menu > menupopup,
+#webRTC-sharingScreen-menu > menupopup {
+  list-style-image: none; /* don't inherit into menu items */
+}
diff --git a/browser/themes/test/browser/browser.ini b/browser/themes/test/browser/browser.ini
new file mode 100644
index 0000000000..525f4f8f4b
--- /dev/null
+++ b/browser/themes/test/browser/browser.ini
@@ -0,0 +1,3 @@
+[DEFAULT]
+
+[browser_expireThemes.js]
diff --git a/browser/themes/test/browser/browser_expireThemes.js b/browser/themes/test/browser/browser_expireThemes.js
new file mode 100644
index 0000000000..64fef950ae
--- /dev/null
+++ b/browser/themes/test/browser/browser_expireThemes.js
@@ -0,0 +1,111 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const { sinon } = ChromeUtils.import("resource://testing-common/Sinon.jsm");
+
+const { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+const { AddonTestUtils } = ChromeUtils.import(
+  "resource://testing-common/AddonTestUtils.jsm"
+);
+
+ChromeUtils.defineESModuleGetters(this, {
+  BuiltInThemes: "resource:///modules/BuiltInThemes.sys.mjs",
+});
+
+XPCOMUtils.defineLazyModuleGetters(this, {
+  AddonManager: "resource://gre/modules/AddonManager.jsm",
+});
+
+const kLushSoftID = "lush-soft-colorway@mozilla.org";
+const kLushBoldID = "lush-bold-colorway@mozilla.org";
+const kRetainedThemesPref = "browser.theme.retainedExpiredThemes";
+
+add_task(async function retainExpiredActiveTheme() {
+  let today = new Date().toISOString().split("T")[0];
+  let tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  tomorrow = tomorrow.toISOString().split("T")[0];
+  let config = new Map([
+    [
+      kLushSoftID,
+      {
+        version: "1.1",
+        path: "resource://builtin-themes/colorways/2021lush/soft/",
+        expiry: tomorrow,
+      },
+    ],
+    [
+      kLushBoldID,
+      {
+        version: "1.1",
+        path: "resource://builtin-themes/colorways/2021lush/bold/",
+        expiry: tomorrow,
+      },
+    ],
+  ]);
+  const oldBuiltInThemeMap = BuiltInThemes.builtInThemeMap;
+  BuiltInThemes.builtInThemeMap = config;
+  Assert.equal(
+    Services.prefs.getStringPref(kRetainedThemesPref, "[]"),
+    "[]",
+    "There are no retained themes."
+  );
+
+  AddonTestUtils.initMochitest(this);
+  registerCleanupFunction(async function() {
+    Services.prefs.clearUserPref(kRetainedThemesPref);
+    BuiltInThemes.builtInThemeMap = oldBuiltInThemeMap;
+    await BuiltInThemes.ensureBuiltInThemes();
+  });
+
+  // Install our test themes and enable Lush (Soft).
+  await BuiltInThemes.ensureBuiltInThemes();
+  let lushSoft = await AddonManager.getAddonByID(kLushSoftID);
+  let lushBold = await AddonManager.getAddonByID(kLushBoldID);
+  await lushSoft.enable();
+  Assert.ok(
+    lushSoft && lushSoft.isActive,
+    "Sanity check: Lush Soft is the active theme."
+  );
+  Assert.ok(
+    lushBold && !lushBold.isActive,
+    "Lush Bold is installed but inactive."
+  );
+
+  // Now, change the expiry dates on the themes to simulate the expiry date
+  // passing.
+  BuiltInThemes.builtInThemeMap.forEach(
+    themeInfo => (themeInfo.expiry = today)
+  );
+  // Normally, ensureBuiltInThemes uninstalls expired themes. We
+  // expect it will not uninstall Lush (Soft) since it is the active theme.
+  await BuiltInThemes.ensureBuiltInThemes();
+  lushSoft = await AddonManager.getAddonByID(kLushSoftID);
+  lushBold = await AddonManager.getAddonByID(kLushBoldID);
+  Assert.ok(
+    lushSoft && lushSoft.isActive,
+    "Lush Soft is still the active theme."
+  );
+  Assert.ok(!lushBold, "Lush Bold has been uninstalled.");
+  Assert.equal(
+    Services.prefs.getStringPref(kRetainedThemesPref, "[]"),
+    JSON.stringify([kLushSoftID]),
+    "Lush Soft is set as a retained theme."
+  );
+
+  // Disable Lush (Soft) and re-run ensureBuiltInThemes. We're checking that
+  // Lush Soft is not uninstalled despite being inactive and expired, since it
+  // is a retained theme.
+  await lushSoft.disable();
+  await BuiltInThemes.ensureBuiltInThemes();
+  lushSoft = await AddonManager.getAddonByID(kLushSoftID);
+  Assert.ok(
+    lushSoft && !lushSoft.isActive,
+    "Lush Soft is installed but inactive."
+  );
+
+  await lushSoft.uninstall();
+});
diff --git a/browser/themes/test/xpcshell/test_BuiltInThemeConfig.js b/browser/themes/test/xpcshell/test_BuiltInThemeConfig.js
new file mode 100644
index 0000000000..b6596014c9
--- /dev/null
+++ b/browser/themes/test/xpcshell/test_BuiltInThemeConfig.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { _applyColorwayConfig, BuiltInThemeConfig } = ChromeUtils.importESModule(
+  "resource:///modules/BuiltInThemeConfig.sys.mjs"
+);
+
+add_task(async function test_importConfig() {
+  Assert.ok(
+    BuiltInThemeConfig,
+    "Was able to import BuiltInThemeConfig and it is not empty."
+  );
+});
+
+add_task(function test_recoverEmptyHomepage() {
+  for (let [id, config] of BuiltInThemeConfig.entries()) {
+    if (id.endsWith("-colorway@mozilla.org")) {
+      Assert.ok(config.collection, "Colorway theme has collection property.");
+      Assert.ok(config.expiry, "Colorway theme has expiry date.");
+    }
+  }
+});
+
+add_task(function test_findActiveColorwayCollection() {
+  // get valid collection name from config
+  const id = BuiltInThemeConfig.entries().next().value[1].collection;
+  let collectionsList = [
+    new Date("2012-01-01"),
+    new Date("2012-02-01"),
+    new Date("2012-03-01"),
+    new Date("2012-04-01"),
+    new Date("2012-04-02"),
+  ].map((expiry, i) => ({ id, expiry, test_id: i + 1 }));
+  // set all other collection names as expired
+  for (const [, { collection }] of BuiltInThemeConfig.entries()) {
+    if (collection != id) {
+      collectionsList.push({ id: collection, expiry: new Date(0) });
+    }
+  }
+  _applyColorwayConfig(collectionsList);
+  Assert.ok(
+    BuiltInThemeConfig.findActiveColorwayCollection(new Date("2010-01-01")),
+    "Found active collection"
+  );
+  Assert.equal(
+    BuiltInThemeConfig.findActiveColorwayCollection(new Date("2015-01-01")),
+    null,
+    "Found no active collection"
+  );
+  Assert.equal(
+    BuiltInThemeConfig.findActiveColorwayCollection(new Date("2011-12-31"))
+      .test_id,
+    1,
+    "First collection is active"
+  );
+  Assert.equal(
+    BuiltInThemeConfig.findActiveColorwayCollection(new Date("2012-02-03"))
+      .test_id,
+    3,
+    "Middle collection is active"
+  );
+  Assert.equal(
+    BuiltInThemeConfig.findActiveColorwayCollection(new Date("2012-04-02"))
+      .test_id,
+    5,
+    "Last collection is active"
+  );
+  Assert.equal(
+    BuiltInThemeConfig.findActiveColorwayCollection(new Date("2012-01-02"))
+      .test_id,
+    2,
+    "Second collection is active"
+  );
+});
diff --git a/browser/themes/test/xpcshell/xpcshell.ini b/browser/themes/test/xpcshell/xpcshell.ini
new file mode 100644
index 0000000000..59e0276fbd
--- /dev/null
+++ b/browser/themes/test/xpcshell/xpcshell.ini
@@ -0,0 +1,4 @@
+[DEFAULT]
+firefox-appdir = browser
+
+[test_BuiltInThemeConfig.js]
diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css
new file mode 100644
index 0000000000..e5ace71f65
--- /dev/null
+++ b/browser/themes/windows/browser-aero.css
@@ -0,0 +1,341 @@
+/* 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/. */
+
+:root {
+  --glass-active-border-color: rgb(37, 44, 51);
+  --glass-inactive-border-color: rgb(102, 102, 102);
+  --glass-shadow-color: hsla(240,5%,5%,0.3);
+}
+
+@media (-moz-platform: windows-win7),
+       (-moz-platform: windows-win8) {
+  @media (-moz-windows-classic: 0) {
+    :root[sizemode="normal"] #toolbar-menubar:not([autohide="true"]) > #menubar-items,
+    :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
+      margin-top: 1px;
+    }
+    /**
+     * Except for Windows 8, Windows 7 Aero and Windows 7 Aero Basic, the
+     * -moz-window-button-box appearance on the .titlebar-buttonbox adds an
+     * unwanted margin at the top of the button box.
+     *
+     * For Windows 8 and Windows Aero (which both use the compositor):
+     *   We want the -moz-window-button-box applied in the restored case,
+     *   and -moz-window-button-box-maximized in the maximized case.
+     *
+     * For Windows Aero Basic:
+     *   The margin is also unwanted in the maximized case, but we want
+     *   it in the restored window case.
+     */
+    :root[sizemode="normal"] .titlebar-buttonbox {
+      appearance: auto;
+      -moz-default-appearance: -moz-window-button-box;
+    }
+
+    @media (-moz-windows-compositor) {
+      :root[sizemode="maximized"] .titlebar-buttonbox {
+        appearance: auto;
+        -moz-default-appearance: -moz-window-button-box-maximized;
+      }
+    }
+  }
+}
+
+@media (-moz-windows-compositor) {
+  @media not (-moz-platform: windows-win7) {
+    @media not (-moz-platform: windows-win8) {
+      @media (-moz-windows-default-theme) {
+        @media (-moz-windows-accent-color-in-titlebar) {
+          :root[sizemode=normal][tabsintitlebar] #navigator-toolbox {
+            border-top: .5px solid AccentColor;
+          }
+        }
+
+        :root[sizemode=normal][tabsintitlebar]:-moz-window-inactive #navigator-toolbox {
+          border-top-color: rgb(57,57,57);
+        }
+
+        :root[tabsintitlebar] .tab-label:-moz-window-inactive {
+          /* Calculated to match the opacity change of Windows Explorer
+             titlebar text change for inactive windows. */
+          opacity: .6;
+        }
+
+        :root[tabsintitlebar] .tab-secondary-label:-moz-window-inactive {
+          opacity: .6;
+        }
+      }
+
+      /* See bug 1715990 about why we do this ourselves on HCM */
+      @media (prefers-contrast) {
+        :root[tabsintitlebar]:not(:-moz-lwtheme) {
+          background-color: ActiveCaption;
+          color: CaptionText;
+        }
+
+        :root[tabsintitlebar]:not(:-moz-lwtheme):-moz-window-inactive {
+          background-color: InactiveCaption;
+          color: InactiveCaptionText;
+        }
+      }
+
+      .titlebar-buttonbox,
+      .titlebar-button {
+        appearance: none !important;
+      }
+
+      .titlebar-button {
+        border: none;
+        margin: 0 !important;
+        padding: 8px 17px;
+        -moz-context-properties: stroke;
+        stroke: currentColor;
+      }
+
+      .titlebar-button > .toolbarbutton-icon {
+        width: 12px;
+        height: 12px;
+      }
+
+      .titlebar-min {
+        list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
+      }
+
+      .titlebar-max {
+        list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
+      }
+
+      .titlebar-restore {
+        list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
+      }
+
+      .titlebar-restore > .toolbarbutton-icon:-moz-locale-dir(rtl) {
+        transform: scaleX(-1);
+      }
+
+      .titlebar-close {
+        list-style-image: url(chrome://browser/skin/window-controls/close.svg);
+      }
+
+      :root[lwtheme-image] .titlebar-button {
+        -moz-context-properties: unset;
+      }
+      :root[lwtheme-image] .titlebar-min {
+        list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg);
+      }
+      :root[lwtheme-image] .titlebar-max {
+        list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg);
+      }
+      :root[lwtheme-image] .titlebar-restore {
+        list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg);
+      }
+      :root[lwtheme-image] .titlebar-close {
+        list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg);
+      }
+
+      /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
+       * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
+      @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) {
+        .titlebar-button > .toolbarbutton-icon {
+          width: 11.5px;
+          height: 11.5px;
+        }
+      }
+
+      /* 175% dpi should result in the same device pixel sizes as 150% dpi. */
+      @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) {
+        .titlebar-button {
+          padding-inline: 14.1px;
+        }
+
+        .titlebar-button > .toolbarbutton-icon {
+          width: 10.8px;
+          height: 10.8px;
+        }
+      }
+
+      /* 225% dpi should result in the same device pixel sizes as 200% dpi. */
+      @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) {
+        .titlebar-button {
+          padding-inline: 15.3333px;
+        }
+
+        .titlebar-button > .toolbarbutton-icon {
+          width: 10.8px;
+          height: 10.8px;
+        }
+      }
+
+      /* 275% dpi should result in the same device pixel sizes as 250% dpi. */
+      @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) {
+        /* NB: todo: this should also change padding on the buttons
+         * themselves, but without a device to test this on, it's
+         * impossible to know by how much. */
+        .titlebar-button > .toolbarbutton-icon {
+          width: 10.8px;
+          height: 10.8px;
+        }
+      }
+
+      @media (-moz-windows-default-theme) {
+        #main-menubar > menu[_moz-menuactive="true"] {
+          color: inherit;
+        }
+
+        #main-menubar > menu[_moz-menuactive="true"],
+        .titlebar-button:hover {
+          background-color: hsla(0,0%,0%,.12);
+        }
+        .titlebar-button:hover:active {
+          background-color: hsla(0,0%,0%,.22);
+        }
+
+        #toolbar-menubar[brighttext] > #menubar-items > #main-menubar > menu[_moz-menuactive="true"],
+        toolbar[brighttext] .titlebar-button:not(.titlebar-close):hover {
+          background-color: hsla(0,0%,100%,.22);
+        }
+        toolbar[brighttext] .titlebar-button:not(.titlebar-close):hover:active {
+          background-color: hsla(0,0%,100%,.32);
+        }
+
+        .titlebar-close:hover {
+          stroke: white;
+          background-color: hsl(355,86%,49%);
+        }
+        .titlebar-close:hover:active {
+          background-color: hsl(355,82%,69%);
+        }
+
+        .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
+          opacity: 0.5;
+        }
+      }
+
+      @media (-moz-windows-default-theme: 0) {
+        .titlebar-button {
+          background-color: -moz-field;
+          stroke: ButtonText;
+        }
+        .titlebar-button:hover {
+          background-color: SelectedItem;
+          stroke: SelectedItemText;
+        }
+
+        .titlebar-min {
+          list-style-image: url(chrome://browser/skin/window-controls/minimize-highcontrast.svg);
+        }
+
+        .titlebar-max {
+          list-style-image: url(chrome://browser/skin/window-controls/maximize-highcontrast.svg);
+        }
+
+        .titlebar-restore {
+          list-style-image: url(chrome://browser/skin/window-controls/restore-highcontrast.svg);
+        }
+
+        .titlebar-close {
+          list-style-image: url(chrome://browser/skin/window-controls/close-highcontrast.svg);
+        }
+      }
+    }
+  }
+
+  @media (-moz-platform: windows-win7),
+         (-moz-platform: windows-win8) {
+    :root {
+      background-color: transparent;
+      appearance: auto;
+      -moz-default-appearance: -moz-win-borderless-glass;
+    }
+
+    :root[sizemode="maximized"] .titlebar-buttonbox {
+      margin-inline-end: 3px;
+    }
+
+    /* These should be hidden w/ glass enabled. Windows draws its own buttons. */
+    .titlebar-button {
+      display: none;
+    }
+
+    /* The borders on the glass frame are ours, and inside #browser, and on
+     * win7 we want to make sure they are "glassy", so we can't use #browser
+     * as the exclude-glass container. We use #appcontent instead. */
+    #appcontent {
+      appearance: auto;
+      -moz-default-appearance: -moz-win-exclude-glass;
+    }
+  }
+
+  @media (-moz-platform: windows-win8) {
+    /* Artificially draw window borders that are covered by lwtheme, see bug 591930.
+     * Borders for win7 are below, win10 only needs something like this when
+     * drawing in the titlebar (-moz-windows-accent-color-in-titlebar). */
+    #main-window[sizemode="normal"] #navigator-toolbox:-moz-lwtheme {
+      border-top: 1px solid var(--glass-shadow-color);
+    }
+  }
+
+  :root[darkwindowframe="true"]:not(:-moz-window-inactive, :-moz-lwtheme) {
+    color: white;
+  }
+
+  #appcontent:not(:-moz-lwtheme) {
+    background-color: -moz-dialog;
+  }
+}
+
+@media (-moz-windows-glass) {
+  #toolbar-menubar:not(:-moz-lwtheme) {
+    text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
+  }
+
+  #main-menubar:not(:-moz-lwtheme, :-moz-window-inactive) {
+    background-color: rgba(255,255,255,.5);
+    color: black;
+    border-radius: 4px;
+  }
+
+  /* Artificially draw window borders that are covered by lwtheme, see bug 591930.
+   * We use a different border for win8, and this win10+ only needs this if
+   * drawing in the titlebar (-moz-windows-accent-color-in-titlebar). */
+  #main-window[sizemode="normal"] #navigator-toolbox:-moz-lwtheme {
+    border-top: 1px solid var(--glass-active-border-color);
+    padding-top: 1px;
+    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
+  }
+
+  #main-window[sizemode="normal"] #navigator-toolbox:-moz-lwtheme:-moz-window-inactive {
+    border-top-color: var(--glass-inactive-border-color);
+  }
+}
+
+/* Aero Basic */
+@media (-moz-windows-compositor: 0) {
+  @media (-moz-windows-default-theme) {
+    :root {
+      background-color: rgb(185,209,234);
+    }
+    :root:-moz-window-inactive {
+      background-color: rgb(215,228,242);
+    }
+
+    /* Render a window top border for lwthemes: */
+    #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme {
+      background-image: linear-gradient(to bottom,
+            var(--glass-active-border-color) 0, var(--glass-active-border-color) 1px,
+            rgba(255,255,255,.6) 1px, rgba(255,255,255,.6) 2px, transparent 2px);
+    }
+
+    #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme:-moz-window-inactive {
+      background-image: linear-gradient(to bottom,
+            var(--glass-inactive-border-color) 0, var(--glass-inactive-border-color) 1px,
+            rgba(255,255,255,.6) 1px, rgba(255,255,255,.6) 2px, transparent 2px);
+    }
+  }
+
+  #print-preview-toolbar:not(:-moz-lwtheme) {
+    appearance: auto;
+    -moz-default-appearance: -moz-win-browsertabbar-toolbox;
+  }
+}
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
new file mode 100644
index 0000000000..c91b0d3ac6
--- /dev/null
+++ b/browser/themes/windows/browser.css
@@ -0,0 +1,588 @@
+/* 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/. */
+
+@import url("chrome://browser/skin/browser-shared.css");
+@import url("chrome://browser/skin/contextmenu.css");
+@import url("chrome://browser/skin/browser-custom-colors.css");
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white);
+  --toolbar-non-lwt-textcolor: -moz-dialogtext;
+
+  --panel-separator-color: ThreeDLightShadow;
+
+  --chrome-content-separator-color: ThreeDShadow;
+}
+
+@media (-moz-windows-default-theme) {
+  :root {
+    --toolbar-non-lwt-bgcolor: -moz-dialog;
+
+    --panel-separator-color: hsla(210,4%,10%,.14);
+  }
+}
+
+:root:-moz-lwtheme {
+  --chrome-content-separator-color: rgba(0,0,0,.3);
+
+  --panel-separator-color: hsla(210,4%,10%,.14);
+}
+
+:root[lwt-popup-brighttext] {
+  --panel-separator-color: rgba(249,249,250,.1);
+}
+
+#menubar-items {
+  -moz-box-orient: vertical; /* for flex hack */
+}
+
+#main-menubar > menu {
+  appearance: none;
+  color: inherit;
+}
+
+#main-menubar > menu[_moz-menuactive="true"] {
+  background-color: -moz-menuhover;
+  color: -moz-menuhovertext;
+}
+
+/* Use a different color only on Windows 8 and higher in inactive windows.
+ * On Win 7, the menubar fog disappears for inactive windows, and renders gray
+ * illegible.
+ */
+@media (-moz-windows-default-theme) {
+  @media not (-moz-platform: windows-win7) {
+    #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive {
+      color: ThreeDShadow;
+    }
+  }
+}
+
+@media not (-moz-platform: windows-win7) {
+  @media not (-moz-platform: windows-win8) {
+    /* On Windows 10, when temporarily showing the menu bar, make it at least as
+     * tall as the tab bar such that the window controls don't appear to move up. */
+    :root[tabsintitlebar] #toolbar-menubar[autohide="true"] {
+      height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size));
+    }
+    :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
+      height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size));
+    }
+  }
+}
+
+/* Add 4px extra margin on top of the tabs toolbar on Windows 7. */
+@media (-moz-platform: windows-win7) {
+  :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
+  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
+    padding-top: 4px;
+  }
+}
+
+#navigator-toolbox,
+.browser-toolbar {
+  appearance: none;
+}
+
+.browser-toolbar:not(.titlebar-color) {
+  background-color: var(--toolbar-bgcolor);
+  background-clip: padding-box;
+  color: var(--toolbar-color);
+}
+
+/* Add a fog for background tabs to be visible on Windows 7 glass window background */
+@media (-moz-platform: windows-win7) {
+  @media (-moz-windows-default-theme) {
+    #TabsToolbar:not(:-moz-lwtheme) {
+      background-image: radial-gradient(ellipse at bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.5) 80%, transparent);
+    }
+  }
+}
+
+@media (-moz-windows-compositor: 0),
+       (-moz-windows-default-theme: 0),
+       (-moz-platform: windows-win8) {
+  /* Please keep the menu text colors in this media block in sync with
+   * light-dark-overrides.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718.
+   */
+  :root[tabsintitlebar]:not(:-moz-lwtheme) {
+    color: CaptionText;
+  }
+
+  :root[tabsintitlebar]:not(:-moz-lwtheme):-moz-window-inactive {
+    color: InactiveCaptionText;
+  }
+}
+
+@media (-moz-windows-classic) {
+  /**
+   * In the classic themes, the titlebar has a horizontal gradient, which is
+   * problematic for reading the text of background tabs when they're in the
+   * titlebar. We side-step this issue by layering our own background underneath
+   * the tabs.
+   */
+  :root[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
+    background-image: linear-gradient(transparent, ActiveCaption);
+    background-size: auto 200%;
+  }
+
+  :root[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
+    background-image: linear-gradient(transparent, InactiveCaption);
+  }
+
+  /* Add a window top border for webextension themes */
+  :root[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme {
+    background-image: linear-gradient(to bottom,
+          ThreeDLightShadow 0, ThreeDLightShadow 1px,
+          ThreeDHighlight 1px, ThreeDHighlight 2px,
+          ActiveBorder 2px, ActiveBorder 4px, transparent 4px);
+  }
+
+  :root[tabsintitlebar] :is(#TabsToolbar, #toolbar-menubar) toolbarbutton:not(:-moz-lwtheme) {
+    color: inherit;
+  }
+}
+
+#nav-bar:not([tabs-hidden="true"]) {
+  /* This is needed for some toolbar button animations. Gross :( */
+  position: relative;
+}
+
+@media (-moz-windows-default-theme: 0) {
+  #nav-bar:not(:-moz-lwtheme) {
+    box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 ThreeDShadow;
+  }
+}
+#nav-bar:-moz-lwtheme {
+  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3));
+}
+@media (-moz-windows-compositor: 0) {
+  #nav-bar[tabs-hidden="true"] {
+    box-shadow: none;
+  }
+}
+
+#print-preview-toolbar:not(:-moz-lwtheme) {
+  appearance: auto;
+  -moz-default-appearance: toolbox;
+}
+
+/* Titlebar */
+
+:root[tabsintitlebar][sizemode="normal"] #titlebar {
+  appearance: auto;
+  -moz-default-appearance: -moz-window-titlebar;
+}
+
+:root[tabsintitlebar][sizemode="maximized"] #titlebar {
+  appearance: auto;
+  -moz-default-appearance: -moz-window-titlebar-maximized;
+}
+
+@media (-moz-windows-compositor: 0) {
+  /**
+   * Anytime we're not using the compositor on Windows, the -moz-window-titlebar
+   * and -moz-window-titlebar-maximized values for -moz-appearance override
+   * backgrounds supplied by lwthemes. We make the #titlebar itself hidden, but
+   * it's children visible in order to hide the background but keep the margin and
+   * padding that comes from those -moz-window-titlebar rules.
+   */
+  :root:not([inFullscreen]) #titlebar:-moz-lwtheme {
+    visibility: hidden;
+  }
+  :root:not([inFullscreen], [chromehidden~="menubar"]) #toolbar-menubar:-moz-lwtheme,
+  :root:not([inFullscreen], [chromehidden~="toolbar"]) #TabsToolbar:-moz-lwtheme {
+    visibility: visible;
+  }
+}
+
+@media (-moz-windows-classic) {
+  :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar {
+    margin-top: 4px;
+  }
+}
+
+.titlebar-buttonbox {
+  /* For all Windows configurations except for Windows Aero and Windows Aero Basic,
+   * the default -moz-default-appearance of -moz-window-button-box and
+   * -moz-window-button-box-maximized adds unwanted margins to the button box. We
+   * special case Windows Aero and Windows Aero Basic in browser-aero.css.
+   */
+  appearance: none;
+  /* The button box must appear on top of the navigator-toolbox in order for
+   * click and hover mouse events to work properly for the button in the restored
+   * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
+   * can swallow those events. It will also place the buttons above the fog on
+   * Windows 7 with Aero Glass.
+   */
+  z-index: 1;
+}
+
+.titlebar-buttonbox-container {
+  -moz-box-align: stretch;
+}
+
+@media (-moz-platform: windows-win7),
+       (-moz-platform: windows-win8) {
+  /* Preserve window control buttons position at the top of the button box. */
+  .titlebar-buttonbox-container {
+    -moz-box-align: start;
+  }
+}
+
+/* Window control buttons */
+
+.titlebar-min {
+  appearance: auto;
+  -moz-default-appearance: -moz-window-button-minimize;
+}
+
+.titlebar-max {
+  appearance: auto;
+  -moz-default-appearance: -moz-window-button-maximize;
+}
+
+.titlebar-restore {
+  appearance: auto;
+  -moz-default-appearance: -moz-window-button-restore;
+}
+
+.titlebar-close {
+  appearance: auto;
+  -moz-default-appearance: -moz-window-button-close;
+}
+
+@media (-moz-windows-classic: 0) {
+  .titlebar-min {
+    margin-inline-end: 2px;
+  }
+}
+
+:root[tabletmode] .titlebar-min,
+:root[tabletmode] .titlebar-restore,
+:root[tabletmode] .titlebar-max {
+  display: none;
+}
+
+/* Bookmark menus */
+
+menu.bookmark-item,
+menuitem.bookmark-item {
+  min-width: 0;
+  max-width: 32em;
+}
+
+.bookmark-item:not(.subviewbutton) > .menu-iconic-left {
+  margin-block: 0;
+}
+
+.bookmark-item[cutting] > .toolbarbutton-icon,
+.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
+  opacity: 0.5;
+}
+
+.bookmark-item[cutting] > .toolbarbutton-text,
+.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
+  opacity: 0.7;
+}
+
+
+/* Address bar */
+
+@media not (prefers-contrast) {
+  :root:not(:-moz-lwtheme) #urlbar {
+    --urlbar-box-bgcolor: white;
+  }
+  :root[lwt-default-theme-in-dark-mode] #urlbar {
+    --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color);
+  }
+}
+
+#urlbar,
+#searchbar {
+  font-size: 1.15em;
+}
+
+@supports -moz-bool-pref("browser.urlbar.experimental.expandTextOnFocus") {
+  #urlbar[breakout-extend] {
+    font-size: 1.25em;
+  }
+}
+
+@media (-moz-windows-default-theme: 0) {
+  /* Windows HCM conventions use these colors for chiclets. We can't use them on
+     other platforms because AccentColor can be shown atop SelectedItem,
+     which has zero contrast. */
+  :root {
+    --urlbar-box-hover-bgcolor: SelectedItem;
+    --urlbar-box-active-bgcolor: SelectedItem;
+    --urlbar-box-hover-text-color: SelectedItemText;
+  }
+
+  #urlbar:not(:-moz-lwtheme, [focused="true"]) > #urlbar-background,
+  #searchbar:not(:-moz-lwtheme, :focus-within) {
+    border-color: ThreeDShadow;
+  }
+}
+
+/* Address bar results view */
+
+@media (-moz-windows-default-theme: 0) {
+  :root:not(:-moz-lwtheme) {
+    --urlbar-popup-action-color: -moz-nativehyperlinktext;
+  }
+}
+
+/* Autocomplete */
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
+  border-top: 1px solid ThreeDShadow;
+}
+
+/* Content area */
+
+#browser {
+  --sidebar-border-color: ThreeDLightShadow;
+}
+
+/* Tabstrip */
+
+#TabsToolbar {
+  min-height: 0;
+  padding: 0;
+}
+
+@media (-moz-windows-default-theme: 0) {
+  /* For high contrast themes. */
+  #tabbrowser-tabpanels,
+  :root[privatebrowsingmode=temporary] #tabbrowser-tabpanels {
+    background-color: -moz-default-background-color;
+  }
+}
+
+/* All tabs menupopup */
+
+.alltabs-item[selected="true"] {
+  font-weight: bold;
+}
+
+toolbarbutton.bookmark-item[dragover="true"][open="true"] {
+  appearance: none;
+  background: SelectedItem !important;
+  color: SelectedItemText !important;
+  fill: SelectedItemText;
+}
+
+/* Bookmarks roots menu-items */
+
+#bookmarksToolbarFolderMenu,
+#BMB_bookmarksToolbar,
+#panelMenu_bookmarksToolbar {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg");
+  -moz-image-region: auto;
+}
+
+/* Status panel */
+
+#statuspanel-label {
+  margin: 0;
+  padding: 2px 4px;
+  background-color: -moz-dialog;
+  border: 1px none ThreeDLightShadow;
+  border-top-style: solid;
+  color: -moz-dialogText;
+  text-shadow: none;
+}
+
+@media (-moz-windows-default-theme) {
+  #statuspanel-label {
+    background-color: #f9f9fa;
+    color: #444;
+  }
+}
+
+@media (-moz-content-prefers-color-scheme: dark) {
+  #statuspanel-label {
+    background-color: hsl(240, 1%, 20%);
+    border-color: hsl(240, 1%, 40%);
+    color: rgb(249, 249, 250);
+  }
+}
+
+#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(ltr),
+#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(rtl) {
+  border-right-style: solid;
+  /* disabled for triggering grayscale AA (bug 659213)
+  border-top-right-radius: .3em;
+  */
+  margin-right: 1em;
+}
+
+#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(rtl),
+#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(ltr) {
+  border-left-style: solid;
+  /* disabled for triggering grayscale AA (bug 659213)
+  border-top-left-radius: .3em;
+  */
+  margin-left: 1em;
+}
+
+/* Prevent window controls from overlapping the nav bar's shadow on the tab
+ * bar. */
+#TabsToolbar > .titlebar-buttonbox-container {
+  margin-bottom: var(--tabs-navbar-shadow-size);
+}
+
+.private-browsing-indicator {
+  margin-inline: 12px;
+}
+
+#UITourTooltipButtons {
+  /**
+   * Override the --arrowpanel-padding so the background extends
+   * to the sides and bottom of the panel.
+   */
+  margin-inline: -10px;
+  margin-bottom: -10px;
+}
+
+/* Make menu items larger when opened through touch. */
+panel[touchmode],
+menupopup[touchmode] {
+  --arrowpanel-menuitem-padding-block: 12px;
+  --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
+}
+
+menupopup[touchmode] :is(menu, menuitem, menucaption) {
+  /* Use the var set in the rule above to increase menu items height in menupopups when
+   * they are opened through touch.
+   * Panel menu items already have their padding set in panelUI-shared.css with the same var. */
+  padding-block: var(--arrowpanel-menuitem-padding-block);
+}
+
+#contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
+  /* The navigation menuitems are bigger to begin with because of their inner padding,
+   * so calculate the padding-block to match normal menuitems height when in touchmode.
+   * 3.5em is the desired menuitem height (~42px), minus the menuitem actual height devided by 2. */
+  padding-block: calc((3.5em - 32px) / 2);
+}
+
+#context-navigation {
+  background-color: menu;
+}
+
+#context-sep-navigation {
+  margin-inline-start: -28px;
+}
+
+@media (-moz-windows-non-native-menus) {
+  /* :not([hidden]) to avoid the display: flex unhiding the item. */
+  #context-navigation:not([hidden]) {
+    /* The Windows 10 version of the navigation area needs the scrollbox's
+       background color, not the builtin "menu" color. */
+    background-color: inherit;
+    /* Match the inner top padding of the menupopup to center the icons visually. */
+    padding-bottom: 4px;
+    /* Use modern flex box so we can use percentage widths to redistribute
+     * spacing manually. */
+    display: flex;
+    flex-direction: row;
+    /* We want the first and last icons to align with the text items which
+     * have 1em inline padding, and for icons to be centered within their
+     * hover state, so each icon of 16px needs 1em padding on both sides:
+     */
+    --menuitem-min-width: calc(2em + 16px);
+    /* The total width of the container should then be at least 4 times that: */
+    min-width: calc(4 * var(--menuitem-min-width));
+  }
+
+  #context-navigation > .menuitem-iconic {
+    flex: 1 0 auto;
+  }
+
+  #context-navigation > .menuitem-iconic[_moz-menuactive="true"] {
+    /* We only show hover state on the icons. This ensures there is no
+     * dead space between icons, but the visible hover state is only
+     * around the icons, and all the icons' hover states match each other.
+     */
+    background-color: transparent;
+  }
+
+  #context-navigation > .menuitem-iconic > .menu-iconic-left {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* override styles from shared/contextmenu.inc.css */
+  #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
+    width: var(--menuitem-min-width);
+    height: 32px;
+    padding: 8px 1em;
+    margin: 0;
+  }
+  #context-navigation > .menuitem-iconic[_moz-menuactive="true"] > .menu-iconic-left > .menu-iconic-icon {
+    background-color: -moz-menuhover;
+  }
+
+  #context-navigation > .menuitem-iconic[_moz-menuactive="true"][disabled="true"] > .menu-iconic-left > .menu-iconic-icon {
+    background-color: -moz-menuhoverdisabled;
+  }
+
+  /* If the menu is wider than the icons strictly need, the <menuitem> elements
+   * will stretch to pick up the extra space. In that case, the outer icons
+   * should align to the start/end of their containing <menuitem>: */
+  #context-navigation > .menuitem-iconic:first-child {
+    -moz-box-pack: start;
+  }
+
+  #context-navigation > .menuitem-iconic:last-child {
+    -moz-box-pack: end;
+  }
+
+  #context-navigation > .menuitem-iconic:last-child,
+  #context-navigation > .menuitem-iconic:first-child {
+    flex-grow: 0;
+    /* The first and last items start off as 16px + 2em, like the other ones.
+     * 100% is the width of the parent, which will be at least 4 * the width of
+     * an individual item (16px + 2em)
+     * So 100% - 4 item widths gets us the remaining available space if
+     * #context-navigation is wider than that.
+     * Then divide by 6 to get the 1/6 of that extra space, and add this space
+     * to the width of the first/last items.
+     * This ensures that the 3 visual gaps between the 4 icons are all the same
+     * size, with each 1/3 of the available space evenly distributed between
+     * the 2 items on either side of the gap.
+     */
+    width: calc(var(--menuitem-min-width) + calc(100% - 4 * var(--menuitem-min-width)) / 6);
+  }
+
+
+  /* Other menu separators don't extend all the way to the menu edges, but the
+     one below the navigation buttons in the content context menu should. */
+  #context-sep-navigation {
+    margin-top: 0;
+    margin-inline: 0;
+  }
+}
+
+#historySwipeAnimationPreviousArrow {
+  background: url("chrome://browser/skin/history-swipe-arrow.svg")
+              center left / 192px 192px no-repeat transparent;
+  will-change: transform;
+  -moz-context-properties: fill;
+}
+#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+#historySwipeAnimationNextArrow {
+  background: url("chrome://browser/skin/history-swipe-arrow.svg")
+              center left / 192px 192px no-repeat transparent;
+  will-change: transform;
+  -moz-context-properties: fill;
+}
+#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
diff --git a/browser/themes/windows/customizableui/panelUI.css b/browser/themes/windows/customizableui/panelUI.css
new file mode 100644
index 0000000000..fc5f683dbe
--- /dev/null
+++ b/browser/themes/windows/customizableui/panelUI.css
@@ -0,0 +1,26 @@
+/* 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/. */
+
+@import "chrome://browser/skin/customizableui/panelUI-shared.css";
+
+/* bookmark panel submenus */
+
+menupopup::part(drop-indicator) {
+  /* To account for the shadow margin + border of the panel */
+  margin-inline-start: 5px;
+}
+
+toolbarbutton menupopup[placespopup] {
+  --nested-margin: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) + var(--panel-shadow-margin)));
+}
+
+@media not (-moz-windows-non-native-menus) {
+  toolbarbutton menupopup[placespopup] {
+    --panel-shadow-margin: 4px;
+  }
+
+  toolbarbutton menupopup[placespopup] menupopup[placespopup] {
+    margin-inline-start: var(--nested-margin);
+  }
+}
diff --git a/browser/themes/windows/downloads/allDownloadsView.css b/browser/themes/windows/downloads/allDownloadsView.css
new file mode 100644
index 0000000000..77db61d972
--- /dev/null
+++ b/browser/themes/windows/downloads/allDownloadsView.css
@@ -0,0 +1,63 @@
+/* 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/. */
+
+@import "chrome://browser/skin/downloads/allDownloadsView.inc.css";
+
+/*** List items ***/
+
+@media (-moz-windows-default-theme) {
+  .downloadProgress::-moz-progress-bar {
+    background-color: #3c9af8;
+  }
+
+  .downloadProgress[paused]::-moz-progress-bar {
+    background-color: #a6a6a6;
+  }
+}
+
+/*** Highlighted list items ***/
+
+@media (-moz-windows-default-theme) {
+  /*
+  -moz-default-appearance: menuitem is almost right, but the hover effect is not
+  transparent and is lighter than desired.
+
+  Copied from the autocomplete richlistbox styling in
+  toolkit/themes/windows/global/autocomplete.css
+
+  This styling should be kept in sync with the style from the above file.
+  */
+  #downloadsListBox:focus > richlistitem[selected] {
+    color: inherit;
+    background-color: transparent;
+    /* four gradients for the bevel highlights on each edge, one for blue background */
+    background-image:
+      linear-gradient(to bottom, rgba(255,255,255,0.9) 3px, transparent 3px),
+      linear-gradient(to right, rgba(255,255,255,0.5) 3px, transparent 3px),
+      linear-gradient(to left, rgba(255,255,255,0.5) 3px, transparent 3px),
+      linear-gradient(to top, rgba(255,255,255,0.4) 3px, transparent 3px),
+      linear-gradient(to bottom, rgba(163,196,247,0.3), rgba(122,180,246,0.3));
+    background-clip: content-box;
+    border-radius: 6px;
+    outline: 1px solid rgb(124,163,206);
+    outline-offset: -2px;
+  }
+}
+
+/*** Progress bars ***/
+
+@media (prefers-contrast) {
+  .downloadProgress {
+    background-color: -moz-Dialog;
+    border: 1px solid ButtonText;
+  }
+
+  .downloadProgress::-moz-progress-bar {
+    --download-progress-fill-color: SelectedItem;
+  }
+
+  #downloadsListBox richlistitem[selected] .downloadProgress::-moz-progress-bar {
+    --download-progress-fill-color: ButtonText;
+  }
+}
diff --git a/browser/themes/windows/downloads/downloads.css b/browser/themes/windows/downloads/downloads.css
new file mode 100644
index 0000000000..2cc4b26195
--- /dev/null
+++ b/browser/themes/windows/downloads/downloads.css
@@ -0,0 +1,33 @@
+/* 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/. */
+
+@import "chrome://browser/skin/downloads/downloads.inc.css";
+
+/*** Panel and outer controls ***/
+
+#downloadsHistory {
+  border: 0;
+}
+
+/*** List items and similar elements in the summary ***/
+
+:root {
+  --downloads-item-height: 5.5em;
+  --downloads-item-font-size-factor: 0.9;
+  --downloads-item-details-opacity: 0.6;
+  --downloads-item-disabled-opacity: 0.6;
+}
+
+/*** Progress bars ***/
+
+@media (prefers-contrast) {
+  .downloadProgress {
+    background-color: -moz-Dialog;
+    border: 1px solid ButtonText;
+  }
+
+  .downloadProgress::-moz-progress-bar {
+    --download-progress-fill-color: SelectedItem;
+  }
+}
diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn
new file mode 100644
index 0000000000..4c6069180e
--- /dev/null
+++ b/browser/themes/windows/jar.mn
@@ -0,0 +1,42 @@
+# 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/.
+
+browser.jar:
+% skin browser classic/1.0 %skin/classic/browser/
+#include ../shared/jar.inc.mn
+  skin/classic/browser/sanitizeDialog.css
+  skin/classic/browser/browser.css
+  skin/classic/browser/browser-custom-colors.css  (../shared/browser-custom-colors.css)
+  skin/classic/browser/browser-aero.css
+  skin/classic/browser/contextmenu.css            (../shared/contextmenu.css)
+  skin/classic/browser/monitor-base.png
+  skin/classic/browser/monitor-border.png
+  skin/classic/browser/pageInfo.css
+  skin/classic/browser/pageInfo.png
+  skin/classic/browser/webRTC-legacy-indicator.css  (../shared/webRTC-legacy-indicator.css)
+  skin/classic/browser/customizableui/panelUI.css       (customizableui/panelUI.css)
+  skin/classic/browser/downloads/allDownloadsView.css   (downloads/allDownloadsView.css)
+  skin/classic/browser/downloads/downloads.css                 (downloads/downloads.css)
+  skin/classic/browser/notification-icons/camera.png           (notification-icons/camera.png)
+  skin/classic/browser/notification-icons/microphone.png       (notification-icons/microphone.png)
+  skin/classic/browser/notification-icons/screen.png           (notification-icons/screen.png)
+  skin/classic/browser/places/organizer.css                    (places/organizer.css)
+  skin/classic/browser/preferences/alwaysAsk.png               (preferences/alwaysAsk.png)
+  skin/classic/browser/preferences/application.png             (preferences/application.png)
+  skin/classic/browser/preferences/saveFile.png                (preferences/saveFile.png)
+  skin/classic/browser/preferences/applications.css            (preferences/applications.css)
+  skin/classic/browser/window-controls/close.svg                 (window-controls/close.svg)
+  skin/classic/browser/window-controls/close-highcontrast.svg    (window-controls/close-highcontrast.svg)
+  skin/classic/browser/window-controls/close-themes.svg          (window-controls/close-themes.svg)
+  skin/classic/browser/window-controls/maximize.svg              (window-controls/maximize.svg)
+  skin/classic/browser/window-controls/maximize-highcontrast.svg (window-controls/maximize-highcontrast.svg)
+  skin/classic/browser/window-controls/maximize-themes.svg       (window-controls/maximize-themes.svg)
+  skin/classic/browser/window-controls/minimize.svg              (window-controls/minimize.svg)
+  skin/classic/browser/window-controls/minimize-highcontrast.svg (window-controls/minimize-highcontrast.svg)
+  skin/classic/browser/window-controls/minimize-themes.svg       (window-controls/minimize-themes.svg)
+  skin/classic/browser/window-controls/restore.svg               (window-controls/restore.svg)
+  skin/classic/browser/window-controls/restore-highcontrast.svg  (window-controls/restore-highcontrast.svg)
+  skin/classic/browser/window-controls/restore-themes.svg        (window-controls/restore-themes.svg)
+  skin/classic/browser/e10s-64@2x.png                            (../shared/e10s-64@2x.png)
+  skin/classic/browser/history-swipe-arrow.svg                   (../shared/swipe-gesture-icons/history-swipe-arrow.svg)
diff --git a/browser/themes/windows/monitor-base.png b/browser/themes/windows/monitor-base.png
new file mode 100644
index 0000000000..45a2410217
--- /dev/null
+++ b/browser/themes/windows/monitor-base.png
diff --git a/browser/themes/windows/monitor-border.png b/browser/themes/windows/monitor-border.png
new file mode 100644
index 0000000000..f05dcb7839
--- /dev/null
+++ b/browser/themes/windows/monitor-border.png
diff --git a/browser/themes/windows/moz.build b/browser/themes/windows/moz.build
new file mode 100644
index 0000000000..20e4e3af75
--- /dev/null
+++ b/browser/themes/windows/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+JAR_MANIFESTS += ["jar.mn"]
+
+DEFINES["MENUBAR_CAN_AUTOHIDE"] = 1
diff --git a/browser/themes/windows/notification-icons/camera.png b/browser/themes/windows/notification-icons/camera.png
new file mode 100644
index 0000000000..110f3e4728
--- /dev/null
+++ b/browser/themes/windows/notification-icons/camera.png
diff --git a/browser/themes/windows/notification-icons/microphone.png b/browser/themes/windows/notification-icons/microphone.png
new file mode 100644
index 0000000000..e0fceee6f7
--- /dev/null
+++ b/browser/themes/windows/notification-icons/microphone.png
diff --git a/browser/themes/windows/notification-icons/screen.png b/browser/themes/windows/notification-icons/screen.png
new file mode 100644
index 0000000000..3620c87135
--- /dev/null
+++ b/browser/themes/windows/notification-icons/screen.png
diff --git a/browser/themes/windows/pageInfo.css b/browser/themes/windows/pageInfo.css
new file mode 100644
index 0000000000..265384b2fa
--- /dev/null
+++ b/browser/themes/windows/pageInfo.css
@@ -0,0 +1,178 @@
+/* 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/. */
+
+@import "chrome://global/skin/global.css";
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+#topBar {
+  -moz-window-dragging: drag;
+  border-bottom: 1px solid ThreeDLightShadow;
+  padding-inline-start: 10px;
+  background-color: Field;
+  color: FieldText;
+}
+
+/* View buttons */
+#viewGroup {
+  padding-inline-start: 10px;
+}
+
+#viewGroup > radio {
+  list-style-image: url("chrome://browser/skin/pageInfo.png");
+  appearance: none;
+  min-width: 4.5em;
+  margin: 0;
+  padding: 3px;
+}
+
+#viewGroup > radio:hover {
+  background-color: #E0E8F6;
+  color: black;
+}
+
+#viewGroup > radio[selected="true"] {
+  background-color: #C1D2EE;
+  color: black;
+}
+
+#viewGroup > radio > .radio-label-box {
+  margin: 0;
+  padding: 0 6px;
+}
+
+#viewGroup:focus-visible > radio[focused="true"] > .radio-label-box {
+  outline: var(--default-focusring);
+}
+
+#generalTab {
+  -moz-image-region: rect(0px, 32px, 32px, 0px)
+}
+
+#generalTab:hover,
+#generalTab[selected="true"] {
+  -moz-image-region: rect(32px, 32px, 64px, 0px)
+}
+
+#mediaTab {
+  -moz-image-region: rect(0px, 64px, 32px, 32px)
+}
+
+#mediaTab:hover,
+#mediaTab[selected="true"] {
+  -moz-image-region: rect(32px, 64px, 64px, 32px)
+}
+
+#permTab {
+  -moz-image-region: rect(0px, 128px, 32px, 96px)
+}
+
+#permTab:hover,
+#permTab[selected="true"] {
+  -moz-image-region: rect(32px, 128px, 64px, 96px)
+}
+
+#securityTab {
+  -moz-image-region: rect(0px, 160px, 32px, 128px)
+}
+
+#securityTab:hover,
+#securityTab[selected="true"] {
+  -moz-image-region: rect(32px, 160px, 64px, 128px)
+}
+
+/* Misc */
+tree {
+  margin: .5em;
+}
+
+html|input {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+html|input.header {
+  margin-inline-start: 0;
+}
+
+#imagecontainerbox {
+  margin: .5em;
+  background: white;
+  overflow: auto;
+  border: 1px solid ThreeDLightShadow;
+}
+
+html|input:disabled {
+  font-style: italic;
+}
+
+/* General Tab */
+
+#securityBox description {
+  margin-inline-start: 10px;
+}
+
+#general-security-identity {
+  white-space: pre-wrap;
+  line-height: 2em;
+}
+
+/* Media Tab */
+#imagetree {
+  min-height: 10em;
+  margin-bottom: 0;
+}
+
+#mediaSplitter {
+  border-style: none;
+  background: none;
+  height: .8em;
+}
+
+#mediaTable {
+  margin-bottom: 2em;
+}
+
+#mediaLabelColumn {
+  min-width: 10em;
+}
+
+#thepreviewimage {
+  margin: 1em;
+}
+
+treechildren::-moz-tree-cell-text(broken) {
+  font-style: italic;
+  color: graytext;
+}
+
+/* Permissions Tab */
+#permList {
+  margin: .5em;
+  overflow: auto;
+  appearance: auto;
+  -moz-default-appearance: listbox;
+  color: FieldText;
+}
+
+.permission {
+  padding: 6px 7px;
+  min-height: 25px;
+  border-bottom: 1px dotted ThreeDShadow;
+}
+
+.permissionLabel {
+  font-weight: bold;
+}
+
+.permission:hover {
+  background-color: -moz-dialog;
+  color: -moz-dialogText;
+}
+
+/* Security Tab */
+
+#securityPanel table {
+  margin-bottom: 1em;
+}
diff --git a/browser/themes/windows/pageInfo.png b/browser/themes/windows/pageInfo.png
new file mode 100644
index 0000000000..684342f451
--- /dev/null
+++ b/browser/themes/windows/pageInfo.png
diff --git a/browser/themes/windows/places/organizer.css b/browser/themes/windows/places/organizer.css
new file mode 100644
index 0000000000..86736bcafb
--- /dev/null
+++ b/browser/themes/windows/places/organizer.css
@@ -0,0 +1,401 @@
+/* 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/. */
+
+:root {
+  --organizer-color: -moz-DialogText;
+  --organizer-deemphasized-color: GrayText;
+
+  --organizer-toolbar-background: -moz-Dialog;
+  --organizer-pane-background: -moz-Dialog;
+  --organizer-content-background: -moz-Dialog;
+
+  --organizer-hover-background: SelectedItem;
+  --organizer-hover-color: SelectedItemText;
+  --organizer-selected-background: SelectedItem;
+  --organizer-selected-color: SelectedItemText;
+  --organizer-outline-color: SelectedItem;
+
+  --organizer-separator-color: ThreeDDarkShadow;
+  --organizer-border-color: ThreeDShadow;
+
+  --organizer-toolbar-field-background: Field;
+  --organizer-toolbar-field-background-focused: Field;
+  --organizer-toolbar-field-border-color: ThreeDShadow;
+  --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color);
+  --organizer-toolbar-field-focus-box-shadow: unset;
+  --organizer-pane-field-border-color: ThreeDShadow;
+}
+
+@media not (prefers-contrast) {
+  :root {
+    --organizer-color: rgb(21,20,26);
+    --organizer-deemphasized-color: rgb(91,91,102);
+
+    --organizer-toolbar-background: rgb(249,249,251);
+    --organizer-pane-background: rgb(240,240,244);
+    --organizer-content-background: white;
+
+    --organizer-hover-background: rgba(207,207,216,.66);
+    --organizer-hover-color: var(--organizer-color);
+    --organizer-selected-background: rgb(207,207,216);
+    --organizer-selected-color: var(--organizer-color);
+    --organizer-outline-color: rgb(0,97,224);
+
+    --organizer-separator-color: var(--organizer-pane-field-border-color);
+    --organizer-border-color: ThreeDLightShadow;
+
+    --organizer-toolbar-field-background: rgb(240,240,244);
+    --organizer-toolbar-field-background-focused: Field;
+    --organizer-toolbar-field-border-color: transparent;
+    --organizer-toolbar-field-focus-border-color: color-mix(in srgb, var(--organizer-outline-color) 50%, transparent);
+    --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
+    --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --organizer-color: rgb(251,251,254);
+      --organizer-deemphasized-color: rgb(191,191,201);
+
+      --organizer-toolbar-background: rgb(43,42,51);
+      --organizer-pane-background: rgb(35,34,43);
+      --organizer-content-background: rgb(28,27,34);
+
+      --organizer-hover-background: rgb(82,82,94);
+      --organizer-selected-background: rgb(91,91,102);
+      --organizer-outline-color: rgb(0,221,255);
+
+      --organizer-toolbar-field-background: rgb(28,27,34);
+      --organizer-toolbar-field-background-focused: rgb(66,65,77);
+      scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
+    }
+  }
+}
+
+/* Toolbar and menus */
+
+#placesToolbar {
+  appearance: none;
+  background-color: var(--organizer-toolbar-background);
+  color: var(--organizer-color);
+  border-bottom: 1px solid var(--organizer-border-color);
+  padding: 4px;
+  padding-inline-end: 6px;
+}
+
+#placesToolbar > toolbarbutton {
+  appearance: none;
+  padding: 5px;
+  border-radius: 4px;
+}
+
+#placesToolbar > toolbarbutton[disabled] {
+  opacity: .6;
+}
+
+#placesToolbar > toolbarbutton:not([disabled]):hover {
+  background-color: var(--organizer-hover-background);
+  color: var(--organizer-hover-color);
+}
+
+#placesToolbar > toolbarbutton:not([disabled]):hover:active {
+  background-color: var(--organizer-selected-background);
+}
+
+#placesToolbar > toolbarbutton > .toolbarbutton-icon,
+#placesMenu > menu > image,
+#placesMenu > menu > .menubar-text {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#placesMenu {
+  margin-inline-start: 6px;
+}
+
+#placesMenu > menu {
+  appearance: none;
+  color: var(--organizer-color);
+  border-radius: 4px;
+  padding-block: 5px;
+  padding-inline-start: 5px;
+  margin-inline-end: 2px;
+}
+
+#placesMenu > menu:hover {
+  background-color: var(--organizer-hover-background);
+  color: var(--organizer-hover-color);
+}
+
+#placesMenu > menu:hover:active,
+#placesMenu > menu[open] {
+  background-color: var(--organizer-selected-background);
+  color: var(--organizer-selected-color);
+}
+
+#placesMenu > menu > .menubar-text {
+  margin-block: 0 !important; /* override menu.css */
+  padding-inline-end: 8px;
+  background: url(chrome://global/skin/icons/arrow-down-12.svg) right center no-repeat;
+  background-size: 6px;
+}
+
+#placesMenu > menu > .menubar-text:-moz-locale-dir(rtl) {
+  background-position-x: left;
+}
+
+/* Toolbar icons */
+
+#back-button {
+  list-style-image: url("chrome://browser/skin/back.svg");
+}
+
+#forward-button {
+  list-style-image: url("chrome://browser/skin/forward.svg");
+}
+
+#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+  transform: scaleX(-1);
+}
+
+#organizeButton {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+#viewMenu {
+  list-style-image: url("chrome://browser/skin/sort.svg");
+}
+
+#maintenanceButton {
+  list-style-image: url("chrome://browser/skin/import-export.svg");
+}
+
+/* Search bar */
+
+#searchFilter {
+  appearance: none;
+  background-color: var(--organizer-toolbar-field-background);
+  color: var(--organizer-color);
+  border: 1px solid var(--organizer-toolbar-field-border-color);
+  border-radius: 4px;
+  margin: 0;
+  padding-block: 2px;
+  min-height: 24px;
+}
+
+#searchFilter[focused] {
+  box-shadow: var(--organizer-toolbar-field-focus-box-shadow);
+  background-color: var(--organizer-toolbar-field-background-focused);
+  border-color: transparent;
+  outline: 2px solid var(--organizer-toolbar-field-focus-border-color);
+  outline-offset: -2px;
+}
+
+/* Sidebar and splitter */
+
+#placesList {
+  background-color: var(--organizer-pane-background);
+}
+
+#placesView > splitter {
+  border: 0;
+  border-inline-end: 1px solid var(--organizer-border-color);
+  min-width: 0;
+  width: 3px;
+  background-color: transparent;
+  margin-inline-start: -3px;
+  position: relative;
+}
+
+/* Downloads pane */
+
+#downloadsListBox {
+  color: var(--organizer-color);
+  background-color: var(--organizer-content-background);
+}
+
+#clearDownloadsButton:focus-visible {
+  outline: 2px solid var(--organizer-outline-color);
+}
+
+/* Tree */
+
+#contentView treecol {
+  /* Use box-shadow to draw a bottom border instead of border-bottom
+   * because otherwise the items on contentView won't be perfectly
+   * aligned with the items on the sidebar. */
+  box-shadow: inset 0 -1px var(--organizer-border-color)
+}
+
+tree {
+  background-color: var(--organizer-content-background);
+  color: var(--organizer-color);
+}
+
+treechildren::-moz-tree-row {
+  background-color: transparent;
+}
+
+treechildren::-moz-tree-row(hover) {
+  background-color: var(--organizer-hover-background);
+}
+
+treechildren::-moz-tree-row(selected) {
+  background-color: var(--organizer-selected-background);
+  color: var(--organizer-selected-color);
+  border: 1px solid transparent;
+}
+
+treechildren::-moz-tree-image(hover),
+treechildren::-moz-tree-twisty(hover),
+treechildren::-moz-tree-cell-text(hover) {
+  color: var(--organizer-hover-color);
+}
+
+treechildren::-moz-tree-image(selected),
+treechildren::-moz-tree-twisty(selected),
+treechildren::-moz-tree-cell-text(selected) {
+  color: var(--organizer-selected-color);
+}
+
+treechildren::-moz-tree-separator {
+  height: 1px;
+  border-color: var(--organizer-separator-color);
+}
+
+treechildren::-moz-tree-separator(hover) {
+  border-color: var(--organizer-hover-color);
+}
+
+treechildren::-moz-tree-separator(selected) {
+  border-color: var(--organizer-selected-color);
+}
+
+/* Info box */
+#infoBox:not([hidden="true"]) {
+  display: block;
+}
+
+#editBookmarkPanelContent {
+  grid-template-columns: auto 1fr;
+}
+
+#editBookmarkPanelContent .caption-label:not([hidden="true"]) {
+  display: block;
+  grid-column: 2;
+}
+
+#editBookmarkPanelContent label {
+  align-self: center;
+}
+
+#editBMPanel_itemsCountText {
+  grid-column: auto / span 2;
+  justify-self: center;
+}
+
+#editBMPanel_tagsSelectorRow {
+  grid-column: auto / span 2;
+}
+
+#detailsPane {
+  background-color: var(--organizer-pane-background);
+  color: var(--organizer-color);
+  height: 16em;
+  padding: 5px;
+  border-top: 1px solid var(--organizer-border-color);
+}
+
+#editBookmarkPanelContent .expander-up,
+#editBookmarkPanelContent .expander-down {
+  appearance: none;
+  min-width: 0;
+  padding: 5px;
+  margin: 0;
+  margin-inline-end: 4px;
+  border: 1px solid var(--organizer-pane-field-border-color);
+  border-radius: 4px;
+  color: var(--organizer-color);
+  background-color: var(--organizer-content-background);
+  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#editBookmarkPanelContent .expander-up:hover,
+#editBookmarkPanelContent .expander-down:hover {
+  background-color: var(--organizer-hover-background);
+  color: var(--organizer-hover-color);
+}
+
+#editBookmarkPanelContent .expander-up:hover:active,
+#editBookmarkPanelContent .expander-down:hover:active {
+  background-color: var(--organizer-selected-background);
+  color: var(--organizer-selected-color);
+}
+
+#editBookmarkPanelContent .expander-up:focus-visible,
+#editBookmarkPanelContent .expander-down:focus-visible {
+  outline: 2px solid var(--organizer-outline-color);
+  outline-offset: -1px;
+}
+
+#editBookmarkPanelContent .expander-up {
+  list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
+}
+
+#editBookmarkPanelContent .expander-up > .button-box,
+#editBookmarkPanelContent .expander-down > .button-box {
+  padding: 0;
+}
+
+#places input {
+  border: 1px solid var(--organizer-pane-field-border-color);
+  border-radius: 4px;
+  background-color: var(--organizer-content-background);
+  color: var(--organizer-color);
+  min-height: 20px;
+  padding-inline: 4px;
+}
+
+#places input:focus {
+  outline: 2px solid var(--organizer-outline-color);
+  outline-offset: -1px;
+}
+
+#places input:not(:read-write):focus {
+  outline: none;
+}
+
+.caption-label {
+  margin-inline-start: 8px;
+  color: var(--organizer-deemphasized-color);
+}
+
+#editBookmarkPanelContent input {
+  margin: 4px;
+}
+
+#editBMPanel_tagsSelector {
+  appearance: none;
+  color: var(--organizer-color);
+  background-color: var(--organizer-content-background);
+  border: 1px solid var(--organizer-border-color);
+  border-radius: 4px;
+}
+
+#editBMPanel_tagsSelector > richlistitem {
+  border: 1px solid transparent;
+}
+
+#editBMPanel_tagsSelector > richlistitem:hover {
+  background-color: var(--organizer-hover-background);
+  color: var(--organizer-hover-color);
+}
+
+#editBMPanel_tagsSelector > richlistitem[selected] {
+  background-color: var(--organizer-selected-background);
+  color: var(--organizer-selected-color);
+}
diff --git a/browser/themes/windows/preferences/alwaysAsk.png b/browser/themes/windows/preferences/alwaysAsk.png
new file mode 100644
index 0000000000..b394da070b
--- /dev/null
+++ b/browser/themes/windows/preferences/alwaysAsk.png
diff --git a/browser/themes/windows/preferences/application.png b/browser/themes/windows/preferences/application.png
new file mode 100644
index 0000000000..da3689e917
--- /dev/null
+++ b/browser/themes/windows/preferences/application.png
diff --git a/browser/themes/windows/preferences/applications.css b/browser/themes/windows/preferences/applications.css
new file mode 100644
index 0000000000..2ff372d9e7
--- /dev/null
+++ b/browser/themes/windows/preferences/applications.css
@@ -0,0 +1,43 @@
+/* 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/. */
+
+richlistitem[appHandlerIcon="handleInternally"],
+menuitem[appHandlerIcon="handleInternally"] {
+  list-style-image: url("chrome://branding/content/icon32.png");
+}
+
+richlistitem[appHandlerIcon="ask"],
+menuitem[appHandlerIcon="ask"] {
+  list-style-image: url("chrome://browser/skin/preferences/alwaysAsk.png");
+}
+
+richlistitem[appHandlerIcon="save"],
+menuitem[appHandlerIcon="save"] {
+  list-style-image: url("chrome://browser/skin/preferences/saveFile.png");
+}
+
+richlistitem[appHandlerIcon="plugin"],
+menuitem[appHandlerIcon="plugin"] {
+  list-style-image: url("chrome://global/skin/icons/plugin.svg");
+}
+
+#appList {
+  min-height: 212px;
+}
+
+#appList > richlistitem {
+  -moz-box-align: center;
+}
+
+#appList > richlistitem > image {
+  margin: 5px;
+  width: 32px;
+  height: 32px;
+}
+
+#appList > richlistitem > label {
+  margin: 0px;
+  padding: 5px;
+  white-space: nowrap;
+}
diff --git a/browser/themes/windows/preferences/saveFile.png b/browser/themes/windows/preferences/saveFile.png
new file mode 100644
index 0000000000..a1089af09b
--- /dev/null
+++ b/browser/themes/windows/preferences/saveFile.png
diff --git a/browser/themes/windows/sanitizeDialog.css b/browser/themes/windows/sanitizeDialog.css
new file mode 100644
index 0000000000..dbe51cf157
--- /dev/null
+++ b/browser/themes/windows/sanitizeDialog.css
@@ -0,0 +1,16 @@
+/* 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/. */
+
+#sanitizeDurationChoice {
+  margin-inline-end: 0;
+}
+
+/* Align the duration label with the warning box and item list */
+#sanitizeDurationLabel {
+  margin-inline-start: 3px;
+}
+
+#sanitizeEverythingWarningIcon {
+  list-style-image: url("chrome://global/skin/icons/warning-large.png");
+}
diff --git a/browser/themes/windows/window-controls/close-highcontrast.svg b/browser/themes/windows/window-controls/close-highcontrast.svg
new file mode 100644
index 0000000000..b37b28a28b
--- /dev/null
+++ b/browser/themes/windows/window-controls/close-highcontrast.svg
@@ -0,0 +1,6 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <path stroke="context-stroke" stroke-width="1.9" fill="none" d="M1,1 l 10,10 M1,11 l 10,-10"/>
+</svg>
diff --git a/browser/themes/windows/window-controls/close-themes.svg b/browser/themes/windows/window-controls/close-themes.svg
new file mode 100644
index 0000000000..e6eac2fc55
--- /dev/null
+++ b/browser/themes/windows/window-controls/close-themes.svg
@@ -0,0 +1,7 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <path stroke="black" stroke-width="3.6" stroke-opacity=".75" d="M1,1 l 10,10 M1,11 l 10,-10"/>
+  <path stroke="white" stroke-width="1.9" d="M1.75,1.75 l 8.5,8.5 M1.75,10.25 l 8.5,-8.5"/>
+</svg>
diff --git a/browser/themes/windows/window-controls/close.svg b/browser/themes/windows/window-controls/close.svg
new file mode 100644
index 0000000000..9d0a252357
--- /dev/null
+++ b/browser/themes/windows/window-controls/close.svg
@@ -0,0 +1,6 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <path stroke="context-stroke" stroke-width=".9" fill="none" d="M1,1 l 10,10 M1,11 l 10,-10"/>
+</svg>
diff --git a/browser/themes/windows/window-controls/maximize-highcontrast.svg b/browser/themes/windows/window-controls/maximize-highcontrast.svg
new file mode 100644
index 0000000000..48ea6166f3
--- /dev/null
+++ b/browser/themes/windows/window-controls/maximize-highcontrast.svg
@@ -0,0 +1,6 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
+  <rect stroke="context-stroke" stroke-width="1.9" fill="none" x="2" y="2" width="8" height="8"/>
+</svg>
diff --git a/browser/themes/windows/window-controls/maximize-themes.svg b/browser/themes/windows/window-controls/maximize-themes.svg
new file mode 100644
index 0000000000..5740a992ae
--- /dev/null
+++ b/browser/themes/windows/window-controls/maximize-themes.svg
@@ -0,0 +1,7 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" fill="none">
+  <rect stroke="black" stroke-width="3.6" stroke-opacity=".75" x="2" y="2" width="8" height="8"/>
+  <rect stroke="white" stroke-width="1.9" x="2" y="2" width="8" height="8"/>
+</svg>
diff --git a/browser/themes/windows/window-controls/maximize.svg b/browser/themes/windows/window-controls/maximize.svg
new file mode 100644
index 0000000000..e9cc939af3
--- /dev/null
+++ b/browser/themes/windows/window-controls/maximize.svg
@@ -0,0 +1,6 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
+  <rect stroke="context-stroke" stroke-width=".9" fill="none" x="1.5" y="1.5" width="9" height="9"/>
+</svg>
diff --git a/browser/themes/windows/window-controls/minimize-highcontrast.svg b/browser/themes/windows/window-controls/minimize-highcontrast.svg
new file mode 100644
index 0000000000..2ba29a839d
--- /dev/null
+++ b/browser/themes/windows/window-controls/minimize-highcontrast.svg
@@ -0,0 +1,6 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <line stroke="context-stroke" stroke-width="1.9" fill="none" shape-rendering="crispEdges" x1="1" y1="6" x2="11" y2="6"/>
+</svg>
diff --git a/browser/themes/windows/window-controls/minimize-themes.svg b/browser/themes/windows/window-controls/minimize-themes.svg
new file mode 100644
index 0000000000..d74f16bdbc
--- /dev/null
+++ b/browser/themes/windows/window-controls/minimize-themes.svg
@@ -0,0 +1,7 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
+  <line stroke="black" stroke-width="3.6" stroke-opacity=".75" x1="0" y1="6" x2="12" y2="6"/>
+  <line stroke="white" stroke-width="1.9" x1="1" y1="6" x2="11" y2="6"/>
+</svg>
diff --git a/browser/themes/windows/window-controls/minimize.svg b/browser/themes/windows/window-controls/minimize.svg
new file mode 100644
index 0000000000..7ffa1fecbb
--- /dev/null
+++ b/browser/themes/windows/window-controls/minimize.svg
@@ -0,0 +1,6 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <line stroke="context-stroke" stroke-width=".9" fill="none" shape-rendering="crispEdges" x1="1" y1="5.5" x2="11" y2="5.5"/>
+</svg>
diff --git a/browser/themes/windows/window-controls/restore-highcontrast.svg b/browser/themes/windows/window-controls/restore-highcontrast.svg
new file mode 100644
index 0000000000..f2cdfa8a9c
--- /dev/null
+++ b/browser/themes/windows/window-controls/restore-highcontrast.svg
@@ -0,0 +1,7 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke" stroke-width="1.9" fill="none" shape-rendering="crispEdges">
+  <rect x="2" y="4" width="6" height="6"/>
+  <polyline points="3.5,1.5 10.5,1.5 10.5,8.5" stroke-width=".9"/>
+</svg>
diff --git a/browser/themes/windows/window-controls/restore-themes.svg b/browser/themes/windows/window-controls/restore-themes.svg
new file mode 100644
index 0000000000..e3c92f58a2
--- /dev/null
+++ b/browser/themes/windows/window-controls/restore-themes.svg
@@ -0,0 +1,8 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" fill="none" stroke="white">
+  <path stroke="black" stroke-width="3.6" stroke-opacity=".75" d="M2,4 l 6,0 l 0,6 l -6,0z M2.5,1.5 l 8,0 l 0,8"/>
+  <rect stroke-width="1.9" x="2" y="4" width="6" height="6"/>
+  <polyline stroke-width=".9" points="3.5,1.5 10.5,1.5 10.5,8.5"/>
+</svg>
diff --git a/browser/themes/windows/window-controls/restore.svg b/browser/themes/windows/window-controls/restore.svg
new file mode 100644
index 0000000000..80b71b178d
--- /dev/null
+++ b/browser/themes/windows/window-controls/restore.svg
@@ -0,0 +1,7 @@
+<!-- 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="12" height="12" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke" stroke-width=".9" fill="none" shape-rendering="crispEdges">
+  <rect x="1.5" y="3.5" width="7" height="7"/>
+  <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5"/>
+</svg>