Adding upstream version 115.7.0esr.upstream/115.7.0esr

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

182 files changed, 9890 insertions, 0 deletions

diff --git a/toolkit/themes/shared/aboutCache.css b/toolkit/themes/shared/aboutCache.css
new file mode 100644
index 0000000000..5b1b991146
--- /dev/null
+++ b/toolkit/themes/shared/aboutCache.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/. */
+
+h2 {
+  margin-top: 2em;
+}
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  margin-bottom: 1em;
+}
+
+#disk,
+#memory {
+  background-color: rgba(0, 0, 0, .1);
+}
+
+th {
+  width: 14em;
+  white-space: nowrap;
+  text-align: end;
+}
+
+td {
+  font-family: monospace;
+  word-wrap: break-word;
+}
+
+#col-key {
+  width: 60%;
+}
+
+#col-dataSize,
+#col-fetchCount,
+#col-lastModified,
+#col-expires {
+  width: 13%;
+}
+
+#col-pinned {
+  width: 5em;
+}
+
+#entries > tbody > tr:nth-child(odd) {
+  background-color: rgba(0, 0, 0, .03);
+}
+
+#entries > tbody > tr:nth-child(even) {
+  background-color: rgba(0, 0, 0, .06);
+}
+
+#entries > tbody > tr > td {
+  padding: .5em 0;
+  text-align: center;
+}
+
+#entries > thead > tr > th {
+  text-align: center;
+  white-space: normal;
+}
+
+#entries > thead > tr > th:first-child,
+#entries > tbody > tr > td:first-child {
+  text-align: start;
+}
diff --git a/toolkit/themes/shared/aboutCacheEntry.css b/toolkit/themes/shared/aboutCacheEntry.css
new file mode 100644
index 0000000000..433707d4d8
--- /dev/null
+++ b/toolkit/themes/shared/aboutCacheEntry.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/. */
+
+body {
+  display: table;
+}
+
+table {
+  table-layout: fixed;
+}
+
+th {
+  width: 12em;
+  word-wrap: break-word;
+  vertical-align: top;
+  text-align: end;
+}
+
+td {
+  display: block;
+  font-family: monospace;
+  white-space: pre-wrap;
+}
+
+#td-key {
+  word-wrap: break-word;
+}
diff --git a/toolkit/themes/shared/aboutHttpsOnlyError.css b/toolkit/themes/shared/aboutHttpsOnlyError.css
new file mode 100644
index 0000000000..04937d8f45
--- /dev/null
+++ b/toolkit/themes/shared/aboutHttpsOnlyError.css
@@ -0,0 +1,88 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.title > h2 {
+  padding: 0;
+  margin: 0;
+  font-size: 17px;
+  font-weight: 500;
+}
+
+.title {
+  background-image: url("chrome://global/content/httpsonlyerror/secure-broken.svg");
+}
+
+em {
+  font-style: normal;
+  font-weight: 600;
+}
+
+#insecure-explanation-unavailable {
+  margin-bottom: 0.5em;
+}
+#learn-more-container {
+  margin-block: 0 2em;
+}
+#explanation-continue {
+  margin-block: 2em;
+}
+
+.button-container {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: end;
+}
+
+@media only screen and (max-width: 480px) {
+  .button-container button {
+    width: 100%;
+    margin: 0.66em 0 0;
+  }
+}
+
+ul > li {
+  line-height: 1.5em;
+}
+
+.container {
+  position: relative;
+}
+
+.suggestion-box {
+  position: absolute;
+  margin-top: 3em;
+  background-image: url("chrome://global/skin/icons/lightbulb.svg");
+  background-size: 64px;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-inline-start: -5.5em;
+  padding-inline-start: 5.5em;
+  padding-bottom: 3em;
+  animation: fade-in 300ms ease-out;
+}
+
+.suggestion-box > h2 {
+  padding: 0;
+  margin: 0;
+  font-size: 17px;
+  font-weight: 500;
+}
+
+@media (max-width: 970px) {
+  .suggestion-box {
+    background-image: none;
+    padding-inline-start: 0;
+    margin-inline-start: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/toolkit/themes/shared/aboutLicense.css b/toolkit/themes/shared/aboutLicense.css
new file mode 100644
index 0000000000..9fc7055393
--- /dev/null
+++ b/toolkit/themes/shared/aboutLicense.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/. */
+
+/* License Illustration */
+
+.license-header {
+  background-image: url("chrome://global/skin/illustrations/about-license.svg");
+  background-repeat: no-repeat;
+  background-position: right center;
+  min-height: 300px;
+  display: flex;
+  align-items: center;
+  padding-inline-end: 320px;
+}
diff --git a/toolkit/themes/shared/aboutLogging.css b/toolkit/themes/shared/aboutLogging.css
new file mode 100644
index 0000000000..83a172b60c
--- /dev/null
+++ b/toolkit/themes/shared/aboutLogging.css
@@ -0,0 +1,82 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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");
+
+/** Content area **/
+.main-content {
+  width: min(90%, 1024px);
+  margin: auto;
+}
+
+.page-subsection {
+  margin-bottom: 2em;
+}
+
+.form-entry {
+  /* Center the labels with their checkboxes */
+  display: flex;
+  align-items: center;
+  margin: 0.3em 0;
+}
+
+:disabled + label {
+  opacity: 0.5;
+}
+
+#current-log-modules,
+#no-log-modules {
+  font-family: monospace;
+  margin-bottom: 1em;
+  word-break: break-word;
+}
+
+#current-log-file,
+#no-log-file {
+  font-family: monospace;
+}
+
+#profiler-configuration,
+#log-file-configuration {
+  /* 16px is the size of the radio button, 6px is its margin
+   * Then it's properly aligned with the text above. */
+  padding-inline-start: calc(16px + 6px);
+}
+
+label {
+  line-height: 1.8em;
+}
+
+input[type=text] {
+  box-sizing: border-box;
+  width: 100%;
+  font-family: monospace;
+
+  /* This cancels the default margin applied to all inputs in common-shared.css. */
+  margin-inline: 0 !important;
+}
+
+.button-row > button:first-of-type {
+  /* This cancels the default margin applied to all buttons in common-shared.css. */
+  margin-inline-start: 0;
+}
+
+.info-box {
+  padding: 1em;
+  border-radius: 4px;
+}
+
+.info-box-label {
+  font-weight: 600;
+}
+
+#error {
+  background-color: rgba(240, 40, 40, 0.5);
+  border: 1px solid rgba(240, 40, 40, 0.6);
+}
+
+#some-elements-unavailable {
+  background-color: var(--in-content-box-info-background);
+  border-color: var(--in-content-box-border-color);
+}
diff --git a/toolkit/themes/shared/aboutMemory.css b/toolkit/themes/shared/aboutMemory.css
new file mode 100644
index 0000000000..88fa27d501
--- /dev/null
+++ b/toolkit/themes/shared/aboutMemory.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 url("chrome://global/content/aboutMemory.css");
diff --git a/toolkit/themes/shared/aboutNetError.css b/toolkit/themes/shared/aboutNetError.css
new file mode 100644
index 0000000000..c84a72fce4
--- /dev/null
+++ b/toolkit/themes/shared/aboutNetError.css
@@ -0,0 +1,221 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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");
+
+body {
+  --warning-color: #ffa436;
+}
+
+@media (prefers-color-scheme: dark)  {
+  body {
+    --warning-color: #ffbd4f;
+  }
+}
+
+@media (prefers-contrast) {
+  body {
+    --warning-color: var(--in-content-page-color);
+  }
+}
+
+body.certerror {
+  width: 100%;
+}
+
+/* Normally, setting e.g. `display: flex` overrides the hidden attribute.
+ * This allows for element hiding to be controlled entirely in HTML & JS. */
+[hidden] {
+    display: none !important;
+}
+
+.title {
+  font-size: 1.75em;
+}
+
+body.captiveportal .title {
+  background-image: url("chrome://global/skin/in-content/wifi.svg");
+}
+
+body.certerror .title {
+  background-image: url("chrome://global/skin/icons/warning.svg");
+  color: var(--warning-color);
+}
+
+body.blocked .title {
+  background-image: url("chrome://global/skin/icons/blocked.svg");
+}
+
+body.clockSkewError .title {
+  background-image: none;
+  background-repeat: no-repeat;
+}
+
+.title-text {
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+/* Pressing the retry button will cause the cursor to flicker from a pointer to
+ * not-allowed. Override the disabled cursor behaviour since we will never show
+ * the button disabled as the initial state. */
+button:disabled {
+  cursor: pointer;
+}
+
+#errorWhatToDoTitle {
+  font-weight: bold;
+  margin-top: 2em;
+}
+
+#openInNewWindowContainer {
+  margin-bottom: 0;
+}
+
+#advancedPanelButtonContainer {
+  background-color: rgba(128, 128, 147, 0.1);
+  display: flex;
+  justify-content: end;
+  padding: 5px;
+  margin-top: 2em;
+}
+
+#certErrorAndCaptivePortalButtonContainer {
+  display: flex;
+}
+
+#netErrorButtonContainer > button {
+  margin-top: 1.2em;
+}
+
+#openPortalLoginPageButton {
+  margin-inline-start: 0;
+}
+
+#blockingErrorReporting {
+  padding-bottom: 10px;
+  /* Pull a bit closer to the top than the other .advanced-panel containers
+   * as this is just a checkbox. */
+  margin-top: 1.2em;
+}
+
+.advanced-panel-container {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+
+.trr-message-container {
+  background-color: var(--in-content-box-background);
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 4px;
+  padding: 10px;
+}
+
+#badCertAdvancedPanel {
+  background-color: var(--in-content-box-background);
+  border: 1px solid var(--in-content-box-border-color);
+}
+
+.advanced-panel {
+  margin: 48px auto;
+  min-width: var(--in-content-container-min-width);
+  max-width: var(--in-content-container-max-width);
+}
+
+#errorCode {
+  white-space: nowrap;
+}
+
+#viewCertificate {
+  margin: 0 3em;
+}
+
+#badCertTechnicalInfo {
+  margin: 3em 3em 1em;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+
+#certificateErrorDebugInformation {
+  background-color: var(--in-content-box-info-background) !important;
+  border-top: 1px solid var(--in-content-border-color);
+  width: 100%;
+  padding: 1em 3%;
+  box-sizing: border-box;
+}
+
+#certificateErrorText {
+  font-family: monospace;
+  white-space: pre-wrap;
+  padding: 1em 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#cert_domain_link:not([href]) {
+  color: var(--in-content-page-color);
+  text-decoration: none;
+}
+
+.clockSkewError .try-again {
+  margin-top: 0.3em;
+}
+
+#errorLongDesc strong {
+  font-weight: 600;
+}
+
+#errorShortDesc {
+  font-size: 1.15em;
+  line-height: 1.3;
+  font-weight: 400;
+  margin-top: 10px;
+}
+
+@media only screen and (max-width: 959px) {
+  #certificateErrorText {
+    /* The encoded certificate chain looks better when we're not
+     * wrapping words on big screens, but at some point we need
+     * to wrap to avoid overflowing */
+    word-wrap: anywhere;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  #badCertTechnicalInfo {
+    margin: 10px 10px 5px;
+  }
+
+  #viewCertificate {
+    margin: 0 10px;
+  }
+
+  #errorCode {
+    /* Break the error code to avoid long codes overflowing the screen */
+    white-space: normal;
+    word-wrap: anywhere;
+  }
+}
+
+@media (max-width: 970px) {
+  body.certerror .title {
+    /* !important is necessary here until Bug 1723718 is resolved */
+    background-image: url("chrome://global/skin/icons/warning.svg") !important;
+    background-position: top left;
+    padding-top: 60px;
+    margin-top: -60px;
+  }
+  /* Reduce the negative margin on small viewport sizes to avoid exceeding the
+   * 38px body vertical padding error-pages.css sets, leaving 8px space: */
+  @media (max-height: 480px) {
+    body.certerror .title {
+      margin-top: -30px;
+    }
+  }
+
+  body.certerror .title:dir(rtl) {
+    background-position-x: right;
+  }
+}
diff --git a/toolkit/themes/shared/aboutNetworking.css b/toolkit/themes/shared/aboutNetworking.css
new file mode 100644
index 0000000000..ce36ed1b66
--- /dev/null
+++ b/toolkit/themes/shared/aboutNetworking.css
@@ -0,0 +1,80 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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");
+
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+}
+
+#sectionTitle {
+  float: inline-start;
+}
+
+#refreshDiv {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-bottom: 0.5em;
+}
+
+#refreshButton {
+  margin-top: 0;
+}
+
+/** Categories **/
+
+.category {
+  cursor: pointer;
+  /* Center category names */
+  display: flex;
+  align-items: center;
+}
+
+.category .category-name {
+  pointer-events: none;
+}
+
+@media (max-width: 830px){
+  #categories > .category {
+    padding-inline-start: 5px;
+    margin-inline-start: 0;
+  }
+}
+
+/** Content area **/
+
+.main-content {
+  flex: 1;
+}
+
+.tab {
+  padding: 0.5em 0;
+}
+
+.tab table {
+  width: 100%;
+}
+
+th, td, table {
+  border-collapse: collapse;
+  border: none;
+  text-align: start;
+}
+
+th {
+  padding-bottom: 0.5em;
+  font-size: larger;
+}
+
+td {
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid var(--in-content-border-color);
+}
diff --git a/toolkit/themes/shared/aboutProfiles.css b/toolkit/themes/shared/aboutProfiles.css
new file mode 100644
index 0000000000..ed8bc729fc
--- /dev/null
+++ b/toolkit/themes/shared/aboutProfiles.css
@@ -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/. */
+
+@import url("chrome://global/skin/in-content/info-pages.css");
+
+#profiles {
+  clear: both;
+}
+
+button {
+  margin-inline: 0 8px;
+}
+
+.opendir {
+  margin-inline-start: 3px;
+}
diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css
new file mode 100644
index 0000000000..966bad06a4
--- /dev/null
+++ b/toolkit/themes/shared/aboutReader.css
@@ -0,0 +1,910 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Avoid adding ID selector rules in this style sheet, since they could
+ * inadvertently match elements in the article content. */
+
+:root {
+  --grey-90-a10: rgba(12, 12, 13, 0.1);
+  --grey-90-a20: rgba(12, 12, 13, 0.2);
+  --grey-30: #d7d7db;
+  --light-theme-background: #fff;
+  --light-theme-foreground: rgb(21, 20, 26);
+  --dark-theme-background: rgb(28, 27, 34);
+  --dark-theme-foreground: rgb(251, 251, 254);
+  --body-padding: 64px;
+  --font-size: 12;
+  --content-width: 22em;
+  --line-height: 1.6em;
+}
+
+body {
+  --main-background: var(--light-theme-background);
+  --main-foreground: var(--light-theme-foreground);
+  --primary-color: rgb(0, 97, 224);
+  --toolbar-border: var(--grey-90-a20);
+  --toolbar-transparent-border: transparent;
+  --toolbar-box-shadow: var(--grey-90-a10);
+  --toolbar-button-background: transparent;
+  --toolbar-button-background-hover: rgba(207, 207, 216, 0.66);
+  --toolbar-button-foreground-hover: var(--icon-fill);
+  --toolbar-button-background-active: rgb(207, 207, 216);
+  --toolbar-button-foreground-active: var(--primary-color);
+  --toolbar-button-border: transparent;
+  --toolbar-button-border-hover: var(--toolbar-button-border);
+  --toolbar-button-border-active: var(--toolbar-button-border);
+  --tooltip-background: var(--toolbar-button-background-active);
+  --tooltip-foreground: var(--icon-fill);
+  --tooltip-border: transparent;
+  --popup-background: #fff;
+  --popup-border: rgba(0, 0, 0, 0.12);
+  --opaque-popup-border: rgb(224, 224, 224);
+  --popup-line: var(--grey-30);
+  --popup-shadow: rgba(49, 49, 49, 0.3);
+  --popup-button-background: rgba(207, 207, 216, 0.33);
+  --popup-button-foreground: var(--main-foreground);
+  --popup-button-background-hover: var(--toolbar-button-background-hover);
+  --popup-button-foreground-hover: var(--main-foreground);
+  --popup-button-background-active: var(--toolbar-button-background-active);
+  --popup-button-border: var(--popup-border);
+  --selected-background: rgba(0, 97, 224, 0.3);
+  --selected-border: var(--primary-color);
+  --outline-focus-color: var(--primary-color);
+  --font-value-background: rgb(240, 240, 244);
+  --font-value-border: var(--grey-30);
+  --icon-fill: rgb(91, 91, 102);
+  --icon-disabled-fill: rgba(91, 91, 102, 0.4);
+  --text-selected-background: var(--selected-background);
+  --text-selected-foreground: inherit;
+  --link-foreground: var(--primary-color);
+  --link-selected-background: var(--selected-background);
+  --link-selected-foreground: #333;
+  --visited-link-foreground: #b5007f;
+  /* light colours */
+}
+
+body.sepia {
+  --main-background: rgb(244, 236, 216);
+  --main-foreground: rgb(91, 70, 54);
+  --toolbar-border: var(--main-foreground);
+  --icon-fill: var(--main-foreground);
+  --icon-disabled-fill: rgba(91, 70, 54, 0.4);
+}
+
+body.dark {
+  --main-background: var(--dark-theme-background);
+  --main-foreground: var(--dark-theme-foreground);
+  --primary-color: rgb(0, 221, 255);
+  --toolbar-border: rgba(249, 249, 250, 0.2);
+  --toolbar-box-shadow: black;
+  --toolbar-button-background-hover: rgb(82, 82, 94);
+  --toolbar-button-background-active: rgb(91, 91, 102);
+  --popup-background: rgb(66, 65, 77);
+  --opaque-popup-border: #434146;
+  --popup-line: rgba(249, 249, 250, 0.1);
+  --popup-button-background: rgb(43, 42, 51);
+  --selected-background: rgba(0, 221, 255, 0.3);
+  --font-value-background: rgba(249, 249, 250, 0.15);
+  --font-value-border: #656468;
+  --icon-fill: rgb(251, 251, 254);
+  --icon-disabled-fill: rgba(251, 251, 254, 0.4);
+  --link-selected-foreground: #fff;
+  --visited-link-foreground: #e675fd;
+  /* dark colours */
+}
+
+body.hcm {
+  --main-background: Canvas;
+  --main-foreground: CanvasText;
+  --primary-color: SelectedItem;
+  --toolbar-border: CanvasText;
+   /* We need a true transparent but in HCM this would compute to an actual color,
+      so select the page's background color instead: */
+  --toolbar-transparent-border: Canvas;
+  --toolbar-box-shadow: Canvas;
+  --toolbar-button-background: ButtonFace;
+  --toolbar-button-background-hover: SelectedItem;
+  --toolbar-button-foreground-hover: SelectedItemText;
+  --toolbar-button-background-active: SelectedItemText;
+  --toolbar-button-foreground-active: SelectedItem;
+  --toolbar-button-border: ButtonText;
+  --toolbar-button-border-hover: SelectedItemText;
+  --toolbar-button-border-active: SelectedItem;
+  --tooltip-background: Canvas;
+  --tooltip-foreground: CanvasText;
+  --tooltip-border: CanvasText;
+  --popup-background: Canvas;
+  --popup-border: CanvasText;
+  --opaque-popup-border: CanvasText;
+  --popup-line: CanvasText;
+  --popup-button-background: ButtonFace;
+  --popup-button-foreground: ButtonText;
+  --popup-button-background-hover: ButtonText;
+  --popup-button-foreground-hover: ButtonFace;
+  --popup-button-background-active: ButtonText;
+  --popup-button-border: ButtonText;
+  --selected-background: Canvas;
+  --outline-focus-color: CanvasText;
+  --font-value-background: Canvas;
+  --font-value-border: CanvasText;
+  --icon-fill: ButtonText;
+  --icon-disabled-fill: GrayText;
+  --text-selected-background: SelectedItem;
+  --text-selected-foreground: SelectedItemText;
+  --link-foreground: LinkText;
+  --link-selected-background: SelectedItem;
+  --link-selected-foreground: SelectedItemText;
+  --visited-link-foreground: VisitedText;
+}
+
+body {
+  margin: 0;
+  padding: var(--body-padding);
+  background-color: var(--main-background);
+  color: var(--main-foreground);
+}
+
+body.loaded {
+  transition: color 0.4s, background-color 0.4s;
+}
+
+*::selection {
+  background-color: var(--text-selected-background);
+  color: var(--text-selected-foreground);
+}
+
+a {
+  border-radius: 2px;
+}
+
+a::selection {
+  background-color: var(--link-selected-background);
+  color: var(--link-selected-foreground);
+}
+
+a:focus-visible {
+  outline: 2px solid var(--outline-focus-color);
+  outline-offset: 1px;
+}
+
+body.sans-serif {
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+body.serif {
+  font-family: Georgia, "Times New Roman", serif;
+}
+
+/* Override some controls and content styles based on color scheme */
+
+blockquote {
+  border-inline-start: 2px solid var(--main-foreground) !important;
+}
+
+.light-button,
+.auto-button {
+  color: var(--light-theme-foreground);
+  background-color: var(--light-theme-background);
+}
+
+@media (prefers-color-scheme: dark) {
+  .auto-button {
+    color: var(--dark-theme-foreground);
+    background-color: var(--dark-theme-background);
+  }
+}
+
+.dark-button {
+  color: var(--dark-theme-foreground);
+  background-color: var(--dark-theme-background);
+}
+
+.sepia-button {
+  color: #5b4636;
+  background-color: #f4ecd8;
+}
+
+/* Loading/error message */
+
+.reader-message {
+  margin-top: 40px;
+  display: none;
+  text-align: center;
+  width: 100%;
+  font-size: 0.9em;
+}
+
+/* Detector element to see if we're at the top of the doc or not. */
+.top-anchor {
+  position: absolute;
+  top: 0;
+  width: 0;
+  height: 5px;
+  pointer-events: none;
+}
+
+/* Header */
+
+.header {
+  text-align: start;
+  display: none;
+}
+
+.domain {
+  font-size: 0.9em;
+  line-height: 1.48em;
+  padding-bottom: 4px;
+  font-family: Helvetica, Arial, sans-serif;
+  text-decoration: underline var(--main-foreground) !important;
+  color: var(--link-foreground);
+}
+
+.header > h1 {
+  font-size: 1.6em;
+  line-height: 1.25em;
+  width: 100%;
+  margin: 30px 0;
+  padding: 0;
+}
+
+.header > .credits {
+  font-size: 0.9em;
+  line-height: 1.48em;
+  margin: 0 0 10px;
+  padding: 0;
+  font-style: italic;
+}
+
+.header > .meta-data {
+  font-size: 0.65em;
+  margin: 0 0 15px;
+}
+
+.reader-estimated-time {
+  text-align: match-parent;
+}
+
+/* Controls toolbar */
+
+.toolbar-container {
+  position: sticky;
+  z-index: 2;
+  top: 32px;
+  height: 0; /* take up no space, so body is at the top. */
+
+  /* As a stick container, we're positioned relative to the body. Move us to
+   * the edge of the viewport using margins, and take the width of
+   * the body padding into account for calculating our width.
+   */
+  margin-inline-start: calc(-1 * var(--body-padding));
+  width: max(var(--body-padding), calc((100% - var(--content-width)) / 2 + var(--body-padding)));
+  font-size: var(--font-size); /* Needed to ensure `em` units match, is reset for .reader-controls */
+}
+
+.toolbar {
+  padding-block: 16px;
+  border: 1px solid var(--toolbar-border);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px var(--toolbar-box-shadow);
+
+  width: 32px; /* basic width, without padding/border */
+
+  /* padding should be 16px, except if there's not enough space for that, in
+   * which case use half the available space for padding (=25% on each side).
+   * The 34px here is the width + borders. We use a variable because we need
+   * to know this size for the margin calculation.
+   */
+  --inline-padding: min(16px, calc(25% - 0.25 * 34px));
+  padding-inline: var(--inline-padding);
+
+  /* Keep a maximum of 96px distance to the body, but center once the margin
+   * gets too small. We need to set the start margin, however...
+   * To center, we'd want 50% of the container, but we'd subtract half our
+   * own width (16px) and half the border (1px) and the inline padding.
+   * When the other margin would be 96px, we want 100% - 96px - the complete
+   * width of the actual toolbar (34px + 2 * padding)
+   */
+  margin-inline-start: max(calc(50% - 17px - var(--inline-padding)), calc(100% - 96px - 34px - 2 * var(--inline-padding)));
+
+  font-family: Helvetica, Arial, sans-serif;
+  list-style: none;
+  user-select: none;
+
+  /* Set focus outlines to the primary color without having to specify it
+   * per each element. */
+  accent-color: var(--primary-color);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .toolbar {
+    transition-property: border-color, box-shadow;
+    transition-duration: 250ms;
+  }
+
+  .toolbar .toolbar-button {
+    transition-property: opacity;
+    transition-duration: 250ms;
+  }
+
+  .toolbar-container.scrolled > .toolbar:not(:hover, :focus-within) {
+    border-color: var(--toolbar-transparent-border);
+    box-shadow: 0 2px 8px transparent;
+  }
+
+  .toolbar-container.scrolled > .toolbar:not(:hover, :focus-within) > .reader-controls:not(.dropdown-open) .toolbar-button {
+    opacity: 0.6;
+  }
+
+  .toolbar-container.transition-location {
+    transition-duration: 250ms;
+    transition-property: width;
+  }
+}
+
+.toolbar-container.overlaps .toolbar-button {
+  opacity: 0.1;
+}
+
+.dropdown-open .toolbar {
+  border-color: var(--toolbar-transparent-border);
+  box-shadow: 0 2px 8px transparent;
+}
+
+.reader-controls {
+  /* We use `em`s above this node to get it to the right size. However,
+   * the UI inside the toolbar should use a fixed, smaller size. */
+  font-size: 11px;
+}
+
+button {
+  -moz-context-properties: fill;
+  color: var(--main-foreground);
+  fill: var(--icon-fill);
+}
+
+button:disabled {
+  /* !important to override other uses of `fill` where the specificity there is greater. */
+  fill: var(--icon-disabled-fill) !important;
+}
+
+.toolbar button::-moz-focus-inner {
+  border: 0;
+}
+
+.toolbar-button {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--toolbar-button-border);
+  border-radius: 4px;
+  margin: 4px 0;
+  background-color: var(--toolbar-button-background);
+  background-size: 16px 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.toolbar-button:hover {
+  background-color: var(--toolbar-button-background-hover);
+  border-color: var(--toolbar-button-border-hover);
+  fill: var(--toolbar-button-foreground-hover);
+}
+
+.open .toolbar-button,
+.toolbar-button:hover:active {
+  background-color: var(--toolbar-button-background-active);
+  color: var(--toolbar-button-foreground-active);
+  border-color: var(--toolbar-button-border-active);
+  fill: var(--toolbar-button-foreground-active);
+}
+
+.toolbar-button:focus-visible {
+  outline: 2px solid var(--outline-focus-color);
+  outline-offset: 2px;
+}
+
+.hover-label {
+  position: relative;
+  inset-inline-start: 36px;
+  line-height: 16px;
+  white-space: pre; /* make sure we don't wrap */
+  background-color: var(--tooltip-background);
+  color: var(--tooltip-foreground);
+  padding: 4px 8px;
+  border: 1px solid var(--tooltip-border);
+  border-radius: 2px;
+  visibility: hidden;
+  pointer-events: none;
+  /* Put above .dropdown .dropdown-popup, which has z-index: 1000. */
+  z-index: 1001;
+}
+
+/* Show the hover tooltip on non-dropdown buttons. */
+.toolbar-button:not(.dropdown-toggle):hover > .hover-label,
+.toolbar-button:not(.dropdown-toggle):focus-visible > .hover-label,
+/* Show the hover tooltip for dropdown buttons unless its dropdown is open. */
+:not(.open) > li > .dropdown-toggle:hover > .hover-label,
+:not(.open) > li > .dropdown-toggle:focus-visible > .hover-label {
+  visibility: visible;
+}
+
+.dropdown {
+  text-align: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.dropdown li {
+  margin: 0;
+  padding: 0;
+}
+
+/* Popup */
+
+.dropdown .dropdown-popup {
+  text-align: start;
+  position: absolute;
+  inset-inline-start: 40px;
+  z-index: 1000;
+  background-color: var(--popup-background);
+  visibility: hidden;
+  border-radius: 4px;
+  border: 1px solid var(--popup-border);
+  box-shadow: 0 0 10px 0 var(--popup-shadow);
+  top: 0;
+}
+
+.open > .dropdown-popup {
+  visibility: visible;
+}
+
+.dropdown-arrow {
+  position: absolute;
+  height: 24px;
+  width: 16px;
+  inset-inline-start: -16px;
+  background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
+  display: block;
+  -moz-context-properties: fill, stroke;
+  fill: var(--popup-background);
+  stroke: var(--opaque-popup-border);
+  pointer-events: none;
+}
+
+.dropdown-arrow:dir(rtl) {
+  transform: scaleX(-1);
+}
+
+/* Align the style dropdown arrow (narrate does its own) */
+.style-dropdown .dropdown-arrow {
+  top: 7px;
+}
+
+/* Font style popup */
+
+.radio-button {
+  /* We visually hide these, but we keep them around so they can be focused
+   * and changed by interacting with them via the label, or the keyboard, or
+   * assistive technology.
+   */
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.radiorow,
+.buttonrow {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+
+.content-width-value,
+.font-size-value,
+.line-height-value {
+  box-sizing: border-box;
+  width: 36px;
+  height: 20px;
+  line-height: 20px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  margin: auto;
+  border-radius: 10px;
+  border: 1px solid var(--font-value-border);
+  background-color: var(--font-value-background);
+}
+
+.buttonrow > button {
+  border: 0;
+  height: 60px;
+  width: 90px;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  fill: var(--popup-button-foreground);
+}
+
+.buttonrow > button:enabled:hover {
+  background-color: var(--popup-button-background-hover);
+  fill: var(--popup-button-foreground-hover);
+}
+
+.buttonrow > button:enabled:hover:active {
+  background-color: var(--popup-button-background-active);
+}
+
+.buttonrow > button:enabled:focus-visible {
+  outline: 2px solid var(--outline-focus-color);
+  outline-offset: -2px;
+}
+
+.radiorow:not(:last-child),
+.buttonrow:not(:last-child) {
+  border-bottom: 1px solid var(--popup-line);
+}
+
+body.hcm .buttonrow.line-height-buttons {
+  /* On HCM the .color-scheme-buttons row is hidden, so remove the border from the row above it */
+  border-bottom: none;
+}
+
+.radiorow > label {
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 2px;
+  border: 2px solid var(--popup-button-border);
+}
+
+.radiorow > label[checked] {
+  border-color: var(--selected-border);
+}
+
+/* For the hover style, we draw a line under the item by means of a
+ * pseudo-element. Because these items are variable height, and
+ * because their contents are variable height, position it absolutely,
+ * and give it a width of 100% (the content width) + 4px for the 2 * 2px
+ * border width.
+ */
+.radiorow > input[type=radio]:focus-visible + label::after,
+.radiorow > label:hover::after {
+  content: "";
+  display: block;
+  border-bottom: 2px solid var(--selected-border);
+  border-radius: 4px;
+  width: calc(100% + 4px);
+  position: absolute;
+  /* to skip the 2 * 2px border + 2px spacing. */
+  bottom: -6px;
+  /* Match the start of the 2px border of the element: */
+  inset-inline-start: -2px;
+}
+
+.font-type-buttons > label {
+  height: 64px;
+  width: 105px;
+  /* Slightly more space between these items. */
+  margin: 10px;
+  /* Center the Sans-serif / Serif labels */
+  text-align: center;
+  background-size: 63px 39px;
+  background-repeat: no-repeat;
+  background-position: center 18px;
+  background-color: var(--popup-button-background);
+  color: var(--popup-button-foreground);
+  fill: currentColor;
+  -moz-context-properties: fill;
+  /* This mostly matches baselines, but because of differences in font
+   * baselines between serif and sans-serif, this isn't always enough. */
+  line-height: 1;
+  padding-top: 2px;
+}
+
+.font-type-buttons > label[checked] {
+  background-color: var(--selected-background);
+}
+
+.sans-serif-button {
+  font-family: Helvetica, Arial, sans-serif;
+  background-image: url("chrome://global/skin/reader/RM-Sans-Serif.svg");
+}
+
+/* Tweak padding to match the baseline on mac */
+:root[platform=macosx] .sans-serif-button {
+  padding-top: 3px;
+}
+
+.serif-button {
+  font-family: Georgia, "Times New Roman", serif;
+  background-image: url("chrome://global/skin/reader/RM-Serif.svg");
+}
+
+body.hcm .color-scheme-buttons {
+  /* Disallow selecting themes when HCM is on. */
+  display: none;
+}
+
+.color-scheme-buttons > label {
+  padding: 12px;
+  height: 34px;
+  font-size: 12px;
+  /* Center the labels horizontally as well as vertically */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* We want 10px between items, but there's no margin collapsing in flexbox. */
+  margin: 10px 5px;
+}
+
+.color-scheme-buttons > input:first-child + label {
+  margin-inline-start: 10px;
+}
+
+.color-scheme-buttons > label:last-child {
+  margin-inline-end: 10px;
+}
+
+/* Toolbar icons */
+
+.close-button {
+  background-image: url("chrome://global/skin/icons/close.svg");
+}
+
+.style-button {
+  background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
+}
+
+.minus-button {
+  background-size: 18px 18px;
+  background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
+}
+
+.plus-button {
+  background-size: 18px 18px;
+  background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
+}
+
+.content-width-minus-button {
+  background-size: 42px 16px;
+  background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
+}
+
+.content-width-plus-button {
+  background-size: 44px 16px;
+  background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
+}
+
+.line-height-minus-button {
+  background-size: 34px 14px;
+  background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
+}
+
+.line-height-plus-button {
+  background-size: 34px 24px;
+  background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
+}
+
+/* Mirror the line height buttons if the article is RTL. */
+.reader-controls[articledir="rtl"] .line-height-minus-button,
+.reader-controls[articledir="rtl"] .line-height-plus-button {
+  transform: scaleX(-1);
+}
+
+@media print {
+  .toolbar {
+    display: none !important;
+  }
+}
+
+/* Article content */
+
+/* Note that any class names from the original article that we want to match on
+ * must be added to CLASSES_TO_PRESERVE in ReaderMode.sys.mjs, so that
+ * Readability.js doesn't strip them out */
+
+.container {
+  margin: 0 auto;
+  font-size: var(--font-size);
+  max-width: var(--content-width);
+  line-height: var(--line-height);
+}
+
+pre {
+  font-family: inherit;
+}
+
+.moz-reader-content {
+  display: none;
+  font-size: 1em;
+}
+
+@media print {
+  .moz-reader-content p,
+  .moz-reader-content code,
+  .moz-reader-content pre,
+  .moz-reader-content blockquote,
+  .moz-reader-content ul,
+  .moz-reader-content ol,
+  .moz-reader-content li,
+  .moz-reader-content figure,
+  .moz-reader-content .wp-caption {
+    margin: 0 0 10px !important;
+    padding: 0 !important;
+  }
+}
+
+.moz-reader-content h1,
+.moz-reader-content h2,
+.moz-reader-content h3 {
+  font-weight: bold;
+}
+
+.moz-reader-content h1 {
+  font-size: 1.6em;
+  line-height: 1.25em;
+}
+
+.moz-reader-content h2 {
+  font-size: 1.2em;
+  line-height: 1.51em;
+}
+
+.moz-reader-content h3 {
+  font-size: 1em;
+  line-height: 1.66em;
+}
+
+.moz-reader-content a:link {
+  text-decoration: underline;
+  font-weight: normal;
+}
+
+.moz-reader-content a:link,
+.moz-reader-content a:link:hover,
+.moz-reader-content a:link:active {
+  color: var(--link-foreground);
+}
+
+.moz-reader-content a:visited {
+  color: var(--visited-link-foreground);
+}
+
+.moz-reader-content * {
+  max-width: 100%;
+  height: auto;
+}
+
+.moz-reader-content p,
+.moz-reader-content p,
+.moz-reader-content code,
+.moz-reader-content pre,
+.moz-reader-content blockquote,
+.moz-reader-content ul,
+.moz-reader-content ol,
+.moz-reader-content li,
+.moz-reader-content figure,
+.moz-reader-content .wp-caption {
+  margin: -10px -10px 20px;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.moz-reader-content li {
+  margin-bottom: 0;
+}
+
+.moz-reader-content li > ul,
+.moz-reader-content li > ol {
+  margin-bottom: -10px;
+}
+
+.moz-reader-content p > img:only-child,
+.moz-reader-content p > a:only-child > img:only-child,
+.moz-reader-content .wp-caption img,
+.moz-reader-content figure img {
+  display: block;
+}
+
+.moz-reader-content img[moz-reader-center] {
+  margin-inline: auto;
+}
+
+.moz-reader-content .caption,
+.moz-reader-content .wp-caption-text
+.moz-reader-content figcaption {
+  font-size: 0.9em;
+  line-height: 1.48em;
+  font-style: italic;
+}
+
+.moz-reader-content pre {
+  white-space: pre-wrap;
+}
+
+.moz-reader-content blockquote {
+  padding: 0;
+  padding-inline-start: 16px;
+}
+
+.moz-reader-content ul,
+.moz-reader-content ol {
+  padding: 0;
+}
+
+.moz-reader-content ul {
+  padding-inline-start: 30px;
+  list-style: disc;
+}
+
+.moz-reader-content ol {
+  padding-inline-start: 30px;
+}
+
+table,
+th,
+td {
+  border: 1px solid currentColor;
+  border-collapse: collapse;
+  padding: 6px;
+  vertical-align: top;
+}
+
+table {
+  margin: 5px;
+}
+
+/* Visually hide (but don't display: none) screen reader elements */
+.moz-reader-content .visually-hidden,
+.moz-reader-content .visuallyhidden,
+.moz-reader-content .sr-only {
+  display: inline-block;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  border-width: 0;
+}
+
+/* Hide elements with common "hidden" class names */
+.moz-reader-content .hidden,
+.moz-reader-content .invisible {
+  display: none;
+}
+
+/* Enforce wordpress and similar emoji/smileys aren't sized to be full-width,
+ * see bug 1399616 for context. */
+.moz-reader-content img.wp-smiley,
+.moz-reader-content img.emoji {
+  display: inline-block;
+  border-width: 0;
+  /* height: auto is implied from `.moz-reader-content *` rule. */
+  width: 1em;
+  margin: 0 .07em;
+  padding: 0;
+}
+
+.reader-show-element {
+  display: initial;
+}
+
+/* Provide extra spacing for images that may be aided with accompanying element such as <figcaption> */
+.moz-reader-block-img:not(:last-child) {
+  margin-block-end: 12px;
+}
+
+.moz-reader-wide-table {
+  overflow-x: auto;
+  display: block;
+}
+
+pre code {
+  background-color: var(--main-background);
+  border: 1px solid var(--main-foreground);
+  display: block;
+  overflow: auto;
+}
diff --git a/toolkit/themes/shared/aboutReaderPocket.css b/toolkit/themes/shared/aboutReaderPocket.css
new file mode 100644
index 0000000000..ff163d7798
--- /dev/null
+++ b/toolkit/themes/shared/aboutReaderPocket.css
@@ -0,0 +1,246 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#pocket-cta-container {
+  box-shadow: 0 2px 8px var(--toolbar-box-shadow);
+  margin: calc(var(--body-padding) * -1);
+  margin-top: 20px;
+  padding: 32px 0;
+  position: relative;
+}
+
+.pocket-cta-container-cta-only #pocket-cta-only,
+.pocket-cta-container-cta-and-recs #pocket-cta-and-recs {
+  display: block;
+}
+
+.pocket-cta {
+  padding-inline-start: 90px;
+  background: url("chrome://global/skin/reader/RM-Pocket-Glyph.svg") no-repeat 16px 4px;
+  line-height: 1.5;
+}
+
+body.dark .pocket-cta {
+  background-image: url("chrome://global/skin/reader/RM-Pocket-Glyph-Dark.svg");
+}
+
+body.sepia .pocket-cta {
+  background-image: url("chrome://global/skin/reader/RM-Pocket-Glyph-Sepia.svg");
+}
+
+.pocket-cta-inner {
+  width: 936px;
+  margin: auto;
+  display: none;
+}
+
+.pocket-cta-header {
+  font-weight: 900;
+  font-size: 20px;
+  line-height: 1.2;
+}
+
+.pocket-cta-subhead {
+  margin: 4px 0 24px;
+  line-height: 1.5;
+}
+
+.pocket-btn {
+  background: #008078;
+  border-radius: 4px;
+  border: 0;
+  color: #FBFBFE;
+  font-size: 16px;
+  padding: 12px 24px;
+  text-decoration: none;
+  text-align: center;
+}
+
+.pocket-btn:hover,
+.pocket-btn:focus,
+.pocket-btn:active {
+  background: #004d48;
+}
+
+.pocket-dismiss-cta {
+  cursor: pointer;
+  display: inline-block;
+  position: absolute;
+  inset-inline-end: 80px;
+  top: calc(50% - 9px);
+  border: 0;
+  width: 18px;
+  height: 18px;
+  background: no-repeat center/contain url("chrome://global/skin/icons/close.svg");
+}
+
+.pocket-btn-add {
+  background: no-repeat left center url("chrome://global/skin/icons/pocket-outline.svg");
+  fill: #5B5B66;
+  background-size: 16px;
+  border: 0;
+  padding-inline-start: 20px;
+  font-size: 16px;
+  color: #5B5B66;
+  cursor: pointer;
+}
+
+body.dark .pocket-btn-add {
+  fill: #eee;
+  color: #eee;
+}
+
+.pocket-btn-add:hover,
+body.dark .pocket-btn-add:hover {
+  fill: #EF4056;
+}
+
+.pocket-btn-add.saved,
+body.dark .pocket-btn-add.saved {
+  background-image: url("chrome://global/skin/icons/pocket.svg");
+}
+
+.pocket-collapse-recs {
+  cursor: pointer;
+  background: no-repeat center/contain url("chrome://global/skin/icons/arrow-down.svg");
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: 18px;
+  height: 30px;
+}
+
+.pocket-collapse-recs.closed {
+  transform: rotate(-90deg);
+}
+
+.pocket-recs-top {
+  display: flex;
+}
+
+.pocket-recs-top .col:nth-child(2) {
+  padding-inline-start: 8px;
+}
+
+.pocket-recs {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+
+.pocket-recs.closed {
+  display: none;
+}
+
+.pocket-recs p {
+  text-align: start;
+}
+
+.pocket-rec {
+  padding: 16px 0;
+  width: 31%;
+}
+
+.pocket-rec-top {
+  display: flex;
+  text-decoration: none;
+}
+
+.pocket-sign-up-wrapper {
+  text-align: center;
+}
+
+.pocket-rec .pocket-rec-title {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--main-foreground);
+}
+
+.pocket-rec .pocket-rec-thumb {
+  width: 66px;
+  height: 66px;
+  filter: drop-shadow(0px 2px 6px rgba(58, 57, 68, 0.2));
+  border-radius: 4px;
+  margin-inline-start: 16px;
+  visibility: hidden;
+}
+
+.pocket-rec .pocket-rec-thumb.pocket-rec-thumb-loaded {
+  visibility: visible;
+}
+
+.pocket-rec .pocket-rec-meta {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 20px;
+  color: #5B5B66;
+}
+
+body.dark .pocket-rec .pocket-rec-meta {
+  color: #eee;
+}
+
+.pocket-cta-container-logged-in #pocket-cta-only .pocket-sign-up,
+.pocket-cta-container-logged-out #pocket-cta-only .pocket-discover-more {
+  display: none;
+}
+
+/* Medium breakpoint */
+@media (max-width: 1128px) {
+  .pocket-cta-inner {
+    width: 600px;
+  }
+
+  .pocket-dismiss-cta {
+    inset-inline-end: 40px;
+  }
+
+  .pocket-rec {
+    width: 48%;
+  }
+
+  .pocket-rec:nth-child(3) {
+    display: none;
+  }
+}
+
+/* Small breakpoint */
+@media (max-width: 767px) {
+  .pocket-cta-inner {
+    width: 330px;
+    text-align: center;
+  }
+
+  .pocket-cta-header,
+  .pocket-cta-subhead,
+  .pocket-rec-bottom,
+  .pocket-rec-title {
+    text-align: start;
+  }
+
+  .pocket-cta {
+    padding: 66px 0 0;
+    background: url("chrome://global/skin/reader/RM-Pocket-Glyph.svg") no-repeat center 0;
+  }
+
+  .pocket-dismiss-cta {
+    inset-inline-end: 20px;
+    top: 20px;
+  }
+
+  .pocket-recs {
+    display: block;
+  }
+
+  .pocket-rec {
+    width: 100%;
+  }
+
+  .pocket-rec:nth-child(2) {
+    display: block;
+  }
+}
diff --git a/toolkit/themes/shared/aboutRights.css b/toolkit/themes/shared/aboutRights.css
new file mode 100644
index 0000000000..c988defaf7
--- /dev/null
+++ b/toolkit/themes/shared/aboutRights.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/. */
+
+/* Rights Illustration */
+
+.rights-header {
+  background-image: url("chrome://global/skin/illustrations/about-rights.svg");
+  background-repeat: no-repeat;
+  background-position: right center;
+  min-height: 300px;
+  display: flex;
+  align-items: center;
+  padding-inline-end: 320px;
+}
+
+.rights-header:dir(rtl) {
+  background-position: left center;
+}
diff --git a/toolkit/themes/shared/aboutServiceWorkers.css b/toolkit/themes/shared/aboutServiceWorkers.css
new file mode 100644
index 0000000000..857050460f
--- /dev/null
+++ b/toolkit/themes/shared/aboutServiceWorkers.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/. */
+
+.warningBackground {
+  display: none;
+  background-color: var(--in-content-page-background);
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  top: 0;
+  inset-inline-start: 0;
+  position: fixed;
+}
+
+.warningMessage {
+  min-width: 330px;
+  max-width: 50em;
+  margin: 4em auto;
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 10px;
+  padding: 3em;
+  background-color: var(--in-content-box-background);
+  text-align: center;
+}
+
+.active {
+  display: block;
+}
+
+.inactive {
+  display: none;
+}
diff --git a/toolkit/themes/shared/aboutSupport.css b/toolkit/themes/shared/aboutSupport.css
new file mode 100644
index 0000000000..cfec5cdb21
--- /dev/null
+++ b/toolkit/themes/shared/aboutSupport.css
@@ -0,0 +1,91 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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");
+
+#contents {
+  clear: both;
+}
+
+.major-section {
+  margin-block: 2em 1em;
+  font-size: large;
+  text-align: start;
+  font-weight: bold;
+}
+
+button {
+  margin-inline: 0 8px;
+}
+
+th.title-column {
+  white-space: nowrap;
+  width: 0;
+  font-size: medium;
+}
+
+td.integer {
+  text-align: end;
+  font-family: monospace;
+}
+
+#update-dir-row > td:dir(rtl),
+#profile-row > td:dir(rtl) {
+  /* Overrides info-pages.css to display the buttons in the right order compared to the text */
+  unicode-bidi: normal;
+}
+
+.prefs-table {
+  table-layout: fixed;
+}
+
+.pref-name {
+  width: 70%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.pref-value {
+  width: 30%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#crashes-table th:first-child {
+  width: 50%;
+}
+
+#features-table th:first-child,
+#remote-processes-table th:first-child {
+  width: 30%;
+}
+
+#features-table th:nth-child(2) {
+  width: 20%;
+}
+
+#reset-box,
+#safe-mode-box {
+  display: none;
+}
+
+#reset-box > h3 {
+  margin-top: 0;
+}
+
+.action-box button {
+  display: block;
+}
+
+#enumerate-database-result,
+#verify-place-result {
+  max-height: 200px;
+  overflow: auto;
+  text-align: left;
+  direction: ltr;
+}
+
+.hidden {
+  display: none;
+}
diff --git a/toolkit/themes/shared/alert.css b/toolkit/themes/shared/alert.css
new file mode 100644
index 0000000000..e4c86fe15a
--- /dev/null
+++ b/toolkit/themes/shared/alert.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/. */
+
+@import url("chrome://global/skin/global.css");
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+#alertBox {
+  border: 1px solid threedshadow;
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+}
+
+@media (-moz-platform: windows) {
+  #alertNotification {
+    appearance: none;
+    background: transparent;
+  }
+
+  #alertBox {
+    margin: 10px;
+    border-radius: 1px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.59);
+  }
+
+  @media (-moz-windows-default-theme) and (prefers-color-scheme: light) {
+    #alertBox {
+      border-color: rgba(107,107,107,.3);
+      background-color: rgba(255,255,255,.9);
+      color: rgba(0,0,0,.9);
+    }
+  }
+}
+
+@media (-moz-platform: macos) {
+  #alertNotification {
+    appearance: none;
+    background: transparent;
+  }
+
+  #alertBox {
+    border-radius: 1px;
+  }
+}
+
+#alertBox[animate] {
+  animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
+}
+
+#alertBox[animate][clicked] {
+  animation-duration: .6s;
+  animation-name: alert-clicked-animation;
+}
+
+/* This is used if the close button is clicked
+   before the animation has finished. */
+#alertBox[animate][closing] {
+  animation-duration: .6s;
+  animation-name: alert-closing-animation;
+}
+
+#alertBox[animate]:not([clicked], [closing]):hover {
+  /* !important is necessary because CSS animations have highest
+     importance in the cascade with exception to !important rules. */
+  opacity: 1 !important;
+}
+
+@keyframes alert-animation {
+  from {
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes alert-clicked-animation {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes alert-closing-animation {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+#alertIcon {
+  margin-top: 6px;
+  margin-inline-start: 8px;
+  margin-inline-end: 0;
+  margin-bottom: 0;
+  width: 16px;
+  min-height: 16px;
+  max-height: 16px;
+}
+
+@media (resolution: 2dppx) {
+  #alertIcon {
+    image-rendering: -moz-crisp-edges;
+  }
+}
+
+#alertImage {
+  width: 80px;
+  height: 80px;
+  max-width: 80px;
+  max-height: 80px;
+  object-fit: scale-down;
+  margin: 0 7px 7px;
+}
+
+.alertTextBox {
+  padding-top: 4px;
+  /* The text box width is increased to make up for the lack of image when one
+     is not provided. 349px is the text box width when a picture is present,
+     255px, plus the width of the image, 80px, and the margins, 7px each. */
+  width: 349px;
+}
+
+#alertBox[hasImage] > box > #alertTextBox {
+  width: 255px;
+}
+
+#alertBox:not([hasImage]) > box > #alertTextBox {
+  padding-inline-start: 8px;
+}
+
+#alertTextLabel {
+  padding-inline-end: 8px;
+}
+
+.alertTitle {
+  flex: 1;
+  font-weight: bold;
+  padding: 6px 8px 0;
+  width: 255px;
+}
+
+#alertFooter {
+  align-items: flex-start;
+}
+
+#alertBox:not([hasOrigin]) > box > #alertTextBox,
+#alertFooter {
+  padding-bottom: 5px;
+}
+
+#alertSourceLabel {
+  flex: 1;
+  font-size: 83.334%;
+  color: GrayText;
+}
+
+#alertSettings {
+  appearance: none;
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 20px;
+  min-width: 0;
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-inline-end: 4px;
+  margin-bottom: 0;
+}
+
+#alertSettings > .button-box {
+  padding: 0;
+}
+
+#alertSettings .button-icon {
+  margin: 0;
+}
+
+#alertSettings:hover,
+#alertSettings[open] {
+  fill: #ddd;
+}
+
+#alertSettings:hover {
+  background-color: rgb(128,128,128);
+}
+
+#alertSettings[open],
+#alertSettings:hover:active {
+  background-color: rgb(102,102,102);
+}
+
+#alertSettings[focusedViaMouse]:-moz-focusring {
+  outline: none;
+}
+
+#alertSettings > .button-box > .button-menu-dropmarker,
+#alertSettings > .button-box > .box-inherit > .button-text {
+  display: none;
+}
diff --git a/toolkit/themes/shared/appPicker.css b/toolkit/themes/shared/appPicker.css
new file mode 100644
index 0000000000..aa4b905797
--- /dev/null
+++ b/toolkit/themes/shared/appPicker.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/. */
+
+
+#app-picker {
+  min-width: 320px;
+}
+
+#content-description {
+  font-weight: bold;
+}
+
+#app-picker-listbox {
+  height: 212px;
+}
+
+#app-picker-listbox > richlistitem {
+  align-items: center;
+}
+
+#content-icon,
+#app-picker-listbox > richlistitem > image {
+  margin: 5px;
+  width: 32px;
+  height: 32px;
+}
+
+#app-picker-listbox > richlistitem > label {
+  margin: 0px;
+  padding: 5px;
+  white-space: nowrap;
+}
diff --git a/toolkit/themes/shared/arrowscrollbox.css b/toolkit/themes/shared/arrowscrollbox.css
new file mode 100644
index 0000000000..ff8cbec3cc
--- /dev/null
+++ b/toolkit/themes/shared/arrowscrollbox.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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+:host([scrolledtostart=true])::part(overflow-start-indicator),
+:host([scrolledtoend=true])::part(overflow-end-indicator),
+:host(:not([overflowing=true])) > toolbarbutton {
+  visibility: collapse;
+}
+
+/* Scroll arrows */
+
+toolbarbutton {
+  color: inherit;
+  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 1;
+  padding: 2px;
+}
+
+toolbarbutton[disabled="true"] {
+  fill-opacity: var(--toolbarbutton-disabled-opacity);
+}
+
+:host([orient="horizontal"]) > toolbarbutton {
+  list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
+}
+
+#scrollbutton-up > .toolbarbutton-icon {
+  transform: scaleY(-1);
+}
+
+:host([orient="horizontal"]) > #scrollbutton-down:-moz-locale-dir(ltr) > .toolbarbutton-icon,
+:host([orient="horizontal"]) > #scrollbutton-up:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+  transform: scaleX(-1);
+}
+
+toolbarbutton > .toolbarbutton-text {
+  display: none;
+}
+
+@media not (-moz-platform: macos) {
+  :host(:not([clicktoscroll="true"])) > toolbarbutton {
+    appearance: none;
+  }
+}
+
+scrollbox,
+.scrollbox-clip {
+  min-width: 0;
+  min-height: 0;
+}
diff --git a/toolkit/themes/shared/checkbox.css b/toolkit/themes/shared/checkbox.css
new file mode 100644
index 0000000000..725c995a4d
--- /dev/null
+++ b/toolkit/themes/shared/checkbox.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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+checkbox {
+  appearance: none;
+  align-items: center;
+  margin: 4px 2px;
+}
+
+.checkbox-icon[src] {
+  margin-inline-end: 2px;
+}
+
+.checkbox-label {
+  margin: 1px 0;
+}
+
+/* ..... disabled state ..... */
+
+checkbox[disabled="true"] {
+  opacity: 0.4;
+}
+
+/* ::::: checkmark image ::::: */
+
+.checkbox-check {
+  appearance: none;
+  color: var(--checkbox-border-color, ThreeDShadow);
+  background-color: var(--checkbox-unchecked-bgcolor, Field);
+  border: 1px solid currentColor;
+  border-radius: 2px;
+  margin-inline-end: 6px;
+}
+
+.checkbox-check:not([native]) {
+  height: 16px;
+  width: 16px;
+}
+
+checkbox:not([disabled="true"]):hover > .checkbox-check {
+  background-color: var(--checkbox-unchecked-hover-bgcolor, color-mix(in srgb, AccentColor 4%, Field));
+}
+
+checkbox:not([disabled="true"]):hover:active > .checkbox-check {
+  background-color: var(--checkbox-unchecked-active-bgcolor, color-mix(in srgb, AccentColor 8%, Field));
+}
+
+.checkbox-check[checked] {
+  border-color: var(--checkbox-checked-border-color, transparent);
+  background-color: var(--checkbox-checked-bgcolor, AccentColor);
+  background-image: url("chrome://global/skin/icons/check.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  color: var(--checkbox-checked-color, AccentColorText);
+  /* Style the button also when printing with "Print Backgrounds" unchecked */
+  color-adjust: exact;
+}
+
+checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
+  background-color: var(--checkbox-checked-hover-bgcolor, color-mix(in srgb, currentColor 12.5%, AccentColor));
+}
+
+checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
+  background-color: var(--checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 25%, AccentColor));
+}
+
+checkbox:not([native]):focus-visible > .checkbox-check {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+@media (prefers-contrast) {
+  checkbox:not([disabled="true"]):hover > .checkbox-check {
+    /* color will set the border-color on the check due to how HCM works for in-content pages. */
+    color: var(--checkbox-checked-border-color, color-mix(in srgb, AccentColor 4%, Field));
+  }
+
+  checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
+  checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
+    color: var(--checkbox-checked-border-color, AccentColorText);
+    fill: var(--checkbox-checked-color, AccentColorText);
+    background-color: var(--checkbox-checked-bgcolor, AccentColor);
+  }
+}
+
+/* ..... Platform overrides ..... */
+
+@media (-moz-platform: windows) {
+  checkbox:where([native]) {
+    appearance: auto;
+    -moz-default-appearance: checkbox-container;
+    align-items: center;
+    margin: 2px 4px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    padding-inline-start: 4px;
+    padding-inline-end: 2px;
+  }
+
+  .checkbox-label[native] {
+    margin: 0;
+  }
+
+  /* ..... focused state ..... */
+
+  checkbox[native]:focus-visible > .checkbox-label-box {
+    outline: var(--focus-outline);
+  }
+
+  /* ..... disabled state ..... */
+
+  checkbox[native][disabled="true"] {
+    color: GrayText;
+  }
+
+  @media (-moz-windows-classic) {
+    checkbox[native][disabled="true"] {
+      color: ThreeDShadow;
+      text-shadow: 1px 1px ThreeDHighlight;
+    }
+  }
+
+  /* ::::: checkmark image ::::: */
+
+  .checkbox-check[native] {
+    appearance: auto;
+    -moz-default-appearance: checkbox;
+    align-items: center;
+    margin-inline-end: 5px;
+  }
+}
+
+@media (-moz-platform: macos) {
+  checkbox:where([native]) {
+    appearance: auto;
+    -moz-default-appearance: checkbox-container;
+    align-items: center;
+    margin: 4px 2px;
+  }
+
+  .checkbox-label[native] {
+    margin: 1px 0;
+  }
+
+  /* ..... disabled state ..... */
+
+  checkbox[native][disabled="true"] {
+    color: GrayText;
+  }
+
+  /* ::::: checkmark image ::::: */
+
+  .checkbox-check[native] {
+    appearance: auto;
+    -moz-default-appearance: checkbox;
+    margin-block: 1px 0;
+    margin-inline: 1px 3px;
+    /* vertical-align tells native theming where to snap to. However, this doesn't
+     * always work reliably because of bug 503833. */
+    vertical-align: top;
+    width: 1.3em;
+    height: 1.3em;
+  }
+}
+
+@media (-moz-platform: linux) {
+  checkbox:where([native]) {
+    appearance: auto;
+    -moz-default-appearance: checkbox-container;
+    align-items: center;
+    margin: 2px 4px;
+  }
+
+  .checkbox-label-box[native] {
+    appearance: auto;
+    -moz-default-appearance: checkbox-label;
+  }
+
+  .checkbox-label[native] {
+    margin: 0;
+  }
+
+  /* ..... focused state ..... */
+
+  checkbox[native]:focus-visible > .checkbox-label-box {
+    /* Native theming should take care of this but it appears to be broken with
+       some Gtk themes. Bug 1312169. */
+    outline: var(--focus-outline);
+  }
+
+  /* ..... disabled state ..... */
+
+  checkbox[native][disabled="true"] {
+    color: GrayText;
+  }
+
+  /* ::::: checkmark image ::::: */
+
+  .checkbox-check[native] {
+    appearance: auto;
+    -moz-default-appearance: checkbox;
+    margin: 2px;
+    margin-inline-end: 4px;
+  }
+}
diff --git a/toolkit/themes/shared/close-icon.css b/toolkit/themes/shared/close-icon.css
new file mode 100644
index 0000000000..35d7463276
--- /dev/null
+++ b/toolkit/themes/shared/close-icon.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/. */
+
+.close-icon {
+  appearance: none;
+  -moz-context-properties: fill, fill-opacity;
+  list-style-image: url(chrome://global/skin/icons/close.svg);
+  border-radius: 4px;
+  color: inherit;
+  fill: currentColor;
+  padding: 2px;
+  width: 20px;
+  height: auto;
+}
+
+@media not (prefers-contrast) {
+  .close-icon:hover {
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+}
+
+@media (prefers-contrast) {
+  .close-icon:hover {
+    outline: 1px solid currentColor;
+  }
+}
+
+.close-icon:hover:active {
+  background-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+
+.close-icon > .button-icon,
+.close-icon > .button-box > .button-icon,
+.close-icon > .toolbarbutton-icon {
+  margin: 0;
+}
+
+.close-icon > .button-box > .button-text,
+.close-icon > .toolbarbutton-text {
+  display: none;
+}
diff --git a/toolkit/themes/shared/commonDialog.css b/toolkit/themes/shared/commonDialog.css
new file mode 100644
index 0000000000..1670241103
--- /dev/null
+++ b/toolkit/themes/shared/commonDialog.css
@@ -0,0 +1,70 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#commonDialog[subdialog] .checkbox-label {
+  color: var(--text-color-deemphasized);
+}
+
+@media (-moz-platform: windows) {
+  #infoContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  #infoIcon {
+    margin: 3px 5px 4px;
+  }
+}
+
+@media (-moz-platform: macos) {
+  #commonDialog:not([subdialog]) {
+    line-height: 13px;
+  }
+
+  #commonDialog:not([subdialog]) #infoTitle,
+  #commonDialog:not([subdialog]) #infoBody {
+    font: menu;
+    line-height: 16px;
+    margin-bottom: 6px;
+  }
+
+  #infoContainer {
+    max-width: 33em;
+  }
+
+  #infoIcon {
+    margin: 3px 5px 4px;
+    margin-inline-end: 14px;
+  }
+
+  #commonDialog:not([subdialog]) #infoTitle {
+    font-weight: bold;
+  }
+}
+
+@media (-moz-platform: linux) {
+  #infoContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  /*
+   * Since we size the window to content, and the icon load is asynchronous, we
+   * make sure that we take the whole space we could possibly take, regardless of
+   * whether the icon is loaded.
+   */
+  #iconContainer {
+    height: 55px; /* maximum icon height + some margin */
+    width: 58px; /* maximum icon width + some margin */
+  }
+
+  #infoIcon {
+    display: block;
+    max-width: 48px;
+    max-height: 48px;
+    margin: 3px auto 0;
+  }
+}
diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css
new file mode 100644
index 0000000000..4a663b792b
--- /dev/null
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@@ -0,0 +1,382 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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 {
+  --border-style: 0.1rem solid;
+  --border-radius: 0.3rem;
+  --border-color: ButtonBorder;
+  --button-color: ButtonText;
+  --button-color-hover: SelectedItemText;
+  --button-color-active: SelectedItem;
+  --button-background: ButtonFace;
+  --button-background-hover: SelectedItem;
+  --button-background-active: SelectedItemText;
+  --button-border-hover: SelectedItem;
+  --button-border-active: SelectedItem;
+  --today-background: Mark;
+  --today-color: MarkText;
+  --navigation-arrow-color-hover: SelectedItemText;
+  --navigation-arrow-color-active: SelectedItem;
+  --navigation-arrow-background-hover: SelectedItem;
+  --navigation-arrow-background-active: SelectedItemText;
+  --navigation-arrow-border-hover: SelectedItem;
+  --navigation-arrow-border-active: SelectedItem;
+  --navigation-arrow-fill-opacity: 1;
+  --navigation-arrow-fill-opacity-hover: 1;
+  --navigation-arrow-fill-opacity-active: 1;
+  --calendar-item-background-hover: color-mix(in srgb, FieldText 20%, transparent);
+
+  /* Use -moz-activehyperlinktext to get a system color that
+     by default will be closest to Red */
+  --weekend-font-color: -moz-activehyperlinktext;
+
+  --disabled-background-color: ButtonShadow;
+
+  /* TODO: these need to be in sync (ish) with DateTimePickerPanel.sys.mjs */
+  font-size: 10px;
+  --font-size-default: 1.1rem;
+  --spinner-width: 3rem;
+  --spinner-margin-block: 0.4rem;
+  --spinner-item-height: 2.4rem;
+  --spinner-item-margin-bottom: 0.1rem;
+  --spinner-button-height: 1.8rem;
+  --colon-width: 2rem;
+  --day-period-spacing-width: 1rem;
+  --date-picker-item-height: 2.4rem;
+  --date-picker-item-width: 3.3rem;
+
+  /* We need to hide the scroll bar but maintain its scrolling
+     capability, so using |overflow: hidden| is not an option. */
+  scrollbar-width: none;
+}
+
+@media not (prefers-contrast) {
+  :root {
+    --border-color: color-mix(in srgb, FieldText 65%, transparent);
+    --button-color: inherit;
+    --button-color-hover: inherit;
+    --button-color-active: inherit;
+    --button-background: color-mix(in srgb, FieldText 10%, transparent);
+    --button-background-hover: color-mix(in srgb, FieldText 20%, transparent);
+    --button-background-active: color-mix(in srgb, FieldText 30%, transparent);
+    --button-border-hover: var(--border-color);
+    --button-border-active: var(--border-color);
+    --today-background: color-mix(in srgb, FieldText 30%, transparent);
+    --today-color: inherit;
+    --navigation-arrow-color-hover: inherit;
+    --navigation-arrow-color-active: inherit;
+    --navigation-arrow-background-hover: transparent;
+    --navigation-arrow-background-active: transparent;
+    --navigation-arrow-border-hover: transparent;
+    --navigation-arrow-border-active: transparent;
+    --navigation-arrow-fill-opacity: 0.5;
+    --navigation-arrow-fill-opacity-hover: 0.8;
+    --navigation-arrow-fill-opacity-active: 1;
+  }
+}
+
+body {
+  margin: 0;
+  font: message-box;
+  font-size: var(--font-size-default);
+  background-color: Field;
+  color: FieldText;
+}
+
+button {
+  appearance: none;
+  padding: 0;
+  color: var(--button-color);
+  background: none;
+  background-color: var(--button-background);
+  background-repeat: no-repeat;
+  background-position: center;
+  border: var(--border-style) var(--border-color);
+  border-radius: var(--border-radius);
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+}
+
+button:where(:hover) {
+  color: var(--button-color-hover);
+  background-color: var(--button-background-hover);
+  border-color: var(--button-border-hover);
+}
+
+button:where(:hover.active) {
+  color: var(--button-color-active);
+  background-color: var(--button-background-active);
+  border-color: var(--button-border-active);
+}
+
+button:focus-visible {
+  outline: 0.2rem solid SelectedItem;
+  outline-offset: 0.2rem;
+}
+
+#date-picker {
+  /* Add some padding so outlines would not overflow our viewport. */
+  padding: 0.4rem;
+}
+
+.month-year-nav {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.8rem;
+}
+
+.month-year-nav[monthPickerVisible] {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.month-year-nav > button,
+.spinner-container > button {
+  background-color: transparent;
+  border-color: transparent;
+  fill-opacity: var(--navigation-arrow-fill-opacity);
+}
+
+.month-year-nav > button {
+  height: 2.4rem;
+  width: 2.4rem;
+}
+
+.month-year-nav > button:hover,
+.spinner-container > button:hover {
+  color: var(--navigation-arrow-color-hover);
+  background-color: var(--navigation-arrow-background-hover);
+  border-color: var(--navigation-arrow-border-hover);
+  fill-opacity: var(--navigation-arrow-fill-opacity-hover);
+}
+
+.month-year-nav > button:hover.active,
+.spinner-container > button:hover.active {
+  color: var(--navigation-arrow-color-active);
+  background-color: var(--navigation-arrow-background-active);
+  border-color: var(--navigation-arrow-border-active);
+  fill-opacity: var(--navigation-arrow-fill-opacity-active);
+}
+
+.month-year-nav > button.prev:dir(ltr),
+.month-year-nav > button.next:dir(rtl) {
+  background-image: url("chrome://global/skin/icons/arrow-left.svg");
+}
+
+.month-year-nav > button.prev:dir(rtl),
+.month-year-nav > button.next:dir(ltr) {
+  background-image: url("chrome://global/skin/icons/arrow-right.svg");
+}
+
+button.month-year {
+  font-size: 1.3rem;
+  height: var(--date-picker-item-height);
+  padding-block: 0.2rem 0.3rem;
+  padding-inline: 1.2rem 2.6rem;
+  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+  background-position-x: right 0.5rem;
+}
+
+@media not (prefers-contrast) {
+  button.month-year {
+    fill-opacity: .5;
+  }
+}
+
+button.month-year:dir(rtl) {
+  background-position-x: left 0.5rem;
+}
+
+button.month-year:hover {
+  color: var(--button-color-hover);
+  background-color: var(--button-background-hover);
+  border-color: var(--button-border-hover);
+}
+
+button.month-year.active {
+  color: var(--button-color-active);
+  background-color: var(--button-background-active);
+  border-color: var(--button-border-active);
+  background-image: url("chrome://global/skin/icons/arrow-up.svg");
+}
+
+.month-year-view > .spinner-container {
+  width: 5.5rem;
+  margin: 2rem 0.5rem;
+}
+
+.order-month-year > #spinner-month,
+.order-year-month > #spinner-year {
+  order: 1;
+}
+
+.order-month-year > #spinner-year,
+.order-year-month > #spinner-month {
+  order: 2;
+}
+
+.calendar-container > table:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+  border-spacing: inherit;
+}
+
+.week-header > tr,
+.days-view > tr {
+  display: flex;
+}
+
+.week-header > tr > th {
+  opacity: .5;
+}
+
+.days-view {
+  min-height: 15rem;
+}
+
+.week-header > tr > th,
+.days-view > tr > td {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-weight: inherit;
+  height: var(--date-picker-item-height);
+  width: var(--date-picker-item-width);
+  margin: 0.2rem;
+  padding: 0;
+  border: var(--border-style) transparent;
+  border-radius: var(--border-radius);
+}
+
+.days-view > tr > td:hover,
+.spinner-container > .spinner > div:hover {
+  background-color: var(--calendar-item-background-hover);
+  border-color: var(--border-color);
+}
+
+.days-view > tr > td:focus-visible {
+  outline: 0.2rem solid SelectedItem;
+  outline-offset: 0.2rem;
+}
+
+.days-view > tr > td.today {
+  background-color: var(--today-background);
+  color: var(--today-color);
+  border-color: transparent;
+  font-weight: bold;
+}
+
+.days-view > tr > td.today:hover {
+  border-color: var(--border-color);
+}
+
+.days-view > tr > td.selection,
+.spinner-container > .spinner:not(.scrolling) > div.selection {
+  background-color: SelectedItem;
+  color: SelectedItemText;
+  border-color: transparent;
+}
+
+.days-view > tr > td.outside {
+  opacity: .5;
+}
+
+.days-view > tr > td.out-of-range,
+.days-view > tr > td.off-step {
+  background-color: var(--disabled-background-color);
+  border-color: transparent;
+}
+
+.weekend {
+  color: var(--weekend-font-color);
+}
+
+#clear-button {
+  height: var(--date-picker-item-height);
+  font-size: 1.3rem;
+  margin-top: 0.8rem;
+  padding-inline: 1.2rem;
+}
+
+#time-picker,
+.month-year-view:not([hidden]) {
+  display: flex;
+  justify-content: center;
+}
+
+.spinner-container {
+  display: flex;
+  flex-direction: column;
+  width: var(--spinner-width);
+}
+
+.spinner-container > button {
+  height: var(--spinner-button-height);
+}
+
+.spinner-container > button.up {
+  background-image: url("chrome://global/skin/icons/arrow-up.svg");
+}
+
+.spinner-container > button.down {
+  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+}
+
+.spinner-container.hide-buttons > button {
+  visibility: hidden;
+}
+
+.spinner-container > .spinner {
+  position: relative;
+  margin-block: var(--spinner-margin-block);
+  border-radius: var(--border-radius);
+  overflow-y: scroll;
+  scrollbar-width: none;
+  scroll-snap-type: both mandatory;
+}
+
+@media not (prefers-reduced-motion) {
+  .spinner-container > .spinner {
+    scroll-behavior: smooth;
+  }
+}
+
+.spinner-container > .spinner:focus-visible {
+  outline: 0.2rem solid SelectedItem;
+  outline-offset: 0.2rem;
+}
+
+.spinner-container > .spinner > div {
+  display: flex;
+  place-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  margin-bottom: var(--spinner-item-margin-bottom);
+  height: var(--spinner-item-height);
+  border: var(--border-style) transparent;
+  border-radius: var(--border-radius);
+  user-select: none;
+  scroll-snap-align: start;
+}
+
+.spinner-container > .spinner > div.disabled {
+  visibility: hidden;
+}
+
+/* Used only in <input type="time"> */
+
+.colon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--colon-width);
+  margin-bottom: 0.3rem;
+  cursor: default;
+}
+
+.spacer {
+  width: var(--day-period-spacing-width);
+}
diff --git a/toolkit/themes/shared/design-tokens-brand.css b/toolkit/themes/shared/design-tokens-brand.css
new file mode 100644
index 0000000000..801348fe81
--- /dev/null
+++ b/toolkit/themes/shared/design-tokens-brand.css
@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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/design-tokens-shared.css");
+
+:root {
+  /* Typography */
+  /** Font size **/
+  --in-content-font-body-size-base: 15px;
+  --in-content-font-body-size-small: 0.867rem;
+}
+
+@media not (prefers-contrast) {
+  :root {
+    /* Border */
+    --border-interactive-color: var(--color-gray-60);
+
+    /* Button */
+    /* TODO Bug 1821203 - Gray use needs to be consolidated */
+    --button-background-color: color-mix(in srgb, currentColor 7%, transparent);
+    --button-background-color-hover: color-mix(in srgb, currentColor 14%, transparent);
+    --button-background-color-active: color-mix(in srgb, currentColor 21%, transparent);
+
+    /* Color */
+    --color-accent-primary: var(--brand-color-accent);
+    --color-accent-primary-hover: var(--brand-color-accent-hover);
+    --color-accent-primary-active: var(--brand-color-accent-active);
+    --brand-color-accent: var(--color-blue-50);
+    --brand-color-accent-hover: var(--color-blue-60);
+    --brand-color-accent-active: var(--color-blue-70);
+    --color-canvas: var(--color-white);
+
+    /* Text */
+    --text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent);
+  }
+}
+
+@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+  :root {
+    /* Border */
+    --border-interactive-color: var(--color-gray-50);
+
+    /* Color */
+    --brand-color-accent: var(--color-blue-20);
+    --brand-color-accent-hover: var(--color-blue-10);
+    --brand-color-accent-active: var(--color-blue-05);
+    --color-canvas: var(--color-gray-90);
+
+    /* Text */
+    --text-color-deemphasized: color-mix(in srgb, currentColor 75%, transparent);
+  }
+}
diff --git a/toolkit/themes/shared/design-tokens-shared.css b/toolkit/themes/shared/design-tokens-shared.css
new file mode 100644
index 0000000000..7915ed308b
--- /dev/null
+++ b/toolkit/themes/shared/design-tokens-shared.css
@@ -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/. */
+
+:root {
+  /* Base tokens */
+  /* Do not use base tokens directly as they don't carry any meaning. Refer to application tokens below. */
+  /** Color **/
+  --color-white: #ffffff;
+  --color-blue-05: #aaf2ff;
+  --color-blue-10: #80ebff;
+  --color-blue-20: #00ddff;
+  --color-blue-50: #0060df;
+  --color-blue-60: #0250bb;
+  --color-blue-70: #054096;
+  --color-gray-50: #bfbfc9;
+  --color-gray-60: #8f8f9d;
+  --color-gray-90: #1c1b22;
+
+  /* Application tokens */
+  /** Border **/
+  --border-radius-circle: 9999px;
+  --border-width: 1px;
+  --border-interactive-color: unset;
+
+  /** Button **/
+  --button-background-color: unset;
+  --button-background-color-hover: unset;
+  --button-background-color-active: unset;
+
+  /** Color **/
+  --color-accent-primary: unset;
+  --color-accent-primary-hover: unset;
+  --color-accent-primary-active: unset;
+  --color-canvas: unset;
+
+  /** Focus Outline **/
+  --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
+  --focus-outline-color: var(--color-accent-primary);
+  --focus-outline-inset: calc(-1 * var(--focus-outline-width));
+  --focus-outline-offset: 2px;
+  --focus-outline-width: 2px;
+
+  /** Text **/
+  --text-color-deemphasized: color-mix(in srgb, currentColor 60%, transparent);
+
+  /** Size **/
+  --size-item-small: 16px;
+  --size-item-large: 32px;
+}
+
+
+@media (prefers-contrast) {
+  :root,
+  :host {
+    /* Button */
+    --button-background-color: ButtonFace;
+    --button-background-color-hover: ButtonFace;
+    --button-background-color-active: ButtonFace;
+    --button-background-color-disabled: GrayText;
+
+    /* Color */
+    --color-canvas: Canvas;
+
+    /* Text */
+    --text-color-deemphasized: inherit;
+  }
+}
+
+@media (forced-colors) {
+  /* Applies to Windows HCM only */
+  :root,
+  :host {
+    /* Border */
+    --border-interactive-color: ButtonText;
+    --border-interactive-color-hover: SelectedItem;
+    --border-interactive-color-active: ButtonText;
+    --border-interactive-color-disabled: GrayText;
+
+    /* Color */
+    --color-accent-primary: ButtonText;
+    --color-accent-primary-hover: SelectedItem;
+    --color-accent-primary-active: SelectedItem;
+  }
+}
+
+@media (forced-colors: none) and (prefers-contrast)  {
+  /* Applies to macOS "increase contrast" only */
+  :root,
+  :host {
+    /* Border */
+    --border-interactive-color: AccentColor;
+    --border-interactive-color-hover: ButtonText;
+    --border-interactive-color-active: AccentColor;
+    --border-interactive-color-disabled: GrayText;
+
+    /* Color */
+    --color-accent-primary: AccentColor;
+    --color-accent-primary-hover: ButtonText;
+    --color-accent-primary-active: ButtonText;
+  }
+}
diff --git a/toolkit/themes/shared/design-tokens-system.css b/toolkit/themes/shared/design-tokens-system.css
new file mode 100644
index 0000000000..40b362b0fb
--- /dev/null
+++ b/toolkit/themes/shared/design-tokens-system.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 url("chrome://global/skin/design-tokens-shared.css");
+
+@media not (prefers-contrast) {
+  :root {
+    /* Border */
+    --border-interactive-color: color-mix(in srgb, currentColor 15%, var(--color-gray-60));
+
+    /* Button */
+    --button-background-color: var(--button-bgcolor);
+    --button-background-color-hover: var(--button-hover-bgcolor);
+    --button-background-color-active: var(--button-active-bgcolor);
+
+    /* Color */
+    --color-accent-primary: var(--system-color-accent);
+    --color-accent-primary-hover: var(--system-color-accent-hover);
+    --color-accent-primary-active: var(--system-color-accent-active);
+    --system-color-accent: var(--button-primary-bgcolor, AccentColor);
+    --system-color-accent-hover: var(--button-primary-hover-bgcolor);
+    --system-color-accent-active: var(--button-primary-active-bgcolor);
+    --color-canvas: Canvas;
+  }
+}
diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn
new file mode 100644
index 0000000000..4fd57ec8ec
--- /dev/null
+++ b/toolkit/themes/shared/desktop-jar.inc.mn
@@ -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/.
+
+# 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.
+
+#include minimal-toolkit.jar.inc.mn
+% skin help classic/1.0 %skin/classic/help/
+% skin mozapps classic/1.0 %skin/classic/mozapps/
+  skin/classic/global/aboutCache.css                       (../../shared/aboutCache.css)
+  skin/classic/global/aboutCacheEntry.css                  (../../shared/aboutCacheEntry.css)
+  skin/classic/global/aboutHttpsOnlyError.css              (../../shared/aboutHttpsOnlyError.css)
+  skin/classic/global/aboutMemory.css                      (../../shared/aboutMemory.css)
+  skin/classic/global/aboutNetError.css                    (../../shared/aboutNetError.css)
+  skin/classic/global/aboutNetworking.css                  (../../shared/aboutNetworking.css)
+  skin/classic/global/aboutLogging.css                     (../../shared/aboutLogging.css)
+  skin/classic/global/aboutReader.css                      (../../shared/aboutReader.css)
+  skin/classic/global/aboutReaderPocket.css                (../../shared/aboutReaderPocket.css)
+  skin/classic/global/aboutRights.css                      (../../shared/aboutRights.css)
+  skin/classic/global/aboutLicense.css                     (../../shared/aboutLicense.css)
+  skin/classic/global/aboutSupport.css                     (../../shared/aboutSupport.css)
+  skin/classic/global/alert.css                            (../../shared/alert.css)
+  skin/classic/global/search-textbox.css                   (../../shared/search-textbox.css)
+  skin/classic/global/appPicker.css                        (../../shared/appPicker.css)
+  skin/classic/global/arrowscrollbox.css                   (../../shared/arrowscrollbox.css)
+  skin/classic/global/checkbox.css                         (../../shared/checkbox.css)
+  skin/classic/global/close-icon.css                       (../../shared/close-icon.css)
+  skin/classic/global/commonDialog.css                     (../../shared/commonDialog.css)
+  skin/classic/global/datetimeinputpickers.css             (../../shared/datetimeinputpickers.css)
+  skin/classic/global/design-tokens-brand.css              (../../shared/design-tokens-brand.css)
+  skin/classic/global/design-tokens-shared.css             (../../shared/design-tokens-shared.css)
+  skin/classic/global/design-tokens-system.css             (../../shared/design-tokens-system.css)
+  skin/classic/global/error-pages.css                      (../../shared/error-pages.css)
+  skin/classic/global/findbar.css                          (../../shared/findbar.css)
+  skin/classic/global/global-shared.css                    (../../shared/global-shared.css)
+  skin/classic/global/menu-scrolling.css                   (../../shared/menu-scrolling.css)
+  skin/classic/global/menulist-shared.css                  (../../shared/menulist-shared.css)
+  skin/classic/global/notification.css                     (../../shared/notification.css)
+  skin/classic/global/numberinput.css                      (../../shared/numberinput.css)
+  skin/classic/global/offlineSupportPages.css              (../../shared/offlineSupportPages.css)
+  skin/classic/global/popupnotification.css                (../../shared/popupnotification.css)
+  skin/classic/global/tree.css                             (../../shared/tree.css)
+  skin/classic/global/dirListing/dirListing.css            (../../shared/dirListing/dirListing.css)
+#ifdef XP_MACOSX
+  skin/classic/global/dirListing/folder.png                (../../shared/dirListing/folder-osx.png)
+  skin/classic/global/dirListing/up.png                    (../../shared/dirListing/up-osx.png)
+#else
+  skin/classic/global/dirListing/folder.png                (../../shared/dirListing/folder.png)
+  skin/classic/global/dirListing/up.png                    (../../shared/dirListing/up.png)
+#endif
+  skin/classic/global/in-content/common-shared.css         (../../shared/in-content/common-shared.css)
+  skin/classic/global/in-content/info-pages.css            (../../shared/in-content/info-pages.css)
+  skin/classic/global/in-content/wifi.svg                  (../../shared/in-content/wifi.svg)
+  skin/classic/global/icons/arrow-left.svg                 (../../shared/icons/arrow-left.svg)
+  skin/classic/global/icons/arrow-right.svg                (../../shared/icons/arrow-right.svg)
+  skin/classic/global/icons/autoscroll.svg                 (../../shared/icons/autoscroll.svg)
+  skin/classic/global/icons/autoscroll-horizontal.svg      (../../shared/icons/autoscroll-horizontal.svg)
+  skin/classic/global/icons/autoscroll-vertical.svg        (../../shared/icons/autoscroll-vertical.svg)
+  skin/classic/global/icons/badge-blue.svg                 (../../shared/icons/badge-blue.svg)
+  skin/classic/global/icons/blocked.svg                    (../../shared/icons/blocked.svg)
+  skin/classic/global/icons/check.svg                      (../../shared/icons/check.svg)
+  skin/classic/global/icons/check-partial.svg              (../../shared/icons/check-partial.svg)
+  skin/classic/global/icons/chevron.svg                    (../../shared/icons/chevron.svg)
+  skin/classic/global/icons/close.svg                      (../../shared/icons/close.svg)
+  skin/classic/global/icons/close-12.svg                   (../../shared/icons/close-12.svg)
+  skin/classic/global/icons/close-fill.svg                 (../../shared/icons/close-fill.svg)
+  skin/classic/global/icons/columnpicker.svg               (../../shared/icons/columnpicker.svg)
+  skin/classic/global/icons/defaultFavicon.svg             (../../shared/icons/defaultFavicon.svg)
+  skin/classic/global/icons/delete.svg                     (../../shared/icons/delete.svg)
+  skin/classic/global/icons/developer.svg                  (../../shared/icons/developer.svg)
+  skin/classic/global/icons/edit.svg                       (../../shared/icons/edit.svg)
+  skin/classic/global/icons/edit-copy.svg                  (../../shared/icons/edit-copy.svg)
+  skin/classic/global/icons/error.svg                      (../../shared/icons/error.svg)
+  skin/classic/global/icons/experiments.svg                (../../shared/icons/experiments.svg)
+  skin/classic/global/icons/folder.svg                     (../../shared/icons/folder.svg)
+  skin/classic/global/icons/heart.svg                      (../../shared/icons/heart.svg)
+  skin/classic/global/icons/help.svg                       (../../shared/icons/help.svg)
+  skin/classic/global/icons/highlights.svg                 (../../shared/icons/highlights.svg)
+  skin/classic/global/icons/indicator-private-browsing.svg (../../shared/icons/indicator-private-browsing.svg)
+  skin/classic/global/icons/info.svg                       (../../shared/icons/info.svg)
+  skin/classic/global/icons/info-filled.svg                (../../shared/icons/info-filled.svg)
+  skin/classic/global/icons/lightbulb.svg                  (../../shared/icons/lightbulb.svg)
+  skin/classic/global/icons/link.svg                       (../../shared/icons/link.svg)
+  skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
+  skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
+  skin/classic/global/icons/more.svg                       (../../shared/icons/more.svg)
+  skin/classic/global/icons/open-in-new.svg                (../../shared/icons/open-in-new.svg)
+  skin/classic/global/icons/page-portrait.svg              (../../shared/icons/page-portrait.svg)
+  skin/classic/global/icons/page-landscape.svg             (../../shared/icons/page-landscape.svg)
+  skin/classic/global/icons/performance.svg                (../../shared/icons/performance.svg)
+  skin/classic/global/icons/plugin.svg                     (../../shared/icons/plugin.svg)
+  skin/classic/global/icons/plugin-blocked.svg             (../../shared/icons/plugin-blocked.svg)
+  skin/classic/global/icons/plus.svg                       (../../shared/icons/plus.svg)
+  skin/classic/global/icons/pocket.svg                     (../../shared/icons/pocket.svg)
+  skin/classic/global/icons/pocket-outline.svg             (../../shared/icons/pocket-outline.svg)
+  skin/classic/global/icons/print.svg                      (../../shared/icons/print.svg)
+  skin/classic/global/icons/undo.svg                       (../../shared/icons/undo.svg)
+  skin/classic/global/icons/radio.svg                      (../../shared/icons/radio.svg)
+  skin/classic/global/icons/reload.svg                     (../../shared/icons/reload.svg)
+  skin/classic/global/icons/search-glass.svg               (../../shared/icons/search-glass.svg)
+  skin/classic/global/icons/security.svg                   (../../shared/icons/security.svg)
+  skin/classic/global/icons/security-broken.svg            (../../shared/icons/security-broken.svg)
+  skin/classic/global/icons/security-warning.svg           (../../shared/icons/security-warning.svg)
+  skin/classic/global/icons/settings.svg                   (../../shared/icons/settings.svg)
+  skin/classic/global/icons/shortcut.svg                   (../../shared/icons/shortcut.svg)
+  skin/classic/global/icons/sort-arrow.svg                 (../../shared/icons/sort-arrow.svg)
+  skin/classic/global/icons/trackers.svg                   (../../shared/icons/trackers.svg)
+  skin/classic/global/icons/trending.svg                   (../../shared/icons/trending.svg)
+  skin/classic/global/icons/update-icon.svg                (../../shared/icons/update-icon.svg)
+  skin/classic/global/icons/arrow-down-12.svg              (../../shared/icons/arrow-down-12.svg)
+  skin/classic/global/icons/arrow-down.svg                 (../../shared/icons/arrow-down.svg)
+  skin/classic/global/icons/arrow-left-12.svg              (../../shared/icons/arrow-left-12.svg)
+  skin/classic/global/icons/arrow-right-12.svg             (../../shared/icons/arrow-right-12.svg)
+  skin/classic/global/icons/arrow-up-12.svg                (../../shared/icons/arrow-up-12.svg)
+  skin/classic/global/icons/arrow-up.svg                   (../../shared/icons/arrow-up.svg)
+  skin/classic/global/icons/warning.svg                    (../../shared/icons/warning.svg)
+  skin/classic/global/icons/warning-fill-12.svg            (../../shared/icons/warning-fill-12.svg)
+  skin/classic/global/icons/whatsnew.svg                   (../../shared/icons/whatsnew.svg)
+  skin/classic/global/illustrations/about-rights.svg       (../../shared/illustrations/about-rights.svg)
+  skin/classic/global/illustrations/about-license.svg      (../../shared/illustrations/about-license.svg)
+  skin/classic/global/illustrations/error-malformed-url.svg (../../shared/illustrations/error-malformed-url.svg)
+  skin/classic/global/media/picture-in-picture-open.svg    (../../shared/media/picture-in-picture-open.svg)
+  skin/classic/global/media/picture-in-picture-closed.svg  (../../shared/media/picture-in-picture-closed.svg)
+  skin/classic/global/narrate.css                          (../../shared/narrate.css)
+  skin/classic/global/narrate/arrow.svg                    (../../shared/narrate/arrow.svg)
+  skin/classic/global/narrate/back.svg                     (../../shared/narrate/back.svg)
+  skin/classic/global/narrate/fast.svg                     (../../shared/narrate/fast.svg)
+  skin/classic/global/narrate/forward.svg                  (../../shared/narrate/forward.svg)
+  skin/classic/global/narrate/slow.svg                     (../../shared/narrate/slow.svg)
+  skin/classic/global/narrate/start.svg                    (../../shared/narrate/start.svg)
+  skin/classic/global/narrate/stop.svg                     (../../shared/narrate/stop.svg)
+  skin/classic/global/narrate/headphone.svg                (../../shared/narrate/headphone.svg)
+  skin/classic/global/narrate/headphone-active.svg         (../../shared/narrate/headphone-active.svg)
+  skin/classic/global/pictureinpicture/player.css          (../../shared/pictureinpicture/player.css)
+  skin/classic/global/pictureinpicture/texttracks.css           (../../shared/pictureinpicture/texttracks.css)
+  skin/classic/global/reader/RM-Sans-Serif.svg             (../../shared/reader/RM-Sans-Serif.svg)
+  skin/classic/global/reader/RM-Serif.svg                  (../../shared/reader/RM-Serif.svg)
+  skin/classic/global/reader/RM-Minus-24x24.svg            (../../shared/reader/RM-Minus-24x24.svg)
+  skin/classic/global/reader/RM-Plus-24x24.svg             (../../shared/reader/RM-Plus-24x24.svg)
+  skin/classic/global/reader/RM-Pocket-Glyph.svg             (../../shared/reader/RM-Pocket-Glyph.svg)
+  skin/classic/global/reader/RM-Pocket-Glyph-Dark.svg             (../../shared/reader/RM-Pocket-Glyph-Dark.svg)
+  skin/classic/global/reader/RM-Pocket-Glyph-Sepia.svg             (../../shared/reader/RM-Pocket-Glyph-Sepia.svg)
+  skin/classic/global/reader/RM-Type-Controls-24x24.svg    (../../shared/reader/RM-Type-Controls-24x24.svg)
+  skin/classic/global/reader/RM-Type-Controls-Arrow.svg    (../../shared/reader/RM-Type-Controls-Arrow.svg)
+  skin/classic/global/reader/RM-Content-Width-Minus-42x16.svg          (../../shared/reader/RM-Content-Width-Minus-42x16.svg)
+  skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg           (../../shared/reader/RM-Content-Width-Plus-44x16.svg)
+  skin/classic/global/reader/RM-Line-Height-Minus-38x14.svg            (../../shared/reader/RM-Line-Height-Minus-38x14.svg)
+  skin/classic/global/reader/RM-Line-Height-Plus-38x24.svg             (../../shared/reader/RM-Line-Height-Plus-38x24.svg)
+
diff --git a/toolkit/themes/shared/desktop-non-mac.jar.inc.mn b/toolkit/themes/shared/desktop-non-mac.jar.inc.mn
new file mode 100644
index 0000000000..5a59840191
--- /dev/null
+++ b/toolkit/themes/shared/desktop-non-mac.jar.inc.mn
@@ -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/.
+
+# This is not a complete / proper jar manifest. It is conditionally included
+# by the shared jar manifest, which in turn is included by the os-specific
+# manifests.
+# As a result, the source file paths are relative to the location of the
+# actual manifests.
+
+#include desktop-jar.inc.mn
+
+  skin/classic/global/dialog.css                           (../../windows/global/dialog.css)
+  skin/classic/global/tabprompts.css                       (../../windows/global/tabprompts.css)
+  skin/classic/global/wizard.css                           (../../windows/global/wizard.css)
+
+  skin/classic/global/arrow/panelarrow-vertical.svg        (../../windows/global/arrow/panelarrow-vertical.svg)
+
+  skin/classic/global/icons/search-textbox.svg             (../../windows/global/icons/search-textbox.svg)
+
+  skin/classic/mozapps/downloads/unknownContentType.css      (../../windows/mozapps/downloads/unknownContentType.css)
+  skin/classic/mozapps/handling/handling.css                 (../../windows/mozapps/handling/handling.css)
+
+% override chrome://mozapps/skin/xpinstall/xpinstallItemGeneric.png       chrome://mozapps/skin/extensions/extensionGeneric.svg
diff --git a/toolkit/themes/shared/dirListing/dirListing.css b/toolkit/themes/shared/dirListing/dirListing.css
new file mode 100644
index 0000000000..ebf756c23f
--- /dev/null
+++ b/toolkit/themes/shared/dirListing/dirListing.css
@@ -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/. */
+
+:root {
+  background-color: -moz-dialog;
+  color: -moz-dialogtext;
+  font: message-box;
+  padding-inline: 2em;
+  color-scheme: light dark;
+}
+
+body {
+  border: 1px solid ThreeDShadow;
+  border-radius: 10px;
+  padding: 3em;
+  min-width: 30em;
+  max-width: 65em;
+  margin: 4em auto;
+  background-color: Field;
+  color: FieldText;
+}
+
+h1 {
+  font-size: 160%;
+  margin: 0 0 .6em;
+  border-bottom: 1px solid ThreeDLightShadow;
+  font-weight: normal;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* ensure multiple spaces are shown correctly. */
+td:first-child > a {
+  white-space: pre;
+}
+
+p {
+  font-size: 110%;
+}
+
+#UI_goUp {
+  margin-top: 0;
+  float: inline-start;
+}
+
+#UI_showHidden {
+  margin-top: 0;
+  float: inline-end;
+}
+
+table {
+  clear: both;
+  width: 90%;
+  margin: 0 auto;
+}
+
+thead {
+  font-size: 130%;
+}
+
+/* last modified */
+th:last-child {
+  text-align: center;
+}
+
+th:hover > a {
+  text-decoration: underline;
+}
+
+body > table > tbody > tr:hover {
+  outline: 1px solid ThreeDLightShadow;
+}
+
+/* let 'Size' and 'Last Modified' take only as much space as they need and 'Name' all the rest */
+td:not(:first-child) {
+  width: 0;
+}
+
+.up {
+  padding: 0 .5em;
+  margin-inline-start: 20px;
+}
+
+.up::before {
+  content: "";
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-inline: -20px 4px;
+  vertical-align: middle;
+  background: url(chrome://global/skin/dirListing/up.png) center/16px no-repeat;
+}
+
+.dir::before {
+  content: "";
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: url(chrome://global/skin/dirListing/folder.png) center/16px no-repeat;
+}
diff --git a/toolkit/themes/shared/dirListing/folder-osx.png b/toolkit/themes/shared/dirListing/folder-osx.png
new file mode 100644
index 0000000000..361d38bf4b
--- /dev/null
+++ b/toolkit/themes/shared/dirListing/folder-osx.png
diff --git a/toolkit/themes/shared/dirListing/folder.png b/toolkit/themes/shared/dirListing/folder.png
new file mode 100644
index 0000000000..31a7c5650e
--- /dev/null
+++ b/toolkit/themes/shared/dirListing/folder.png
diff --git a/toolkit/themes/shared/dirListing/up-osx.png b/toolkit/themes/shared/dirListing/up-osx.png
new file mode 100644
index 0000000000..47827040a0
--- /dev/null
+++ b/toolkit/themes/shared/dirListing/up-osx.png
diff --git a/toolkit/themes/shared/dirListing/up.png b/toolkit/themes/shared/dirListing/up.png
new file mode 100644
index 0000000000..49d8568cd0
--- /dev/null
+++ b/toolkit/themes/shared/dirListing/up.png
diff --git a/toolkit/themes/shared/error-pages.css b/toolkit/themes/shared/error-pages.css
new file mode 100644
index 0000000000..6fb65d5829
--- /dev/null
+++ b/toolkit/themes/shared/error-pages.css
@@ -0,0 +1,86 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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");
+
+body {
+  background-size: 64px 32px;
+  background-repeat: repeat-x;
+  padding: 0;
+  /* info-pages.css sets a minimum width of 13em to the content
+   * container. If we don't set a min-width here, the content
+   * gets clipped in iframes with small width. We don't accomodate
+   * any padding to prioritize real estate in the small viewport. */
+  min-width: 13em;
+}
+
+.button-container {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: end;
+}
+
+.button-spacer {
+  flex: 1;
+}
+
+@media only screen and (max-width: 959px) {
+  body {
+    padding: 0 75px;
+  }
+
+  .title {
+    background-image: none !important;
+    padding-inline-start: 0;
+    margin-inline-start: 0;
+  }
+
+  .title-text {
+    padding-top: 0;
+  }
+}
+
+@media only screen and (max-width: 640px) {
+  .title-text {
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  body {
+    padding: 0 38px;
+  }
+
+  .container {
+    min-width: 0;
+  }
+
+  .button-container button {
+    width: 100%;
+    margin: 0.66em 0 0;
+  }
+
+  .title-text {
+    font-size: 26px;
+  }
+}
+
+@media only screen and (max-width: 320px) {
+  body {
+    padding: 0 12px;
+  }
+}
+
+@media only screen and (max-height: 480px) {
+  body {
+    /* Note: if you change the top padding, also update the image positioning
+     * media query in aboutNetError.css for the certificate error case. */
+    padding-top: 38px;
+    /* We get rid of bottom padding for width < 640px, but
+     * for height < 480px a bit of space between the content
+     * and the viewport edge is nice. */
+    padding-bottom: 38px;
+  }
+}
diff --git a/toolkit/themes/shared/extensions/category-available.svg b/toolkit/themes/shared/extensions/category-available.svg
new file mode 100644
index 0000000000..6867fba54b
--- /dev/null
+++ b/toolkit/themes/shared/extensions/category-available.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 .5C4.8.5.5 4.8.5 10s4.3 9.5 9.5 9.5 9.5-4.3 9.5-9.5S15.2.5 10 .5zM10 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm5.3-9.3c.3.3.3.8 0 1.1s-.8.3-1.1 0l-3.5-3.5v8.9c0 .4-.3.8-.8.8s-.8-.3-.8-.8V6.3L5.8 9.8c-.2.1-.4.2-.5.2s-.4-.1-.6-.2c-.3-.3-.3-.8 0-1.1L9.5 4h1.1l4.7 4.7z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/category-dictionaries.svg b/toolkit/themes/shared/extensions/category-dictionaries.svg
new file mode 100644
index 0000000000..850988625c
--- /dev/null
+++ b/toolkit/themes/shared/extensions/category-dictionaries.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" fill="context-fill" fill-opacity="context-fill-opacity" width="32" height="32">
+  <path d="M12 8a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm2.2 4.46l-1.92 1.92a.38.38 0 0 1-.54 0L9.8 12.46a.38.38 0 0 1 .54-.54l1.27 1.27V9.88a.38.38 0 0 1 .77 0v3.3l1.27-1.27a.38.38 0 0 1 .54.54z"/>
+  <path d="M6.93.64a1 1 0 0 0-1.86 0l-5 14a1 1 0 0 0 .61 1.28A1 1 0 0 0 1 16a1 1 0 0 0 .94-.66l1.58-4.43h3.6a5 5 0 0 1 2.34-3.19zM4.24 8.91L6 4l1.76 4.91z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/category-discover.svg b/toolkit/themes/shared/extensions/category-discover.svg
new file mode 100644
index 0000000000..16d90ecbd7
--- /dev/null
+++ b/toolkit/themes/shared/extensions/category-discover.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 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M12.5 18a2 2 0 0 1-1.993-1.611l-.45-2.094a1.764 1.764 0 0 0-1.352-1.352l-2.094-.45A2 2 0 0 1 5 10.5a2 2 0 0 1 1.611-1.993l2.094-.45a1.764 1.764 0 0 0 1.352-1.352l.45-2.094A2 2 0 0 1 12.5 3a2 2 0 0 1 1.993 1.611l.45 2.094a1.764 1.764 0 0 0 1.352 1.352l2.094.45A2 2 0 0 1 20 10.5a2 2 0 0 1-1.611 1.993l-2.094.45a1.764 1.764 0 0 0-1.352 1.352l-.45 2.094A2 2 0 0 1 12.5 18zm-.977-10.98a3.266 3.266 0 0 1-2.504 2.504l-2.094.45c-.395.085-.425.423-.425.526s.03.441.426.526l2.094.45a3.265 3.265 0 0 1 2.504 2.504l.45 2.094c.085.396.423.426.526.426s.441-.03.526-.426l.45-2.094a3.265 3.265 0 0 1 2.504-2.504l2.094-.45c.396-.085.426-.423.426-.526s-.03-.441-.426-.526l-2.094-.45a3.265 3.265 0 0 1-2.504-2.504l-.45-2.094c-.085-.396-.423-.426-.526-.426s-.441.03-.526.426l-.451 2.094z"/>
+  <path d="m2.805 16.439.228-1.062c.108-.503.825-.503.933 0l.228 1.062a.478.478 0 0 0 .367.367l1.062.228c.503.108.503.825 0 .933l-1.062.228a.478.478 0 0 0-.367.367l-.228 1.062c-.108.503-.825.503-.933 0l-.228-1.062a.478.478 0 0 0-.367-.367l-1.062-.228c-.503-.108-.503-.825 0-.933l1.062-.228a.48.48 0 0 0 .367-.367z"/>
+  <path d="m2.805 2.439.228-1.062c.108-.503.825-.503.933 0l.228 1.062a.478.478 0 0 0 .367.367l1.062.228c.503.108.503.825 0 .933l-1.062.228a.477.477 0 0 0-.366.366l-.228 1.062c-.108.503-.825.503-.933 0l-.229-1.062a.477.477 0 0 0-.366-.366l-1.062-.228c-.503-.108-.503-.825 0-.933l1.062-.228a.48.48 0 0 0 .366-.367z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/category-extensions.svg b/toolkit/themes/shared/extensions/category-extensions.svg
new file mode 100644
index 0000000000..41b203ab62
--- /dev/null
+++ b/toolkit/themes/shared/extensions/category-extensions.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 5-2 0 0-1.873c0-1.594-1.183-2.961-2.693-3.112A3.003 3.003 0 0 0 7.5 2.999L7.5 5l-3 0A2.5 2.5 0 0 0 2 7.5l0 2.25c0 .69.56 1.25 1.25 1.25l1.623 0c.833 0 1.544.59 1.62 1.343a1.49 1.49 0 0 1-.379 1.163c-.285.314-.69.494-1.113.494L3.25 14C2.56 14 2 14.56 2 15.25l0 2.25A2.5 2.5 0 0 0 4.5 20l11 0a2.5 2.5 0 0 0 2.5-2.5l0-10A2.5 2.5 0 0 0 15.5 5zm1 12.7-.8.8-11.4 0-.8-.8 0-2.2 1.501 0c.846 0 1.657-.36 2.225-.988a3.01 3.01 0 0 0 .759-2.318C7.834 10.683 6.467 9.5 4.873 9.5L3.5 9.5l0-2.2.8-.8 3.7 0a1 1 0 0 0 1-1l0-2.501a1.502 1.502 0 0 1 1.657-1.492c.753.075 1.343.787 1.343 1.62L12 5.5a1 1 0 0 0 1 1l2.7 0 .8.8 0 10.4z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/category-plugins.svg b/toolkit/themes/shared/extensions/category-plugins.svg
new file mode 100644
index 0000000000..44f8ed1ea9
--- /dev/null
+++ b/toolkit/themes/shared/extensions/category-plugins.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="m17 4.05 0-1.55A1.5 1.5 0 0 0 15.5 1l-2 0A1.5 1.5 0 0 0 12 2.5L12 4 8 4l0-1.5A1.5 1.5 0 0 0 6.5 1l-2 0A1.5 1.5 0 0 0 3 2.5l0 1.55A2.502 2.502 0 0 0 1 6.5l0 9A2.5 2.5 0 0 0 3.5 18l13 0a2.5 2.5 0 0 0 2.5-2.5l0-9a2.502 2.502 0 0 0-2-2.45zm.5 11.65-.8.8-13.4 0-.8-.8 0-9.4.8-.8 13.4 0 .8.8 0 9.4z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/category-recent.svg b/toolkit/themes/shared/extensions/category-recent.svg
new file mode 100644
index 0000000000..68bfc50d55
--- /dev/null
+++ b/toolkit/themes/shared/extensions/category-recent.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"
+     transform="rotate(180)">
+  <path d="M10 .5C4.8.5.5 4.8.5 10s4.3 9.5 9.5 9.5 9.5-4.3 9.5-9.5S15.2.5 10 .5zM10 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm5.3-9.3c.3.3.3.8 0 1.1s-.8.3-1.1 0l-3.5-3.5v8.9c0 .4-.3.8-.8.8s-.8-.3-.8-.8V6.3L5.8 9.8c-.2.1-.4.2-.5.2s-.4-.1-.6-.2c-.3-.3-.3-.8 0-1.1L9.5 4h1.1l4.7 4.7z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/category-sitepermission.svg b/toolkit/themes/shared/extensions/category-sitepermission.svg
new file mode 100644
index 0000000000..2cc3fc359a
--- /dev/null
+++ b/toolkit/themes/shared/extensions/category-sitepermission.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 .5C4.8.5.5 4.8.5 10s4.3 9.5 9.5 9.5 9.5-4.3 9.5-9.5S15.2.5 10 .5zm8 8.7h-3c-.2-2.5-1.1-4.8-2.7-6.7h.7c2.7 1.2 4.7 3.7 5 6.7zm-7.8 8.2h-.4c-1.9-1.7-3-4.1-3.2-6.6h6.9c-.2 2.5-1.4 4.9-3.3 6.6zM6.5 9.2c.2-2.6 1.3-4.9 3.2-6.7h.4c1.9 1.7 3 4.1 3.2 6.7H6.5zM7 2.6h.7C6.1 4.5 5.2 6.8 5 9.2H2c.3-3 2.3-5.5 5-6.6zm-5 8.2h3c.2 2.5 1.1 4.8 2.7 6.6H7c-2.7-1.1-4.7-3.6-5-6.6zm11 6.6h-.7c1.6-1.9 2.5-4.2 2.7-6.6h3c-.3 3-2.3 5.5-5 6.6z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/category-themes.svg b/toolkit/themes/shared/extensions/category-themes.svg
new file mode 100644
index 0000000000..45e271639e
--- /dev/null
+++ b/toolkit/themes/shared/extensions/category-themes.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="m16.875 7.286 0-6.036c0-.69-.56-1.25-1.25-1.25L4.375 0c-.69 0-1.25.56-1.25 1.25l0 6.036A1.496 1.496 0 0 0 2.5 8.5l0 3A2.5 2.5 0 0 0 5 14l3 0 0 4a2 2 0 1 0 4 0l0-4 3 0a2.5 2.5 0 0 0 2.5-2.5l0-3c0-.501-.248-.941-.625-1.214zm-1.5-4.486 0 4.2-10.75 0 0-4.2.8-.8 1.111 0 .825.916a1.081 1.081 0 0 0 1.496.107l.822-.685.541 0 1.157 1.157c.41.41 1.071.424 1.498.03L14.528 2l.847 0 0 .8z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/extension.svg b/toolkit/themes/shared/extensions/extension.svg
new file mode 100644
index 0000000000..4bf376bbae
--- /dev/null
+++ b/toolkit/themes/shared/extensions/extension.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 16-9.75 0A1.626 1.626 0 0 1 2 14.375L2 11.5a.75.75 0 0 1 .75-.75l1.75 0c.689 0 1.25-.561 1.25-1.25S5.189 8.25 4.5 8.25l-1.75 0A.75.75 0 0 1 2 7.5l0-1.875C2 4.728 2.728 4 3.625 4L6 4l0-1.352C6 1.341 6.938.147 8.238.014A2.502 2.502 0 0 1 11 2.5L11 4l2.375 0C14.272 4 15 4.728 15 5.625l0 8.75c0 .897-.728 1.625-1.625 1.625zM3.25 12l0 2.15.6.6 9.3 0 .6-.6 0-8.3-.6-.6-2.65 0a.75.75 0 0 1-.75-.75l0-2c0-.689-.561-1.25-1.25-1.25s-1.25.561-1.25 1.25l0 2a.75.75 0 0 1-.75.75l-2.75 0-.5.6 0 1.15 1.103 0c1.308 0 2.502.939 2.634 2.24A2.503 2.503 0 0 1 4.5 12l-1.25 0z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/extensionGeneric.svg b/toolkit/themes/shared/extensions/extensionGeneric.svg
new file mode 100644
index 0000000000..f837912812
--- /dev/null
+++ b/toolkit/themes/shared/extensions/extensionGeneric.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.6 8 4 8c1.103 0 2 .897 2 2s-.897 2-2 2l-1.4 0-.6.6 0 1.775C2 15.271 2.729 16 3.625 16l9.75 0c.896 0 1.625-.729 1.625-1.625l0-8.75C15 4.729 14.271 4 13.375 4L11 4l0-2c0-1.103-.897-2-2-2S7 .897 7 2l0 2-3.375 0C2.729 4 2 4.729 2 5.625L2 7.4l.6.6z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/line.svg b/toolkit/themes/shared/extensions/line.svg
new file mode 100644
index 0000000000..2e5cf6e74c
--- /dev/null
+++ b/toolkit/themes/shared/extensions/line.svg
@@ -0,0 +1,99 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. 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">
+  <defs>
+    <radialGradient id="a" cx="14.305" cy="3.031" r="18.199" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff36e"/>
+      <stop offset=".5" stop-color="#fc4055"/>
+      <stop offset="1" stop-color="#e31587"/>
+    </radialGradient>
+    <radialGradient id="b" cx="1.315" cy="3.784" r="10.76" gradientUnits="userSpaceOnUse">
+      <stop offset=".001" stop-color="#c60084"/>
+      <stop offset="1" stop-color="#fc4055" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="c" cx="15.858" cy="1.995" r="21.371" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ffde67" stop-opacity=".6"/>
+      <stop offset=".093" stop-color="#ffd966" stop-opacity=".581"/>
+      <stop offset=".203" stop-color="#ffca65" stop-opacity=".525"/>
+      <stop offset=".321" stop-color="#feb262" stop-opacity=".432"/>
+      <stop offset=".446" stop-color="#fe8f5e" stop-opacity=".302"/>
+      <stop offset=".573" stop-color="#fd6459" stop-opacity=".137"/>
+      <stop offset=".664" stop-color="#fc4055" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="d" cx="8.451" cy="8.902" r="27.546" gradientUnits="userSpaceOnUse">
+      <stop offset=".153" stop-color="#810220"/>
+      <stop offset=".167" stop-color="#920b27" stop-opacity=".861"/>
+      <stop offset=".216" stop-color="#cb2740" stop-opacity=".398"/>
+      <stop offset=".253" stop-color="#ef394f" stop-opacity=".11"/>
+      <stop offset=".272" stop-color="#fc4055" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="e" cx="6.368" cy="8.555" r="27.542" gradientUnits="userSpaceOnUse">
+      <stop offset=".113" stop-color="#810220"/>
+      <stop offset=".133" stop-color="#920b27" stop-opacity=".861"/>
+      <stop offset=".204" stop-color="#cb2740" stop-opacity=".398"/>
+      <stop offset=".257" stop-color="#ef394f" stop-opacity=".11"/>
+      <stop offset=".284" stop-color="#fc4055" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="f" cx="13.937" cy="2.416" r="17.079" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff9640"/>
+      <stop offset=".8" stop-color="#fc4055"/>
+    </radialGradient>
+    <radialGradient id="g" cx="13.937" cy="2.416" r="17.079" gradientUnits="userSpaceOnUse">
+      <stop offset=".084" stop-color="#ffde67"/>
+      <stop offset=".147" stop-color="#ffdc66" stop-opacity=".968"/>
+      <stop offset=".246" stop-color="#ffd562" stop-opacity=".879"/>
+      <stop offset=".369" stop-color="#ffcb5d" stop-opacity=".734"/>
+      <stop offset=".511" stop-color="#ffbc55" stop-opacity=".533"/>
+      <stop offset=".667" stop-color="#ffaa4b" stop-opacity=".28"/>
+      <stop offset=".822" stop-color="#ff9640" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="h" cx="10.011" cy="7.729" r="8.36" gradientTransform="matrix(.247 .969 -1.011 .258 15.352 -3.965)" gradientUnits="userSpaceOnUse">
+      <stop offset=".363" stop-color="#fc4055"/>
+      <stop offset=".443" stop-color="#fd604d" stop-opacity=".633"/>
+      <stop offset=".545" stop-color="#fe8644" stop-opacity=".181"/>
+      <stop offset=".59" stop-color="#ff9640" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="i" cx="8.575" cy="8.439" r="8.353" gradientUnits="userSpaceOnUse">
+      <stop offset=".216" stop-color="#fc4055" stop-opacity=".8"/>
+      <stop offset=".267" stop-color="#fd5251" stop-opacity=".633"/>
+      <stop offset=".41" stop-color="#fe8345" stop-opacity=".181"/>
+      <stop offset=".474" stop-color="#ff9640" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="j" cx="17.326" cy=".487" r="28.887" gradientUnits="userSpaceOnUse">
+      <stop offset=".054" stop-color="#fff36e"/>
+      <stop offset=".457" stop-color="#ff9640"/>
+      <stop offset=".639" stop-color="#ff9640"/>
+    </radialGradient>
+    <linearGradient id="k" x1="8.117" y1="-.134" x2="12.46" y2="12.441" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#b833e1"/>
+      <stop offset=".371" stop-color="#9059ff"/>
+      <stop offset=".614" stop-color="#5b6df8"/>
+      <stop offset="1" stop-color="#0090ed"/>
+    </linearGradient>
+    <linearGradient id="l" x1="5.542" y1=".065" x2="13.614" y2="8.137" gradientUnits="userSpaceOnUse">
+      <stop offset=".805" stop-color="#722291" stop-opacity="0"/>
+      <stop offset="1" stop-color="#592acb" stop-opacity=".5"/>
+    </linearGradient>
+    <linearGradient id="m" x1="11.836" y1="1.378" x2="3.632" y2="15.587" gradientUnits="userSpaceOnUse">
+      <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>
+  </defs>
+  <g style="isolation:isolate">
+    <path d="M14.389 3.14A7.894 7.894 0 0 0 8.318 0a7 7 0 0 0-3.867.97A7.472 7.472 0 0 1 8.059.1a7.1 7.1 0 0 1 7.071 6.087 7 7 0 0 1-6.9 8.2 7.151 7.151 0 0 1-3.949-1.127C1.268 11.3 1.258 7.441 1.26 6.825a8.626 8.626 0 0 1 1.189-4.266A6.656 6.656 0 0 0 .576 4.984a7.734 7.734 0 0 0-.519 4.035c.012.1.023.207.036.31a8.013 8.013 0 1 0 14.3-6.189z" fill="url(#a)"/>
+    <path d="M14.389 3.14A7.894 7.894 0 0 0 8.318 0a7 7 0 0 0-3.867.97A7.472 7.472 0 0 1 8.059.1a7.1 7.1 0 0 1 7.071 6.087 7 7 0 0 1-6.9 8.2 7.151 7.151 0 0 1-3.949-1.127C1.268 11.3 1.258 7.441 1.26 6.825a8.626 8.626 0 0 1 1.189-4.266A6.656 6.656 0 0 0 .576 4.984a7.734 7.734 0 0 0-.519 4.035c.012.1.023.207.036.31a8.013 8.013 0 1 0 14.3-6.189z" fill="url(#b)" opacity=".67"/>
+    <path d="M14.389 3.14A7.894 7.894 0 0 0 8.318 0a7 7 0 0 0-3.867.97A7.472 7.472 0 0 1 8.059.1a7.1 7.1 0 0 1 7.071 6.087 7 7 0 0 1-6.9 8.2 7.151 7.151 0 0 1-3.949-1.127C1.268 11.3 1.258 7.441 1.26 6.825a8.626 8.626 0 0 1 1.189-4.266A6.656 6.656 0 0 0 .576 4.984a7.734 7.734 0 0 0-.519 4.035c.012.1.023.207.036.31a8.013 8.013 0 1 0 14.3-6.189z" fill="url(#c)"/>
+    <path d="M14.389 3.14A7.894 7.894 0 0 0 8.318 0a7 7 0 0 0-3.867.97A7.472 7.472 0 0 1 8.059.1a7.1 7.1 0 0 1 7.071 6.087 7 7 0 0 1-6.9 8.2 7.151 7.151 0 0 1-3.949-1.127C1.268 11.3 1.258 7.441 1.26 6.825a8.626 8.626 0 0 1 1.189-4.266A6.656 6.656 0 0 0 .576 4.984a7.734 7.734 0 0 0-.519 4.035c.012.1.023.207.036.31a8.013 8.013 0 1 0 14.3-6.189z" fill="url(#d)"/>
+    <path d="M14.389 3.14A7.894 7.894 0 0 0 8.318 0a7 7 0 0 0-3.867.97A7.472 7.472 0 0 1 8.059.1a7.1 7.1 0 0 1 7.071 6.087 7 7 0 0 1-6.9 8.2 7.151 7.151 0 0 1-3.949-1.127C1.268 11.3 1.258 7.441 1.26 6.825a8.626 8.626 0 0 1 1.189-4.266A6.656 6.656 0 0 0 .576 4.984a7.734 7.734 0 0 0-.519 4.035c.012.1.023.207.036.31a8.013 8.013 0 1 0 14.3-6.189z" fill="url(#e)"/>
+    <path d="M15.325 5.965C14.875 1.9 11.253.078 8.059.1a7.765 7.765 0 0 0-3.608.872 3.913 3.913 0 0 0-.712.54c.026-.021.1-.085.23-.172l.013-.009.011-.007A5.337 5.337 0 0 1 5.531.609 8.713 8.713 0 0 1 8.168.3a6.65 6.65 0 0 1 6.25 6.4 4.818 4.818 0 0 1-4.58 4.869 4.731 4.731 0 0 1-2.967-.72A5.425 5.425 0 0 1 5.06 8.242a4.552 4.552 0 0 1 .285-3.149A4.726 4.726 0 0 1 8.464 2.7a4.3 4.3 0 0 0-1.782-.585A5.4 5.4 0 0 0 1.7 5.177a6.035 6.035 0 0 0-.2 4.638 6.683 6.683 0 0 0 2.4 3.234A7.177 7.177 0 0 0 7.326 14.4s.153.018.309.029a8.085 8.085 0 0 0 5.439-1.6c2.811-2.377 2.315-6.285 2.251-6.864z" fill="url(#f)"/>
+    <path d="M15.325 5.965C14.875 1.9 11.253.078 8.059.1a7.765 7.765 0 0 0-3.608.872 3.913 3.913 0 0 0-.712.54c.026-.021.1-.085.23-.172l.013-.009.011-.007A5.337 5.337 0 0 1 5.531.609 8.713 8.713 0 0 1 8.168.3a6.65 6.65 0 0 1 6.25 6.4 4.818 4.818 0 0 1-4.58 4.869 4.731 4.731 0 0 1-2.967-.72A5.425 5.425 0 0 1 5.06 8.242a4.552 4.552 0 0 1 .285-3.149A4.726 4.726 0 0 1 8.464 2.7a4.3 4.3 0 0 0-1.782-.585A5.4 5.4 0 0 0 1.7 5.177a6.035 6.035 0 0 0-.2 4.638 6.683 6.683 0 0 0 2.4 3.234A7.177 7.177 0 0 0 7.326 14.4s.153.018.309.029a8.085 8.085 0 0 0 5.439-1.6c2.811-2.377 2.315-6.285 2.251-6.864z" fill="url(#g)"/>
+    <path d="M15.325 5.965C14.875 1.9 11.253.078 8.059.1a7.765 7.765 0 0 0-3.608.872 3.913 3.913 0 0 0-.712.54c.026-.021.1-.085.23-.172l.013-.009.011-.007A5.337 5.337 0 0 1 5.531.609 8.713 8.713 0 0 1 8.168.3a6.65 6.65 0 0 1 6.25 6.4 4.818 4.818 0 0 1-4.58 4.869 4.731 4.731 0 0 1-2.967-.72A5.425 5.425 0 0 1 5.06 8.242a4.552 4.552 0 0 1 .285-3.149A4.726 4.726 0 0 1 8.464 2.7a4.3 4.3 0 0 0-1.782-.585A5.4 5.4 0 0 0 1.7 5.177a6.035 6.035 0 0 0-.2 4.638 6.683 6.683 0 0 0 2.4 3.234A7.177 7.177 0 0 0 7.326 14.4s.153.018.309.029a8.085 8.085 0 0 0 5.439-1.6c2.811-2.377 2.315-6.285 2.251-6.864z" style="mix-blend-mode:multiply" opacity=".53" fill="url(#h)"/>
+    <path d="M15.325 5.965C14.875 1.9 11.253.078 8.059.1a7.765 7.765 0 0 0-3.608.872 3.913 3.913 0 0 0-.712.54c.026-.021.1-.085.23-.172l.013-.009.011-.007A5.337 5.337 0 0 1 5.531.609 8.713 8.713 0 0 1 8.168.3a6.65 6.65 0 0 1 6.25 6.4 4.818 4.818 0 0 1-4.58 4.869 4.731 4.731 0 0 1-2.967-.72A5.425 5.425 0 0 1 5.06 8.242a4.552 4.552 0 0 1 .285-3.149A4.726 4.726 0 0 1 8.464 2.7a4.3 4.3 0 0 0-1.782-.585A5.4 5.4 0 0 0 1.7 5.177a6.035 6.035 0 0 0-.2 4.638 6.683 6.683 0 0 0 2.4 3.234A7.177 7.177 0 0 0 7.326 14.4s.153.018.309.029a8.085 8.085 0 0 0 5.439-1.6c2.811-2.377 2.315-6.285 2.251-6.864z" style="mix-blend-mode:multiply" opacity=".53" fill="url(#i)"/>
+    <path d="M9.24 11.568a5.148 5.148 0 0 0 3.183-.815 5.67 5.67 0 0 0 2.39-4.234C14.957 3.381 13.094 0 8.168.3a8.713 8.713 0 0 0-2.637.309 5.745 5.745 0 0 0-1.538.715l-.011.007-.013.009c-.076.054-.151.11-.224.168a6.7 6.7 0 0 1 4.2-.787c2.827.371 5.413 2.571 5.413 5.475a4.076 4.076 0 0 1-3.747 3.817A2.849 2.849 0 0 1 6.9 8.156a2.75 2.75 0 0 1 .919-2.729 2.875 2.875 0 0 0-1.81.919A3.07 3.07 0 0 0 5.735 9.6c.84 1.746 3.031 1.929 3.505 1.968z" fill="url(#j)"/>
+    <path d="M14.4 3.745a4.5 4.5 0 0 0-.976-1.629 6.056 6.056 0 0 0-1.819-1.3A8.086 8.086 0 0 0 9.82.184 7.96 7.96 0 0 0 6.507.165a5.727 5.727 0 0 0-2.768 1.346 6.415 6.415 0 0 1 1.606-.64 6.712 6.712 0 0 1 6.234 1.619 5.417 5.417 0 0 1 .866 1.061 4.693 4.693 0 0 1 .123 4.773 3.8 3.8 0 0 1-2.914 1.691A4.726 4.726 0 0 0 14 7.839a4.88 4.88 0 0 0 .4-4.094z" fill="url(#k)"/>
+    <path d="M14.4 3.745a4.5 4.5 0 0 0-.976-1.629 6.056 6.056 0 0 0-1.819-1.3A8.086 8.086 0 0 0 9.82.184 7.96 7.96 0 0 0 6.507.165a5.727 5.727 0 0 0-2.768 1.346 6.415 6.415 0 0 1 1.606-.64 6.712 6.712 0 0 1 6.234 1.619 5.417 5.417 0 0 1 .866 1.061 4.693 4.693 0 0 1 .123 4.773 3.8 3.8 0 0 1-2.914 1.691A4.726 4.726 0 0 0 14 7.839a4.88 4.88 0 0 0 .4-4.094z" fill="url(#l)"/>
+    <path d="M8.318 0h-.073c.134 0 .269.013.4.022C8.538.021 8.429 0 8.318 0zM3.747 1.5a3.951 3.951 0 0 1 .453-.359 3.547 3.547 0 0 0-.453.364zm1.7-.653c-.032.008-.066.01-.1.019-.07.022-.147.046-.223.068.101-.029.209-.056.319-.082zm-1.7.658zm0 0zM14.389 3.14a8.12 8.12 0 0 0-.675-.77 6.368 6.368 0 0 0-.747-.677c-.072-.063-.156-.116-.233-.176a5.136 5.136 0 0 1 .693.6 4.5 4.5 0 0 1 .973 1.628 4.88 4.88 0 0 1-.4 4.094 4.723 4.723 0 0 1-4.342 2.175 2.609 2.609 0 0 0 .578-.07 2.81 2.81 0 0 1-.625.069A2.849 2.849 0 0 1 6.9 8.156a2.749 2.749 0 0 1 .919-2.729 2.875 2.875 0 0 0-1.81.919A3.07 3.07 0 0 0 5.735 9.6c.03.062.073.109.107.167a4.744 4.744 0 0 1-.782-1.525 4.552 4.552 0 0 1 .285-3.149A4.726 4.726 0 0 1 8.464 2.7a4.3 4.3 0 0 0-1.782-.585A5.4 5.4 0 0 0 1.7 5.177a5.133 5.133 0 0 0-.414 1.17 8.715 8.715 0 0 1 1.163-3.788A6.656 6.656 0 0 0 .576 4.984a7.734 7.734 0 0 0-.519 4.035c.012.1.023.207.036.31a8.013 8.013 0 1 0 14.3-6.189zM4.541.923c-.026.016-.065.033-.09.049.011-.007.025-.011.036-.018s.037-.02.054-.031zm-.09.049c-.017.01-.028.019-.044.029.025-.016.053-.03.079-.046a.378.378 0 0 0-.035.017z" fill="url(#m)"/>
+  </g>
+</svg>
diff --git a/toolkit/themes/shared/extensions/rating-star.svg b/toolkit/themes/shared/extensions/rating-star.svg
new file mode 100644
index 0000000000..c23bef36e8
--- /dev/null
+++ b/toolkit/themes/shared/extensions/rating-star.svg
@@ -0,0 +1,43 @@
+<?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">
+  <!--
+       This image defines three versions of the star:
+       #full = star filled with full color
+       #half = half-filled star (full color at left, transparent color at right)
+       #empty = star filled with transparent color
+  -->
+
+  <!-- Default image: full star -->
+  <view id="full" viewBox="0 0 64 64" />
+  <view id="half" viewBox="0 64 64 64" />
+  <view id="empty" viewBox="0 128 64 64" />
+
+  <defs>
+    <g id="star-shape" fill="context-fill" transform="translate(-140.000000, -607.000000)" fill-opacity="context-fill-opacity">
+      <path d="M154.994575,670.99995 C153.704598,671.000763 152.477615,670.442079 151.630967,669.468394 C150.784319,668.49471 150.401158,667.201652 150.580582,665.923653 L153.046749,648.259919 L141.193762,635.514481 C140.080773,634.318044 139.711733,632.608076 140.232152,631.058811 C140.752571,629.509546 142.078939,628.369589 143.688275,628.088421 L160.214424,625.130961 L168.013827,609.468577 C168.767364,607.955994 170.3113,607 172.000594,607 C173.689888,607 175.233824,607.955994 175.98736,609.468577 L183.790813,625.130961 L200.329111,628.08437 C201.934946,628.371492 203.25546,629.513805 203.771316,631.062053 C204.287172,632.610301 203.915846,634.316807 202.803377,635.51043 L190.954439,648.26397 L193.420606,665.923653 C193.652457,667.578241 192.93975,669.223573 191.574418,670.185702 C190.209085,671.147831 188.420524,671.265104 186.941351,670.489485 L172.002619,662.698806 L157.047688,670.50569 C156.413201,670.833752 155.708782,671.003331 154.994575,670.99995 Z"></path>
+    </g>
+    <clipPath id="left-half">
+      <rect x="0" y="0" width="50%" height="100%" />
+    </clipPath>
+    <clipPath id="right-half">
+      <rect x="50%" y="0" width="50%" height="100%" />
+    </clipPath>
+  </defs>
+
+  <!-- full -->
+  <use href="#star-shape" x="0" y="0" />
+
+  <!-- half -->
+  <g transform="translate(0, 64)">
+    <use href="#star-shape" clip-path="url(#left-half)" />
+    <use href="#star-shape" clip-path="url(#right-half)" opacity="0.25" />
+  </g>
+
+  <!-- empty -->
+  <g transform="translate(0, 128)">
+    <use href="#star-shape" opacity="0.25" />
+  </g>
+</svg>
diff --git a/toolkit/themes/shared/extensions/recommended.svg b/toolkit/themes/shared/extensions/recommended.svg
new file mode 100644
index 0000000000..50e76612df
--- /dev/null
+++ b/toolkit/themes/shared/extensions/recommended.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">
+  <g fill="context-fill">
+    <path d="M11.45 0H.55C.25 0 0 .22 0 .5V3c0 1.1.98 2 2.18 2h.05a3.67 3.67 0 0 0 3.22 2.96V9.5h1.1V7.96A3.67 3.67 0 0 0 9.77 5h.05C11.02 5 12 4.1 12 3V.5c0-.28-.24-.5-.55-.5zM1.1 3V1h1.1v3c-.61 0-1.1-.45-1.1-1zm9.82 0c0 .55-.49 1-1.1 1V1h1.1v2zM7.1 10H4.9c-2.72 0-2.72 2-2.72 2h7.64s0-2-2.73-2z"/>
+  </g>
+</svg>
diff --git a/toolkit/themes/shared/findbar.css b/toolkit/themes/shared/findbar.css
new file mode 100644
index 0000000000..8dec03fd8e
--- /dev/null
+++ b/toolkit/themes/shared/findbar.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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+findbar {
+  border-top: 1px solid ThreeDShadow;
+  min-width: 1px;
+  transition-property: margin-bottom, visibility;
+  transition-duration: 150ms, 0s;
+  transition-timing-function: ease-in-out, linear;
+  padding-block: 6px;
+  background-color: -moz-dialog;
+  color: -moz-dialogtext;
+}
+
+findbar[hidden] {
+  /* Override display:none to make the transition work. */
+  display: flex;
+  margin-bottom: calc(-1 * (28px + 12px + 1px)); /* findbar-container's height + padding-block + top border */
+  visibility: collapse;
+  transition-delay: 0s, 150ms;
+}
+
+findbar[noanim],
+findbar[noanim] > .findbar-container,
+findbar[noanim] > .findbar-closebutton {
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+}
+
+.findbar-container {
+  margin-inline-start: 8px;
+  height: 28px;
+  overflow-inline: hidden; /* Ensures the close button stays visible. */
+  transition: opacity 150ms ease-in-out;
+}
+
+findbar[hidden] > .findbar-container {
+  opacity: 0;
+}
+
+/* Remove start margin when close button is on the left side (on macOS) */
+.findbar-closebutton + .findbar-container {
+  margin-inline-start: 0;
+}
+
+/* Search field */
+
+html|input.findbar-textbox {
+  appearance: none;
+  background-color: var(--input-bgcolor, var(--toolbar-field-background-color));
+  color: var(--input-color, var(--toolbar-field-color));
+  border: 1px solid var(--input-border-color, var(--toolbar-field-border-color));
+  border-radius: 4px;
+  outline: none;
+  margin: 0;
+  padding: 2px 5px;
+  padding-inline-start: 8px;
+  width: 18em;
+  box-sizing: border-box;
+}
+
+html|input.findbar-textbox::placeholder {
+  opacity: 0.69;
+}
+
+html|input.findbar-textbox:focus {
+  background-color: var(--toolbar-field-focus-background-color);
+  color: var(--toolbar-field-focus-color);
+  border-color: transparent;
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+  outline-color: var(--toolbar-field-focus-border-color);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
+}
+
+html|input.findbar-textbox:-moz-lwtheme::selection {
+  background-color: var(--lwt-toolbar-field-highlight, Highlight);
+  color: var(--lwt-toolbar-field-highlight-text, HighlightText);
+}
+
+html|input.findbar-textbox:not(:focus):-moz-lwtheme::selection {
+  background-color: var(--lwt-toolbar-field-highlight, text-select-background-disabled);
+}
+
+html|input.findbar-textbox[status="notfound"] {
+  background-color: rgba(226,40,80,.3);
+  color: inherit;
+}
+
+html|input.findbar-textbox[flash="true"] {
+  background-color: rgba(255,233,0,.3);
+  color: inherit;
+}
+
+/* Previous/next buttons */
+
+.findbar-find-previous,
+.findbar-find-next {
+  appearance: none;
+  padding: 4px 7px;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
+  color: inherit;
+  border-radius: 4px;
+}
+
+.findbar-find-previous:not([disabled]):hover,
+.findbar-find-next:not([disabled]):hover {
+  background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
+}
+
+.findbar-find-previous:not([disabled]):hover:active,
+.findbar-find-next:not([disabled]):hover:active {
+  background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
+}
+
+.findbar-find-previous {
+  list-style-image: url(chrome://global/skin/icons/arrow-up.svg);
+  margin-inline: 8px 0;
+}
+
+.findbar-find-next {
+  list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
+  margin-inline: 0 8px;
+}
+
+.findbar-find-previous[disabled="true"] > .toolbarbutton-icon,
+.findbar-find-next[disabled="true"] > .toolbarbutton-icon {
+  opacity: var(--toolbarbutton-disabled-opacity);
+}
+
+/* Checkboxes & Labels */
+
+.findbar-container > checkbox,
+.findbar-label {
+  margin: 0 8px;
+  flex-shrink: 0;
+}
+
+.findbar-find-status,
+.found-matches {
+  margin-inline-start: 12px;
+}
+
+.findbar-find-status[status="notfound"] {
+  font-weight: bold;
+}
+
+.find-status-icon {
+  display: none;
+}
+
+/* Close button */
+
+/* Increase specificity to override close-icon.css */
+.close-icon.findbar-closebutton {
+  margin: 2px 8px;
+  width: 24px;
+  fill: var(--toolbarbutton-icon-fill);
+  transition: opacity 150ms ease-in-out;
+}
+
+findbar[hidden] > .findbar-closebutton {
+  opacity: 0;
+}
+
+.close-icon.findbar-closebutton:hover {
+  background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
+  outline: none;
+}
+
+.close-icon.findbar-closebutton:hover:active {
+  background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
+}
diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css
new file mode 100644
index 0000000000..255a92e1d3
--- /dev/null
+++ b/toolkit/themes/shared/global-shared.css
@@ -0,0 +1,306 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* all localizable skin settings shall live here */
+@import url("chrome://global/skin/design-tokens-system.css");
+
+@import url("chrome://global/locale/intl.css");
+@import url("chrome://global/content/widgets.css");
+
+@import url("close-icon.css");
+
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --default-focusring-width: 2px;
+  --default-focusring: var(--default-focusring-width) dotted;
+
+  --arrowpanel-background: Field;
+  --arrowpanel-color: FieldText;
+  --arrowpanel-border-color: ThreeDShadow;
+  --arrowpanel-border-radius: 8px;
+  --arrowpanel-padding: 16px;
+
+  --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent);
+  --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent);
+
+  --panel-disabled-color: color-mix(in srgb, currentColor 40%, transparent);
+
+  --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
+
+  --toolbarbutton-icon-fill: currentColor;
+  --toolbarbutton-disabled-opacity: 0.4;
+
+  --toolbar-field-background-color: Field;
+  --toolbar-field-color: FieldText;
+  --toolbar-field-border-color: ThreeDShadow;
+  --toolbar-field-focus-background-color: Field;
+  --toolbar-field-focus-color: FieldText;
+}
+
+:root:-moz-lwtheme {
+  --toolbar-field-background-color: rgba(255, 255, 255, 0.8);
+  --toolbar-field-focus-background-color: white;
+  --toolbar-field-color: black;
+  --toolbar-field-focus-color: black;
+  --toolbar-field-border-color: transparent;
+}
+
+@media (prefers-contrast) {
+  :root:not(:-moz-lwtheme) {
+    --toolbarbutton-disabled-opacity: 0.3;
+
+    --panel-disabled-color: GrayText;
+  }
+}
+
+:is(menupopup, panel)[type=arrow] {
+  --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(--arrowpanel-padding);
+}
+
+/* Lightweight theme roots */
+
+:root[lwtheme-image] {
+  text-shadow: 0 -0.5px 1.5px white;
+}
+
+:root[lwtheme-image][lwtheme-brighttext] {
+  text-shadow: 1px 1px 1.5px black;
+}
+
+/* General styles */
+
+.plain {
+  appearance: none;
+  margin: 0 !important;
+  border: none;
+  padding: 0;
+}
+
+moz-input-box,
+html|input {
+  min-width: 0;
+}
+
+html|button,
+html|input,
+html|textarea {
+  font: inherit;
+}
+
+.header {
+  font-weight: bold;
+}
+
+.indent {
+  margin-inline-start: 23px;
+}
+
+.box-padded {
+  padding: 5px;
+}
+
+/* XUL iframe */
+
+xul|iframe {
+  border: none;
+  min-width: 10px;
+  min-height: 10px;
+}
+
+/* Label/description formatting */
+
+xul|description,
+xul|label {
+  cursor: default;
+  margin-block: 1px 2px;
+  margin-inline: 6px 5px;
+}
+
+xul|description {
+  margin-bottom: 4px;
+}
+
+xul|label[disabled="true"] {
+  color: GrayText;
+}
+
+.tooltip-label {
+  margin: 0;
+  word-wrap: break-word;
+  /* We must specify a min-width, otherwise word-wrap:break-word doesn't work.
+     See Bug 630864. */
+  min-width: 1px;
+}
+
+/* Links */
+
+.text-link,
+a {
+  color: -moz-nativehyperlinktext;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+:is(a, .text-link):-moz-lwtheme {
+  color: inherit;
+}
+
+:is(a, .text-link):focus-visible {
+  outline: var(--focus-outline);
+  /* Not using --focus-outline-offset here because that's intended for elements
+     with a background, and we only want a slight offset here while not
+     overlapping adjacent text. */
+  outline-offset: 1px;
+  border-radius: 1px;
+}
+
+/* Override properties set on buttons, to display the links without unwanted styling */
+button.text-link {
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+}
+
+button.text-link .button-text {
+ /* Cancel out the default internal margin */
+  margin: 0;
+}
+
+/* Textbox context menu */
+
+.textbox-contextmenu:-moz-locale-dir(rtl) {
+  direction: rtl;
+}
+
+/* Panel footer buttons */
+
+.panel-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin: 8px 16px 16px;
+}
+
+.panel-footer > button {
+  appearance: none;
+  border: 0;
+  border-radius: 4px;
+  color: var(--button-color, inherit);
+  background-color: var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent));
+  padding: 8px 16px;
+  font-weight: 600;
+  min-width: 0;
+  margin-inline: 8px 0;
+  margin-bottom: 0;
+}
+
+.panel-footer > button[disabled] {
+  opacity: 0.4;
+}
+
+.panel-footer > button:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.panel-footer > button:not([disabled]):hover {
+  background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent));
+}
+
+.panel-footer > button:not([disabled]):hover:active {
+  background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
+}
+
+.panel-footer > button:not([disabled])[default] {
+  color: var(--button-primary-color);
+  background-color: var(--button-primary-bgcolor);
+}
+
+.panel-footer > button:not([disabled])[default]:hover {
+  background-color: var(--button-primary-hover-bgcolor);
+}
+
+.panel-footer > button:not([disabled])[default]:hover:active {
+  background-color: var(--button-primary-active-bgcolor);
+}
+
+@media (-moz-platform: windows) {
+  /* Swap the primary and secondary action, because Windows
+   * platform conventions put the primary action on the left. */
+  .panel-footer:not(moz-button-group) > button[default] {
+    order: -1;
+  }
+}
+
+/* Autoscroll popup */
+
+.autoscroller {
+  appearance: none;
+
+  /* Resets the native styles in windows and macOS */
+  border: none;
+  background-color: transparent;
+  -moz-window-shadow: none;
+
+  --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll.svg");
+  --panel-border-color: rgba(0,0,0,.4);
+  --panel-padding: 0;
+  --panel-background: rgba(249,249,250,.8) no-repeat center var(--autoscroll-background-image);
+  --panel-shadow-margin: 4px;
+  /* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.jsm. */
+  pointer-events: none;
+}
+
+.autoscroller::part(content) {
+  border-radius: 100%;
+  background-clip: padding-box;
+  box-shadow: 0 0 var(--panel-shadow-margin) rgba(0,0,0,.2);
+  width: 100%;
+  height: 100%;
+}
+
+.autoscroller[scrolldir="NS"] {
+  --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-vertical.svg");
+}
+
+.autoscroller[scrolldir="EW"] {
+  --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-horizontal.svg");
+}
+
+/* Combobox dropdown renderer */
+#ContentSelectDropdown > menupopup {
+  /* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
+   * the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */
+  direction: ltr;
+}
+
+#ContentSelectDropdown > menupopup::part(arrowscrollbox-scrollbox) {
+  scrollbar-width: var(--content-select-scrollbar-width, auto);
+}
+
+#ContentSelectDropdown > menupopup[customoptionstyling="true"]::part(arrowscrollbox) {
+  /* When authors specify a custom background, we use background-image to specify the author-supplied color.
+   * In that case, we don't want stuff like custom appearance or custom
+   * backgrounds, so we make sure to apply it on top of the default background. */
+  background-image: var(--content-select-background-image, none);
+  background-color: -moz-Combobox;
+}
+
+/* Indent options in optgroups */
+.contentSelectDropdown-ingroup .menu-iconic-text {
+  padding-inline-start: 2em;
+}
+
+.deemphasized {
+  color: var(--text-color-deemphasized);
+}
diff --git a/toolkit/themes/shared/icons/arrow-down-12.svg b/toolkit/themes/shared/icons/arrow-down-12.svg
new file mode 100644
index 0000000000..6b9d465bc1
--- /dev/null
+++ b/toolkit/themes/shared/icons/arrow-down-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="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m6.24 8.999 3.614-3.613a.498.498 0 0 0 0-.707.5.5 0 0 0-.707 0L5.999 7.826 2.854 4.68a.5.5 0 0 0-.707.707L5.759 9l.481-.001z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/arrow-down.svg b/toolkit/themes/shared/icons/arrow-down.svg
new file mode 100644
index 0000000000..2a9c63322d
--- /dev/null
+++ b/toolkit/themes/shared/icons/arrow-down.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.352 10.999 5.466-5.465a.623.623 0 0 0-.001-.884.628.628 0 0 0-.885 0L7.998 9.585l-4.93-4.934a.626.626 0 0 0-.885.885L7.648 11l.704-.001z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/arrow-left-12.svg b/toolkit/themes/shared/icons/arrow-left-12.svg
new file mode 100644
index 0000000000..fcb778c185
--- /dev/null
+++ b/toolkit/themes/shared/icons/arrow-left-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="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m4.001 6.24 3.613 3.614a.498.498 0 0 0 .707 0 .5.5 0 0 0 0-.707L5.174 5.999 8.32 2.853a.5.5 0 0 0-.707-.707L4 5.759l.001.481z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/arrow-left.svg b/toolkit/themes/shared/icons/arrow-left.svg
new file mode 100644
index 0000000000..84029f99ef
--- /dev/null
+++ b/toolkit/themes/shared/icons/arrow-left.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="m5.001 8.352 5.465 5.466a.626.626 0 0 0 .884-.886L6.416 7.999l4.933-4.932a.626.626 0 0 0-.885-.885L5 7.647l.001.705z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/arrow-right-12.svg b/toolkit/themes/shared/icons/arrow-right-12.svg
new file mode 100644
index 0000000000..ee70aca638
--- /dev/null
+++ b/toolkit/themes/shared/icons/arrow-right-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="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.999 6.24 5.386 9.854a.498.498 0 0 1-.707 0 .5.5 0 0 1 0-.707L7.825 6 4.68 2.854a.5.5 0 0 1 .707-.707L9 5.759l-.001.481z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/arrow-right.svg b/toolkit/themes/shared/icons/arrow-right.svg
new file mode 100644
index 0000000000..4da8e2e90b
--- /dev/null
+++ b/toolkit/themes/shared/icons/arrow-right.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="m10.999 8.352-5.465 5.466a.626.626 0 0 1-.884-.886l4.935-4.934-4.934-4.931a.626.626 0 0 1 .885-.885L11 7.647l-.001.705z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/arrow-up-12.svg b/toolkit/themes/shared/icons/arrow-up-12.svg
new file mode 100644
index 0000000000..0663e18caa
--- /dev/null
+++ b/toolkit/themes/shared/icons/arrow-up-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="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m6.24 4.001 3.614 3.613a.498.498 0 0 1 0 .707.5.5 0 0 1-.707 0L5.999 5.174 2.854 8.32a.5.5 0 0 1-.707-.707L5.759 4l.481.001z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/arrow-up.svg b/toolkit/themes/shared/icons/arrow-up.svg
new file mode 100644
index 0000000000..7de1573bbd
--- /dev/null
+++ b/toolkit/themes/shared/icons/arrow-up.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.352 5.001 5.466 5.465a.623.623 0 0 1-.001.884.628.628 0 0 1-.885 0L7.999 6.416l-4.932 4.933a.626.626 0 0 1-.885-.885L7.648 5l.704.001z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/autoscroll-horizontal.svg b/toolkit/themes/shared/icons/autoscroll-horizontal.svg
new file mode 100644
index 0000000000..8ec0ee320d
--- /dev/null
+++ b/toolkit/themes/shared/icons/autoscroll-horizontal.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="22" height="10">
+  <path d="m 5.707,0.292 a 1,1 0 0 0 -1.414,0 L 0.293,4.288 a 1,1 0 0 0 0,1.412 L 4.293,9.695 a 1,1 0 0 0 1.414,-1.412 l -3.293,-3.289 3.293,-3.289 a 1,1 0 0 0 0,-1.412 z M 21.707,4.288 l -4,-4 a 1,1 0 0 0 -1.414,1.412 l 3.293,3.289 -3.293,3.289 a 1,1 0 1 0 1.414,1.412 l 4,-4 a 1,1 0 0 0 0,-1.412 z" fill="#0c0c0d" fill-opacity=".8"/>
+  <circle cx="11" cy="5" r="2" fill="#0c0c0d" fill-opacity=".6"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/autoscroll-vertical.svg b/toolkit/themes/shared/icons/autoscroll-vertical.svg
new file mode 100644
index 0000000000..ec41f7f4d1
--- /dev/null
+++ b/toolkit/themes/shared/icons/autoscroll-vertical.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="10" height="22">
+  <path d="m 8.280,16.293 -3.293,3.293 -3.293,-3.293 a 1,1 0 0 0 -1.414,1.414 l 4,4 a 1,1 0 0 0 1.414,0 l 4,-4 a 1,1 0 0 0 -1.414,-1.414 z M 5.694,0.293 a 1,1 0 0 0 -1.414,0 L 0.28,4.293 a 1,1 0 0 0 1.414,1.414 l 3.293,-3.293 3.293,3.293 a 1,1 0 0 0 1.414,-1.414 z" fill="#0c0c0d" fill-opacity=".8"/>
+  <circle cx="5" cy="11" r="2" fill="#0c0c0d" fill-opacity=".6"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/autoscroll.svg b/toolkit/themes/shared/icons/autoscroll.svg
new file mode 100644
index 0000000000..88325d89dd
--- /dev/null
+++ b/toolkit/themes/shared/icons/autoscroll.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="22" height="22">
+  <path d="m 13.293,17.293 -2.293,2.293 -2.293,-2.293 a 1,1 0 0 0 -1.414,1.414 l 3,3 a 1,1 0 0 0 1.414,0 l 3,-3 a 1,1 0 0 0 -1.414,-1.414 z m -1.586,-17 a 1,1 0 0 0 -1.414,0 L 7.293,3.293 a 1,1 0 0 0 1.414,1.414 l 2.293,-2.293 2.293,2.293 a 1,1 0 0 0 1.414,-1.414 z M 4.707,7.293 a 1,1 0 0 0 -1.414,0 L 0.293,10.293 a 1,1 0 0 0 0,1.414 l 3,3 a 1,1 0 0 0 1.414,-1.414 l -2.293,-2.293 2.293,-2.293 a 1,1 0 0 0 0,-1.414 z m 17,3 -3,-3 a 1,1 0 0 0 -1.414,1.414 l 2.293,2.293 -2.293,2.293 a 1,1 0 1 0 1.414,1.414 l 3,-3 a 1,1 0 0 0 0,-1.414 z" fill="#0c0c0d" fill-opacity=".8"/>
+  <circle cx="11" cy="11" r="2" fill="#0c0c0d" fill-opacity=".6"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/badge-blue.svg b/toolkit/themes/shared/icons/badge-blue.svg
new file mode 100644
index 0000000000..265e27e66c
--- /dev/null
+++ b/toolkit/themes/shared/icons/badge-blue.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="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill-opacity=".2" fill="#0DF" cx="8" cy="8" r="4"/><circle stroke-opacity=".5" stroke="#0090ED" fill="#00B3F4" cx="8" cy="8" r="2.5"/></g></svg>
\ No newline at end of file
diff --git a/toolkit/themes/shared/icons/blocked.svg b/toolkit/themes/shared/icons/blocked.svg
new file mode 100644
index 0000000000..ccd1308e18
--- /dev/null
+++ b/toolkit/themes/shared/icons/blocked.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.6 1.1c-4.1 0-7.5 3.4-7.5 7.5s3.4 7.5 7.5 7.5 7.5-3.4 7.5-7.5-3.3-7.5-7.5-7.5zM12 8c.3 0 .6.3.6.6s-.3.6-.6.6l-6.8 0c-.3 0-.6-.3-.6-.6s.3-.6.6-.6L12 8z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/check-partial.svg b/toolkit/themes/shared/icons/check-partial.svg
new file mode 100644
index 0000000000..420377ab8f
--- /dev/null
+++ b/toolkit/themes/shared/icons/check-partial.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" stroke-width="0.5" stroke="context-stroke none">
+  <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/toolkit/themes/shared/icons/check.svg b/toolkit/themes/shared/icons/check.svg
new file mode 100644
index 0000000000..3c356385c6
--- /dev/null
+++ b/toolkit/themes/shared/icons/check.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 stroke="context-stroke none" stroke-width="0.5" 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"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/chevron.svg b/toolkit/themes/shared/icons/chevron.svg
new file mode 100644
index 0000000000..bd0efccc68
--- /dev/null
+++ b/toolkit/themes/shared/icons/chevron.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.999 8.352-5.465 5.466a.626.626 0 0 1-.884-.886l4.935-4.934-4.934-4.931a.626.626 0 0 1 .885-.885L8 7.647l-.001.705z"/>
+  <path d="m13.999 8.352-5.465 5.466a.626.626 0 0 1-.884-.886l4.935-4.934-4.934-4.931a.626.626 0 0 1 .885-.885L14 7.647l-.001.705z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/close-12.svg b/toolkit/themes/shared/icons/close-12.svg
new file mode 100644
index 0000000000..9df6bee3b6
--- /dev/null
+++ b/toolkit/themes/shared/icons/close-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="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M5.859 6.849 2.854 9.854a.5.5 0 0 1-.707-.707l3.005-3.005 0-.283-3.005-3.006a.5.5 0 0 1 .707-.707l3.005 3.005.283 0 3.005-3.005a.5.5 0 0 1 .707.707L6.849 5.859l0 .283 3.005 3.005a.5.5 0 0 1-.707.707L6.142 6.849l.001.001-.284-.001z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/close-fill.svg b/toolkit/themes/shared/icons/close-fill.svg
new file mode 100644
index 0000000000..bc29b68be5
--- /dev/null
+++ b/toolkit/themes/shared/icons/close-fill.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 .5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm2.817 9.433a.628.628 0 0 1 0 .885.626.626 0 0 1-.884-.001L8.204 9.088l-.407-.001-1.729 1.729a.624.624 0 0 1-.885.001.628.628 0 0 1 0-.885l1.714-1.714 0-.437-1.714-1.714a.626.626 0 0 1 .885-.885l1.719 1.719.428 0 1.719-1.719a.626.626 0 0 1 .885.885L9.1 7.786l0 .428 1.717 1.719z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/close.svg b/toolkit/themes/shared/icons/close.svg
new file mode 100644
index 0000000000..85659eeeea
--- /dev/null
+++ b/toolkit/themes/shared/icons/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 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.108 7.776 4.709-4.709a.626.626 0 0 0-.884-.885L8.244 6.871l-.488 0-4.689-4.688a.625.625 0 1 0-.884.885L6.87 7.754l0 .491-4.687 4.687a.626.626 0 0 0 .884.885L7.754 9.13l.491 0 4.687 4.687a.627.627 0 0 0 .885 0 .626.626 0 0 0 0-.885L9.108 8.223l0-.447z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/columnpicker.svg b/toolkit/themes/shared/icons/columnpicker.svg
new file mode 100644
index 0000000000..3a41c51d84
--- /dev/null
+++ b/toolkit/themes/shared/icons/columnpicker.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="12" height="12" viewBox="0 0 12 12" fill="context-fill">
+  <path d="M2.03 2.06l-.03 8h4v-1H3l.03-4H6v1.97h1V5.06h2.97v2h1v-5H2.03zm1 1H6v1H3.03v-1zm3.97 0h2.97v1H7v-1zm5.53 4.97l-5.94.03 2.91 3.35 3.03-3.38z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/defaultFavicon.svg b/toolkit/themes/shared/icons/defaultFavicon.svg
new file mode 100644
index 0000000000..e1689b5e6d
--- /dev/null
+++ b/toolkit/themes/shared/icons/defaultFavicon.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-15zm2.447 1.75a6.255 6.255 0 0 1 3.756 5.125l-2.229 0A9.426 9.426 0 0 0 10.54 2.75l.407 0zm-2.049 0a8.211 8.211 0 0 1 2.321 5.125l-5.438 0A8.211 8.211 0 0 1 8.102 2.75l.796 0zm-2.846 0 .408 0a9.434 9.434 0 0 0-1.934 5.125l-2.229 0A6.254 6.254 0 0 1 6.052 2.75zm0 11.5a6.252 6.252 0 0 1-3.755-5.125l2.229 0A9.426 9.426 0 0 0 6.46 14.25l-.408 0zm2.05 0a8.211 8.211 0 0 1-2.321-5.125l5.437 0a8.211 8.211 0 0 1-2.321 5.125l-.795 0zm2.846 0-.409 0a9.418 9.418 0 0 0 1.934-5.125l2.229 0a6.253 6.253 0 0 1-3.754 5.125z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/delete.svg b/toolkit/themes/shared/icons/delete.svg
new file mode 100644
index 0000000000..b03c08e139
--- /dev/null
+++ b/toolkit/themes/shared/icons/delete.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 12.4c0 .3-.3.6-.6.6s-.6-.3-.6-.6l0-4.8c-.1-.3.2-.6.6-.6s.6.3.6.6l0 4.8z"/>
+  <path d="M10.2 12.4c0 .3-.3.6-.6.6s-.6-.3-.6-.6l0-4.8c0-.3.3-.6.6-.6s.6.3.6.6l0 4.8z"/>
+  <path d="M13.6 3 11 3l0-1c0-1.1-.9-2-2-2L7 0C5.9 0 5 .9 5 2l0 1-2.6 0c-.4 0-.6.2-.6.6s.2.6.6.6l.4 0 0 9.8c0 1.1.9 2 2 2l6.5 0c1.1 0 2-.9 2-2l0-9.8.4 0c.3 0 .6-.3.6-.6S14 3 13.6 3zM6.3 1.8l.6-.6 2.3 0 .6.6 0 1.2-3.5 0c0 0 0-1.2 0-1.2zM12 14.1l-.6.6-6.8 0-.6-.6 0-9.9 8 0 0 9.9z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/developer.svg b/toolkit/themes/shared/icons/developer.svg
new file mode 100644
index 0000000000..d02257d4d1
--- /dev/null
+++ b/toolkit/themes/shared/icons/developer.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.555 3.2l-2.434 2.436a1.243 1.243 0 1 1-1.757-1.757L12.8 1.445A3.956 3.956 0 0 0 11 1a3.976 3.976 0 0 0-3.434 6.02l-6.273 6.273a1 1 0 1 0 1.414 1.414L8.98 8.434A3.96 3.96 0 0 0 11 9a4 4 0 0 0 4-4 3.956 3.956 0 0 0-.445-1.8z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/edit-copy.svg b/toolkit/themes/shared/icons/edit-copy.svg
new file mode 100644
index 0000000000..9be786fb30
--- /dev/null
+++ b/toolkit/themes/shared/icons/edit-copy.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.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/edit.svg b/toolkit/themes/shared/icons/edit.svg
new file mode 100644
index 0000000000..54efa522c0
--- /dev/null
+++ b/toolkit/themes/shared/icons/edit.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" fill="context-fill">
+  <path d="M14.354,2.353 L13.646,1.646 C12.8634135,0.869077203 11.6005865,0.869077203 10.818,1.646 L10.439,2.025 C10.243809,2.22024993 10.243809,2.53675007 10.439,2.732 L13.268,5.561 C13.4632499,5.75619097 13.7797501,5.75619097 13.975,5.561 L14.354,5.182 C15.1310392,4.39907156 15.1310392,3.13592844 14.354,2.353 L14.354,2.353 Z M9.732,3.439 C9.53675007,3.24380903 9.22024993,3.24380903 9.025,3.439 L3.246,9.218 C3.04609788,9.4202372 2.89195626,9.66304436 2.794,9.93 L1.038,14.32 C0.978937968,14.4730418 0.998703668,14.64532 1.09089211,14.7810086 C1.18308054,14.9166972 1.33596355,14.998534 1.5,15 C1.56446593,14.9999016 1.62830455,14.9873376 1.688,14.963 L6.07,13.211 C6.33884461,13.1135406 6.58319198,12.9586052 6.786,12.757 L12.565,6.979 C12.760191,6.78375007 12.760191,6.46724993 12.565,6.272 L9.732,3.439 Z M5.161,12.5 L2.612,13.52 C2.57485383,13.5348687 2.53242052,13.5261642 2.50412814,13.4978719 C2.47583577,13.4695795 2.46713127,13.4271462 2.482,13.39 L3.5,10.831 C3.51340062,10.80154 3.54023032,10.780387 3.5720041,10.7742308 C3.60377787,10.7680746 3.63656633,10.7776766 3.66,10.8 L5.2,12.335 C5.22422581,12.3595088 5.23412532,12.3947644 5.22619838,12.4283014 C5.21827143,12.4618385 5.1936351,12.488931 5.161,12.5 L5.161,12.5 Z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/error.svg b/toolkit/themes/shared/icons/error.svg
new file mode 100644
index 0000000000..2552a35be9
--- /dev/null
+++ b/toolkit/themes/shared/icons/error.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="M7.625 15.5a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15zM8.25 4.625a.625.625 0 0 0-1.25 0l0 4.438a.625.625 0 0 0 1.25 0l0-4.438zm0 6.375L8 10.75l-.75 0L7 11l0 .75.25.25.75 0 .25-.25 0-.75z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/experiments.svg b/toolkit/themes/shared/icons/experiments.svg
new file mode 100644
index 0000000000..b9d9899b90
--- /dev/null
+++ b/toolkit/themes/shared/icons/experiments.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" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m7 13.5-1.5 0-.5.5 0 1.5.5.5L7 16l.5-.5 0-1.5z"/>
+  <path d="M14.018 4.983a21.535 21.535 0 0 0-3.017-2.514c1.317-.628 2.571-.982 3.618-.982.886 0 1.626.242 2.14.755.255.256.438.572.562.93.292-.106.603-.173.931-.173.203 0 .399.025.589.067-.179-.731-.511-1.373-1.022-1.884-1.745-1.746-4.963-1.495-8.32.352C6.141-.314 2.924-.563 1.18 1.181c-1.743 1.744-1.489 4.958.356 8.314-1.85 3.36-2.101 6.58-.356 8.326C1.98 18.62 3.089 19 4.379 19c1.526 0 3.307-.55 5.127-1.552C11.322 18.451 13.098 19 14.621 19c1.29 0 2.399-.381 3.199-1.18 2.533-2.534.862-8.173-3.802-12.837zM2.241 2.242c.514-.513 1.254-.755 2.14-.755 1.047 0 2.301.355 3.618.982a21.342 21.342 0 0 0-3.017 2.514 21.371 21.371 0 0 0-2.519 3.025c-1.164-2.436-1.344-4.645-.222-5.766zm0 14.517c-1.121-1.122-.94-3.331.223-5.767a20.923 20.923 0 0 0 1.623 2.076c.313-.401.73-.712 1.217-.89a19.058 19.058 0 0 1-2.019-2.677 19.486 19.486 0 0 1 2.758-3.458A19.497 19.497 0 0 1 9.5 3.284a19.497 19.497 0 0 1 3.457 2.759 19.448 19.448 0 0 1 2.752 3.449 19.265 19.265 0 0 1-2.752 3.465c-3.935 3.934-8.84 5.675-10.716 3.802zm14.518 0c-1.124 1.122-3.336.942-5.774-.226a21.33 21.33 0 0 0 3.033-2.515 21.42 21.42 0 0 0 2.521-3.019c1.16 2.433 1.34 4.639.22 5.76z"/>
+  <path d="m19 4.5-1.5 0-.5.5 0 1.5.5.5L19 7l.5-.5 0-1.5z"/>
+  <path d="M9.5 12.5c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zm0-4.5C8.673 8 8 8.673 8 9.5S8.673 11 9.5 11s1.5-.673 1.5-1.5S10.327 8 9.5 8z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/folder.svg b/toolkit/themes/shared/icons/folder.svg
new file mode 100644
index 0000000000..eef51c2d78
--- /dev/null
+++ b/toolkit/themes/shared/icons/folder.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.995 14-10.99 0A2.007 2.007 0 0 1 1 11.995l0-8.99C1 1.899 1.899 1 3.005 1l2.958 0a2.01 2.01 0 0 1 1.47.641L8.693 3l5.302 0C15.101 3 16 3.899 16 5.005l0 6.99A2.007 2.007 0 0 1 13.995 14zM2.85 2.25l-.6.6 0 9.3.6.6 11.3 0 .6-.6 0-7.3-.6-.6-5.73 0-.458-.2-1.445-1.559a.758.758 0 0 0-.554-.241l-3.113 0z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/heart.svg b/toolkit/themes/shared/icons/heart.svg
new file mode 100644
index 0000000000..bc2e160814
--- /dev/null
+++ b/toolkit/themes/shared/icons/heart.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" fill="context-fill">
+  <path d="M8 6s0-4 3.5-4S15 5 15 6c0 4.5-7 9-7 9z"/>
+  <path d="M8 6s0-4-3.5-4S1 5 1 6c0 4.5 7 9 7 9l1-6z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/help.svg b/toolkit/themes/shared/icons/help.svg
new file mode 100644
index 0000000000..61eda9fa5c
--- /dev/null
+++ b/toolkit/themes/shared/icons/help.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.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="M7.625 9.709A.625.625 0 0 1 7 9.084l0-.767c0-.527.37-.987.879-1.092.577-.12.996-.635.996-1.225a1.252 1.252 0 0 0-2.432-.409.626.626 0 0 1-1.181-.408A2.5 2.5 0 1 1 8.25 8.421l0 .663c0 .345-.28.625-.625.625z"/>
+  <path d="m8 12-.75 0-.25-.25L7 11l.25-.25.75 0 .25.25 0 .75z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/highlights.svg b/toolkit/themes/shared/icons/highlights.svg
new file mode 100644
index 0000000000..c7131d2114
--- /dev/null
+++ b/toolkit/themes/shared/icons/highlights.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="M10 14a1.62 1.62 0 0 1-1.615-1.305l-.357-1.667a1.377 1.377 0 0 0-1.056-1.055l-1.667-.357C4.524 9.447 4 8.798 4 8s.524-1.447 1.305-1.615l1.667-.357a1.38 1.38 0 0 0 1.056-1.056l.358-1.667C8.553 2.524 9.202 2 10 2s1.447.524 1.615 1.305l.357 1.667c.114.528.528.942 1.056 1.055l1.667.357C15.476 6.553 16 7.202 16 8s-.524 1.447-1.305 1.615l-1.667.357a1.378 1.378 0 0 0-1.056 1.057l-.358 1.666A1.618 1.618 0 0 1 10 14zm0-10.75c-.098 0-.331.03-.392.316L9.25 5.234A2.63 2.63 0 0 1 7.234 7.25l-1.667.357c-.286.062-.317.295-.317.393s.031.331.317.393l1.667.357a2.63 2.63 0 0 1 2.016 2.016l.358 1.668c.061.286.294.316.392.316s.331-.03.392-.316l.358-1.667a2.63 2.63 0 0 1 2.016-2.017l1.667-.357c.286-.062.317-.295.317-.393s-.031-.331-.317-.393l-1.667-.357a2.63 2.63 0 0 1-2.016-2.016l-.358-1.668c-.061-.286-.294-.316-.392-.316z"/>
+  <path d="m2.444 12.151.182-.849c.086-.402.66-.402.747 0l.182.849a.381.381 0 0 0 .293.293l.849.182c.402.086.402.66 0 .747l-.849.182a.381.381 0 0 0-.293.293l-.182.849c-.086.402-.66.402-.747 0l-.182-.849a.381.381 0 0 0-.293-.293l-.849-.182c-.402-.086-.402-.66 0-.747l.849-.182a.38.38 0 0 0 .293-.293z"/>
+  <path d="m2.444 2.151.182-.849c.086-.402.66-.402.747 0l.182.849a.381.381 0 0 0 .293.293l.849.182c.402.086.402.66 0 .747l-.848.183a.38.38 0 0 0-.293.293l-.183.849c-.086.402-.66.402-.747 0l-.182-.849a.38.38 0 0 0-.293-.293l-.849-.183c-.402-.086-.402-.66 0-.747l.849-.182a.38.38 0 0 0 .293-.293z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/indicator-private-browsing.svg b/toolkit/themes/shared/icons/indicator-private-browsing.svg
new file mode 100644
index 0000000000..4cdc760e3c
--- /dev/null
+++ b/toolkit/themes/shared/icons/indicator-private-browsing.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" width="20" height="20">
+  <circle fill="#8000D7" cx="10" cy="10" r="9.5"/>
+  <path fill="#FFFFFF" d="M17.436 7.357c-1.429-1.876-4.235-2.116-5.982-.511l-.977.898-.957 0-.977-.898c-1.748-1.605-4.554-1.365-5.983.511-.185.731.101 3.431.263 3.856.325 1.715 1.727 3.005 3.408 3.005.839 0 1.599-.335 2.2-.871l.366-.313a1.813 1.813 0 0 1 2.354-.019l.55.456 0-.002c.579.466 1.289.751 2.065.751 1.68 0 3.082-1.29 3.408-3.005.161-.427.457-3.115.262-3.858z"/>
+  <path fill="#8000D7" d="M6.625 8.553c-.697 0-1.317.291-1.717.743a.65.65 0 0 0 0 .848c.4.452 1.02.743 1.717.743s1.317-.291 1.717-.743a.65.65 0 0 0 0-.848c-.4-.452-1.02-.743-1.717-.743z"/>
+  <path fill="#8000D7" d="M13.375 8.553c-.697 0-1.317.291-1.717.743a.65.65 0 0 0 0 .848c.4.452 1.02.743 1.717.743.697 0 1.317-.291 1.717-.743a.65.65 0 0 0 0-.848c-.4-.452-1.02-.743-1.717-.743z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/info-filled.svg b/toolkit/themes/shared/icons/info-filled.svg
new file mode 100644
index 0000000000..62ed3def93
--- /dev/null
+++ b/toolkit/themes/shared/icons/info-filled.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="M7.625.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm.625 10.875a.625.625 0 0 1-1.25 0l0-4.437a.625.625 0 0 1 1.25 0l0 4.437zM8.25 5 8 5.25l-.75 0L7 5l0-.75.25-.25L8 4l.25.25 0 .75z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/info.svg b/toolkit/themes/shared/icons/info.svg
new file mode 100644
index 0000000000..f85c206417
--- /dev/null
+++ b/toolkit/themes/shared/icons/info.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.25 6.938a.625.625 0 0 0-1.25 0l0 4.438a.625.625 0 0 0 1.25-.001l0-4.437z"/>
+  <path d="m8 4-.75 0-.25.25L7 5l.25.25.75 0L8.25 5l0-.75z"/>
+  <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"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/lightbulb.svg b/toolkit/themes/shared/icons/lightbulb.svg
new file mode 100644
index 0000000000..04088549c3
--- /dev/null
+++ b/toolkit/themes/shared/icons/lightbulb.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="M5.625 16a.625.625 0 0 1 0-1.25l4.75 0a.625.625 0 0 1 0 1.25l-4.75 0z"/>
+  <path d="m9.534 13-3.068 0a1.621 1.621 0 0 1-1.601-1.348l-.34-1.956C2.966 8.493 2.226 6.515 2.592 4.488 2.983 2.322 4.685.566 6.828.119c1.66-.343 3.352.062 4.642 1.111a5.482 5.482 0 0 1-.041 8.549l-.294 1.873A1.622 1.622 0 0 1 9.534 13zm.369-1.561.341-1.958c.046-.264.188-.504.402-.676 1.019-.818 1.603-2.022 1.603-3.306s-.572-2.487-1.569-3.298a4.247 4.247 0 0 0-2.692-.95c-.3 0-.604.03-.907.094-1.648.342-2.958 1.695-3.259 3.366a4.214 4.214 0 0 0 1.53 4.093c.215.172.358.413.404.678l.34 1.956.37.312 3.067 0 .37-.311z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/link.svg b/toolkit/themes/shared/icons/link.svg
new file mode 100644
index 0000000000..4846d7253a
--- /dev/null
+++ b/toolkit/themes/shared/icons/link.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" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <rect x="7" y="3.286" width="2" height="9.429" rx="1" ry="1" transform="rotate(-45 8 8)"/>
+  <path d="M2.354 4.522L4.485 2.39a.5.5 0 0 1 .711 0l3.19 3.19.014-.015a2 2 0 0 0 0-2.821L6.272.616a2 2 0 0 0-2.821 0L.616 3.451a2 2 0 0 0 0 2.821L2.744 8.4a1.993 1.993 0 0 0 2.8.02l-3.19-3.186a.5.5 0 0 1 0-.712z"/>
+  <path d="M15.416 9.759L13.287 7.63a2 2 0 0 0-2.821 0l-.015.015 3.189 3.189a.5.5 0 0 1 0 .711l-2.132 2.132a.5.5 0 0 1-.711 0L7.61 10.49a1.993 1.993 0 0 0 .02 2.8l2.128 2.128a2 2 0 0 0 2.821 0l2.835-2.835a2 2 0 0 0 .002-2.824z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/loading.png b/toolkit/themes/shared/icons/loading.png
new file mode 100644
index 0000000000..b886c73eff
--- /dev/null
+++ b/toolkit/themes/shared/icons/loading.png
diff --git a/toolkit/themes/shared/icons/loading@2x.png b/toolkit/themes/shared/icons/loading@2x.png
new file mode 100644
index 0000000000..ac928c5853
--- /dev/null
+++ b/toolkit/themes/shared/icons/loading@2x.png
diff --git a/toolkit/themes/shared/icons/more.svg b/toolkit/themes/shared/icons/more.svg
new file mode 100644
index 0000000000..9fd6e47ec2
--- /dev/null
+++ b/toolkit/themes/shared/icons/more.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 7 1.5 7l-.5.5L1 9l.5.5 1.5 0 .5-.5 0-1.5z"/>
+  <path d="m8.75 7-1.5 0-.5.5 0 1.5.5.5 1.5 0 .5-.5 0-1.5z"/>
+  <path d="M14.5 7 13 7l-.5.5 0 1.5.5.5 1.5 0L15 9l0-1.5z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/open-in-new.svg b/toolkit/themes/shared/icons/open-in-new.svg
new file mode 100644
index 0000000000..ee2cbfd41b
--- /dev/null
+++ b/toolkit/themes/shared/icons/open-in-new.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="M10.707 1a.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 15 5.293L15 1.3l-.3-.3-3.993 0z"/>
+  <path d="M7.375 2.25a.625.625 0 0 0 0-1.25L3 1a2 2 0 0 0-2 2l0 10a2 2 0 0 0 2 2l10 0a2 2 0 0 0 2-2l0-4.375a.625.625 0 0 0-1.25 0l0 4.525-.6.6-10.3 0-.6-.6 0-10.3.6-.6 4.525 0z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/page-landscape.svg b/toolkit/themes/shared/icons/page-landscape.svg
new file mode 100644
index 0000000000..978275b63b
--- /dev/null
+++ b/toolkit/themes/shared/icons/page-landscape.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 6.578 15 12a2 2 0 0 1-2 2L3 14a2 2 0 0 1-2-2l0-8a2 2 0 0 1 2-2l7.422 0a2 2 0 0 1 1.414.586l2.578 2.578A2 2 0 0 1 15 6.578zM10 3.25l-7.15 0-.6.6 0 8.3.6.6 10.3 0 .6-.6 0-5.15-3.15 0-.6-.6 0-3.15z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/page-portrait.svg b/toolkit/themes/shared/icons/page-portrait.svg
new file mode 100644
index 0000000000..cb1a41d93d
--- /dev/null
+++ b/toolkit/themes/shared/icons/page-portrait.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="M9.422 1 4 1a2 2 0 0 0-2 2l0 10a2 2 0 0 0 2 2l8 0a2 2 0 0 0 2-2l0-7.422a2 2 0 0 0-.586-1.414l-2.578-2.578A2 2 0 0 0 9.422 1zm3.328 5 0 7.15-.6.6-8.3 0-.6-.6 0-10.3.6-.6 5.15 0L9 5.4l.6.6 3.15 0z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/performance.svg b/toolkit/themes/shared/icons/performance.svg
new file mode 100644
index 0000000000..00e4cb1d17
--- /dev/null
+++ b/toolkit/themes/shared/icons/performance.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">
+  <path fill="context-fill" d="M8 1a8 8 0 0 0-8 8 7.89 7.89 0 0 0 .78 3.43 1 1 0 0 0 .9.57.94.94 0 0 0 .43-.1 1 1 0 0 0 .47-1.33A6.07 6.07 0 0 1 2 9a6 6 0 0 1 12 0 5.93 5.93 0 0 1-.59 2.57 1 1 0 0 0 1.81.86A7.89 7.89 0 0 0 16 9a8 8 0 0 0-8-8z"/>
+  <path fill="context-fill" d="M11.77 7.08a.5.5 0 0 0-.69.15L8.62 11.1A2.12 2.12 0 0 0 8 11a2 2 0 0 0 0 4 2.05 2.05 0 0 0 1.12-.34 2.31 2.31 0 0 0 .54-.54 2 2 0 0 0 0-2.24 2.31 2.31 0 0 0-.2-.24l2.46-3.87a.5.5 0 0 0-.15-.69z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/plugin-blocked.svg b/toolkit/themes/shared/icons/plugin-blocked.svg
new file mode 100644
index 0000000000..9859878c86
--- /dev/null
+++ b/toolkit/themes/shared/icons/plugin-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="m6.897 4.25 6.253 0 .6.6 0 6.253 1.218 1.218c.017-.105.032-.211.032-.321l0-7a2 2 0 0 0-2-2l0-1a1 1 0 0 0-1-1l-2 0a1 1 0 0 0-1 1l0 1-2 0 0-1a1 1 0 0 0-1-1L4 1c-.104 0-.199.03-.294.059L6.897 4.25z"/>
+  <path d="M14.817 13.933 2.067 1.183a.626.626 0 0 0-.885.885L2.26 3.145A1.998 1.998 0 0 0 1 5l0 7a2 2 0 0 0 2 2l10 0c.036 0 .07-.008.105-.01l.828.828a.626.626 0 0 0 .884-.885zM2.85 12.75l-.6-.6 0-7.3.6-.6.515 0 8.5 8.5-9.015 0z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/plugin.svg b/toolkit/themes/shared/icons/plugin.svg
new file mode 100644
index 0000000000..994b8f7a00
--- /dev/null
+++ b/toolkit/themes/shared/icons/plugin.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 3 0-1a1 1 0 0 0-1-1l-2 0a1 1 0 0 0-1 1l0 1-2 0 0-1a1 1 0 0 0-1-1L4 1a1 1 0 0 0-1 1l0 1a2 2 0 0 0-2 2l0 7a2 2 0 0 0 2 2l10 0a2 2 0 0 0 2-2l0-7a2 2 0 0 0-2-2zm.75 9.15-.6.6-10.3 0-.6-.6 0-7.3.6-.6 10.3 0 .6.6 0 7.3z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/plus.svg b/toolkit/themes/shared/icons/plus.svg
new file mode 100644
index 0000000000..2cdd074173
--- /dev/null
+++ b/toolkit/themes/shared/icons/plus.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" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M7 9.75 7 14a.625.625 0 0 0 1.25 0l0-4.25.5-.5 4.25 0A.625.625 0 0 0 13 8L8.75 8l-.5-.5 0-4.25a.625.625 0 0 0-1.25 0L7 7.5l-.5.5-4.25 0a.625.625 0 0 0 0 1.25l4.137 0z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/pocket-outline.svg b/toolkit/themes/shared/icons/pocket-outline.svg
new file mode 100644
index 0000000000..8cb42204cd
--- /dev/null
+++ b/toolkit/themes/shared/icons/pocket-outline.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 3.25.75.75 0 3.498c0 .801-.148 1.527-.466 2.248-.28.68-.68 1.285-1.222 1.85-.5.521-1.102.929-1.789 1.212a5.899 5.899 0 0 1-2.248.466 5.424 5.424 0 0 1-2.248-.466 5.836 5.836 0 0 1-1.832-1.204 5.967 5.967 0 0 1-1.23-1.832 5.92 5.92 0 0 1-.465-2.248L2.25 4 3 3.25l10 0M13 2 3 2a2 2 0 0 0-2 2l0 3.524c0 .942.204 1.858.56 2.724.382.865.865 1.604 1.502 2.24a7.14 7.14 0 0 0 2.24 1.476c.865.382 1.756.56 2.724.56a7.15 7.15 0 0 0 2.724-.56 6.433 6.433 0 0 0 2.215-1.502 7.14 7.14 0 0 0 1.476-2.24A6.623 6.623 0 0 0 15 7.498L15 4a2 2 0 0 0-2-2z"/>
+  <path d="M7.66 10 4.182 6.523a.626.626 0 0 1 .885-.885L8 8.572l2.933-2.934a.626.626 0 0 1 .885.885L8.34 10l-.68 0z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/pocket.svg b/toolkit/themes/shared/icons/pocket.svg
new file mode 100644
index 0000000000..e086af6990
--- /dev/null
+++ b/toolkit/themes/shared/icons/pocket.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 2 3 2a2 2 0 0 0-2 2l0 3.524c0 .942.204 1.858.56 2.724.382.865.865 1.604 1.502 2.24a7.14 7.14 0 0 0 2.24 1.476c.865.382 1.756.56 2.724.56a7.15 7.15 0 0 0 2.724-.56 6.433 6.433 0 0 0 2.215-1.502 7.14 7.14 0 0 0 1.476-2.24A6.623 6.623 0 0 0 15 7.498L15 4a2 2 0 0 0-2-2zm-1.183 4.523L8.34 10l-.68 0-3.478-3.477a.626.626 0 0 1 .885-.885L8 8.572l2.933-2.934a.626.626 0 0 1 .885 0 .63.63 0 0 1-.001.885z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/print.svg b/toolkit/themes/shared/icons/print.svg
new file mode 100644
index 0000000000..468d629aba
--- /dev/null
+++ b/toolkit/themes/shared/icons/print.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 4-1 0 0-2a2 2 0 0 0-2-2L6 0a2 2 0 0 0-2 2l0 2-1 0a2 2 0 0 0-2 2l0 5a2 2 0 0 0 2 2l1 0 0 1a2 2 0 0 0 2 2l4 0a2 2 0 0 0 2-2l0-1 1 0a2 2 0 0 0 2-2l0-5a2 2 0 0 0-2-2zm-2.25 10.15-.6.6-4.3 0-.6-.6 0-4.15 5.5 0 0 4.15zm0-10.15-5.5 0 0-2.15.6-.6 4.3 0 .6.6 0 2.15zM13 7.6l-.4.4-1.2 0-.4-.4 0-1.2.4-.4 1.2 0 .4.4 0 1.2z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/radio.svg b/toolkit/themes/shared/icons/radio.svg
new file mode 100644
index 0000000000..d23d5c4537
--- /dev/null
+++ b/toolkit/themes/shared/icons/radio.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">
+  <circle cx="8" cy="8" r="4"/>
+</svg>
+
diff --git a/toolkit/themes/shared/icons/reload.svg b/toolkit/themes/shared/icons/reload.svg
new file mode 100644
index 0000000000..efe90f99a8
--- /dev/null
+++ b/toolkit/themes/shared/icons/reload.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="M10.707 6 14.7 6l.3-.3 0-3.993a.5.5 0 0 0-.854-.354l-1.459 1.459A6.95 6.95 0 0 0 8 1C4.141 1 1 4.141 1 8s3.141 7 7 7a6.97 6.97 0 0 0 6.968-6.322.626.626 0 0 0-.562-.682.635.635 0 0 0-.682.562A5.726 5.726 0 0 1 8 13.75c-3.171 0-5.75-2.579-5.75-5.75S4.829 2.25 8 2.25a5.71 5.71 0 0 1 3.805 1.445l-1.451 1.451a.5.5 0 0 0 .353.854z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/resizer.svg b/toolkit/themes/shared/icons/resizer.svg
new file mode 100644
index 0000000000..116b144bef
--- /dev/null
+++ b/toolkit/themes/shared/icons/resizer.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 xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+  <path d="M14.342 2.129l-.482-.483a.5.5 0 0 1 0 .708L2.354 13.86a.5.5 0 0 1-.708 0l.483.482a.5.5 0 0 0 .707 0L14.342 2.836a.5.5 0 0 0 0-.707z" fill="#f9f9fa" opacity=".4"/>
+  <path d="M14.356 5.649l-.5-.5a.5.5 0 0 1 0 .707l-8 8a.5.5 0 0 1-.707 0l.5.5a.5.5 0 0 0 .707 0l8-8a.5.5 0 0 0 0-.707z" fill="#f9f9fa" opacity=".4"/>
+  <path d="M14.363 9.158l-.511-.511a.5.5 0 0 1 0 .707l-4.5 4.5a.5.5 0 0 1-.707 0l.511.511a.5.5 0 0 0 .707 0l4.5-4.5a.5.5 0 0 0 0-.707z" fill="#f9f9fa" opacity=".4"/>
+  <path d="M14.315 12.621l-.468-.468a.5.5 0 0 1 0 .707l-.993.993a.5.5 0 0 1-.707 0l.468.468a.5.5 0 0 0 .707 0l.993-.993a.5.5 0 0 0 0-.707z" fill="#f9f9fa" opacity=".4"/>
+  <path d="M13.86 1.646a.5.5 0 0 0-.708 0L1.646 13.152a.5.5 0 1 0 .708.708L13.86 2.354a.5.5 0 0 0 0-.708z" fill="#0c0c0d" opacity=".6"/>
+  <path d="M13.854 5.146a.5.5 0 0 0-.707 0l-8 8a.5.5 0 0 0 .707.707l8-8a.5.5 0 0 0 0-.707z" fill="#0c0c0d" opacity=".6"/>
+  <path d="M13.852 8.647a.5.5 0 0 0-.707 0l-4.5 4.5a.5.5 0 0 0 .707.707l4.5-4.5a.5.5 0 0 0 0-.707z" fill="#0c0c0d" opacity=".6"/>
+  <path d="M13.847 12.153a.5.5 0 0 0-.707 0l-.993.993a.5.5 0 1 0 .707.707l.993-.993a.5.5 0 0 0 0-.707z" fill="#0c0c0d" opacity=".6"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/search-glass.svg b/toolkit/themes/shared/icons/search-glass.svg
new file mode 100644
index 0000000000..3208646996
--- /dev/null
+++ b/toolkit/themes/shared/icons/search-glass.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="m10.089 10.973 3.845 3.844a.62.62 0 0 0 .883-.001.625.625 0 0 0-.001-.884L10.983 10.1l.006-.427A5.5 5.5 0 1 0 1 6.5 5.5 5.5 0 0 0 6.5 12c1.189 0 2.288-.38 3.187-1.022l.402-.005zM6.5 10.75c-2.343 0-4.25-1.907-4.25-4.25S4.157 2.25 6.5 2.25s4.25 1.907 4.25 4.25-1.907 4.25-4.25 4.25z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/security-broken.svg b/toolkit/themes/shared/icons/security-broken.svg
new file mode 100644
index 0000000000..1e7f3eec96
--- /dev/null
+++ b/toolkit/themes/shared/icons/security-broken.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="M5.287 3.635A2.744 2.744 0 0 1 8 1.25 2.752 2.752 0 0 1 10.75 4l0 3-2.098 0 1.25 1.25 2.248 0 .6.6 0 2.248 1.25 1.25L14 9a2 2 0 0 0-2-2l0-3c0-2.206-1.794-4-4-4-1.716 0-3.17 1.091-3.737 2.611l1.024 1.024z"/>
+  <path d="m12.75 13.868 0 .282-.6.6-8.3 0-.6-.6 0-5.3.6-.6 3.282 0L5.882 7 5.25 7l0-.632L4 5.118 4 7a2 2 0 0 0-2 2l0 5a2 2 0 0 0 2 2l8 0a1.99 1.99 0 0 0 1.801-1.145l-1.051-.987z"/>
+  <path fill="#F90D3F" d="M14.375 16a.623.623 0 0 1-.442-.183L1.183 3.068a.626.626 0 0 1 .884-.885l12.75 12.75a.628.628 0 0 1 0 .885.622.622 0 0 1-.442.182z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/security-warning.svg b/toolkit/themes/shared/icons/security-warning.svg
new file mode 100644
index 0000000000..804befad29
--- /dev/null
+++ b/toolkit/themes/shared/icons/security-warning.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="m5.172 14.75-3.322 0-.6-.6 0-5.3.6-.6 6.947 0 .266-.464c.227-.396.571-.648.95-.784C10.009 7.001 10.005 7 10 7l0-3c0-2.206-1.794-4-4-4S2 1.794 2 4l0 3a2 2 0 0 0-2 2l0 5a2 2 0 0 0 2 2l3.359 0a1.778 1.778 0 0 1-.187-1.25zM3.25 4c0-1.517 1.233-2.75 2.75-2.75S8.75 2.483 8.75 4l0 3-5.5 0 0-3z"/>
+  <path d="M14.971 14.266 11.66 8.493c-.454-.791-1.615-.791-2.069 0L6.28 14.266C5.834 15.041 6.406 16 7.314 16l6.623 0c.907 0 1.479-.959 1.034-1.734zm-3.721-1.892a.625.625 0 0 1-1.25 0l0-1.747a.625.625 0 0 1 1.25 0l0 1.747zM10.625 15a.625.625 0 1 1 0-1.25.625.625 0 0 1 0 1.25z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/security.svg b/toolkit/themes/shared/icons/security.svg
new file mode 100644
index 0000000000..62cd23abfc
--- /dev/null
+++ b/toolkit/themes/shared/icons/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 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m12 7 0-3c0-2.206-1.794-4-4-4S4 1.794 4 4l0 3a2 2 0 0 0-2 2l0 5a2 2 0 0 0 2 2l8 0a2 2 0 0 0 2-2l0-5a2 2 0 0 0-2-2zM5.25 4c0-1.517 1.233-2.75 2.75-2.75S10.75 2.483 10.75 4l0 3-5.5 0 0-3zm7.5 10.15-.6.6-8.3 0-.6-.6 0-5.3.6-.6 8.3 0 .6.6 0 5.3z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/settings.svg b/toolkit/themes/shared/icons/settings.svg
new file mode 100644
index 0000000000..8d8f791abe
--- /dev/null
+++ b/toolkit/themes/shared/icons/settings.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.628 16-1.25 0a1.632 1.632 0 0 1-1.562-1.177l-.406-1.414a5.939 5.939 0 0 1-.78-.466l-1.448.36a1.632 1.632 0 0 1-1.799-.765l-.625-1.082a1.633 1.633 0 0 1 .229-1.931l1.045-1.101A3.279 3.279 0 0 1 2 8c0-.153.014-.302.032-.45L.999 6.479a1.63 1.63 0 0 1-.238-1.94l.625-1.083a1.636 1.636 0 0 1 1.787-.768l1.477.355c.258-.179.51-.329.761-.452l.406-1.414A1.63 1.63 0 0 1 7.378 0l1.25 0c.714 0 1.354.478 1.559 1.163l.425 1.436c.242.121.484.266.739.444l1.478-.355a1.635 1.635 0 0 1 1.786.768l.625 1.083c.36.625.263 1.422-.237 1.941l-1.035 1.07c.018.148.032.297.032.45 0 .145-.014.285-.031.424l1.045 1.101c.492.519.586 1.312.229 1.931l-.625 1.083a1.63 1.63 0 0 1-1.8.764l-1.447-.36c-.259.182-.51.333-.759.458l-.425 1.437A1.638 1.638 0 0 1 8.628 16zm-4.016-4.341.528.109a4.72 4.72 0 0 0 1.032.615l.359.404.485 1.691c.046.16.194.271.36.271l1.25 0a.37.37 0 0 0 .359-.269l.506-1.707.355-.398c.324-.137.645-.33 1.01-.608l.529-.109 1.731.431a.378.378 0 0 0 .416-.176l.625-1.083a.378.378 0 0 0-.053-.446l-1.25-1.317-.167-.505.022-.174c.021-.127.041-.255.041-.388 0-.149-.021-.293-.042-.437l-.021-.15.171-.513 1.244-1.289a.378.378 0 0 0 .055-.448l-.625-1.082a.38.38 0 0 0-.412-.177l-1.758.422-.521-.108a4.7 4.7 0 0 0-.991-.594l-.356-.398-.506-1.707a.373.373 0 0 0-.36-.269l-1.25 0a.377.377 0 0 0-.36.271l-.486 1.691-.36.405a4.71 4.71 0 0 0-1.013.6l-.521.109-1.757-.422a.383.383 0 0 0-.413.177l-.625 1.083a.375.375 0 0 0 .055.447L3.142 6.9l.171.514-.021.15A2.981 2.981 0 0 0 3.25 8c0 .133.02.261.037.389l.022.174-.167.505-1.25 1.317a.38.38 0 0 0-.053.446l.625 1.083a.38.38 0 0 0 .415.176l1.733-.431z"/>
+  <path d="M8 6.25c.965 0 1.75.785 1.75 1.75S8.965 9.75 8 9.75 6.25 8.965 6.25 8 7.035 6.25 8 6.25M8 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/shortcut.svg b/toolkit/themes/shared/icons/shortcut.svg
new file mode 100644
index 0000000000..124dba578d
--- /dev/null
+++ b/toolkit/themes/shared/icons/shortcut.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" d="M11 2H5a1 1 0 0 0 0 2h3.59L6.05 6.54a7 7 0 0 0-2 5V13a1 1 0 0 0 2 0v-1.51A5 5 0 0 1 7.46 8L10 5.41V9a1 1 0 0 0 2 0V3a1 1 0 0 0-1-1z"/></svg>
diff --git a/toolkit/themes/shared/icons/sort-arrow.svg b/toolkit/themes/shared/icons/sort-arrow.svg
new file mode 100644
index 0000000000..8602fead13
--- /dev/null
+++ b/toolkit/themes/shared/icons/sort-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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">

+  <path fill="context-fill" d="M12,6l-4.016,4L4,6H12z"/>

+</svg>

+

diff --git a/toolkit/themes/shared/icons/trackers.svg b/toolkit/themes/shared/icons/trackers.svg
new file mode 100644
index 0000000000..d548719348
--- /dev/null
+++ b/toolkit/themes/shared/icons/trackers.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="m6 10.5 0 .5c0 1.1-.9 2-2 2-1.1 0-2-.9-2-2l0-.5a.5.5 0 0 1 .5-.5l3 0a.5.5 0 0 1 .5.5z"/>
+  <path d="m5.805 7.084-.257 1.671-3.503 0-.309-1.474a3.79 3.79 0 0 0-.237-.751c-.179-.409-.463-1.147-.49-1.77-.257-5.847 5.268-6.552 5.683-.75.046.643-.153 1.651-.52 2.181-.199.29-.318.577-.367.893z"/>
+  <path d="m13.07 12.5 0 .5c0 1.1-.9 2-2 2-1.1 0-2-.9-2-2l0-.5a.5.5 0 0 1 .5-.5l3 0a.5.5 0 0 1 .5.5z"/>
+  <path d="m9.679 8.669-.037 2.081 3.521 0 .49-1.18c.098-.245.217-.478.363-.698.247-.371.655-1.05.79-1.658C16.074 1.5 10.755-.153 9.339 5.488c-.157.625-.136 1.652.133 2.239.147.32.214.623.207.942z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/trending.svg b/toolkit/themes/shared/icons/trending.svg
new file mode 100644
index 0000000000..e7803199f1
--- /dev/null
+++ b/toolkit/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" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M12.7197 5.71968L11.354 4.354C11.039 4.039 11.262 3.5 11.707 3.5H15.5C15.776 3.5 16 3.724 16 4V7.793C16 8.238 15.461 8.462 15.146 8.147L13.7798 6.78084L9.03033 11.5303C8.73743 11.8232 8.26256 11.8232 7.96967 11.5303L5.5 9.06065L1.08233 13.4783L0.0216675 12.4177L4.96967 7.46966C5.26256 7.17677 5.73743 7.17677 6.03033 7.46966L8.5 9.93933L12.7197 5.71968Z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/undo.svg b/toolkit/themes/shared/icons/undo.svg
new file mode 100644
index 0000000000..b9d599e3e6
--- /dev/null
+++ b/toolkit/themes/shared/icons/undo.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">
+  <path fill="context-fill" d="M16,11 C16,11.5522847 15.5522847,12 15,12 C14.4477153,12 14,11.5522847 14,11 C14,8.23857625 11.7614237,6 9,6 C6.94968096,6 5.18760031,7.23409522 4.41604369,9 L7.0043326,9 C7.55661734,9 8.0043326,9.44771525 8.0043326,10 C8.0043326,10.5522847 7.55661734,11 7.0043326,11 L2,11 C1.44771525,11 1,10.5522847 1,10 L1,5 C1,4.44771525 1.44771525,4 2,4 C2.55228475,4 3,4.44771525 3,5 L3,7.39241339 C4.22489715,5.35958217 6.45367486,4 9,4 C12.8659932,4 16,7.13400675 16,11 Z"></path>
+</svg>
diff --git a/toolkit/themes/shared/icons/update-icon.svg b/toolkit/themes/shared/icons/update-icon.svg
new file mode 100644
index 0000000000..f263964b8c
--- /dev/null
+++ b/toolkit/themes/shared/icons/update-icon.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/toolkit/themes/shared/icons/warning-fill-12.svg b/toolkit/themes/shared/icons/warning-fill-12.svg
new file mode 100644
index 0000000000..b9e67f3e1d
--- /dev/null
+++ b/toolkit/themes/shared/icons/warning-fill-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-stroke" d="M6 1.7c-.7 0-1.3.4-1.7 1L1.8 7.2c-.3.6-.3 1.3 0 1.9.3.6 1 1 1.7 1l5.2 0c.7 0 1.3-.4 1.7-1 .3-.6.3-1.3 0-1.9L7.7 2.7c-.4-.6-1-1-1.7-1z"/>
+  <path fill="context-fill" d="M9.4 7.7 6.8 3.2c-.4-.6-1.3-.6-1.6 0L2.6 7.7c-.3.6.1 1.3.8 1.3l5.2 0c.7 0 1.1-.7.8-1.3z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/warning.svg b/toolkit/themes/shared/icons/warning.svg
new file mode 100644
index 0000000000..8ffcbb20fe
--- /dev/null
+++ b/toolkit/themes/shared/icons/warning.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.875 12.037-5.497-10C8.997 1.346 8.311 1 7.625 1s-1.372.346-1.752 1.037l-5.497 10C-.358 13.37.607 15 2.128 15l10.995 0c1.52 0 2.485-1.63 1.752-2.963zM8.25 11.75 8 12l-.75 0-.25-.25L7 11l.25-.25.75 0 .25.25 0 .75zm0-2.688a.625.625 0 0 1-1.25 0l0-3.437a.625.625 0 0 1 1.25 0l0 3.437z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/whatsnew.svg b/toolkit/themes/shared/icons/whatsnew.svg
new file mode 100644
index 0000000000..b77d0165a6
--- /dev/null
+++ b/toolkit/themes/shared/icons/whatsnew.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 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="M2 13.76A1.23 1.23 0 0 0 3.24 15H7V9H2z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M9 9v6h3.76A1.23 1.23 0 0 0 14 13.76V9H9z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M1 5v3h6V4H2a1 1 0 0 0-1 1z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 4H9v4h6V5a1 1 0 0 0-1-1z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M10.05.41A1.34 1.34 0 0 0 8 1a1.35 1.35 0 0 0-2-.59C5.2 1.08 4.91 2.48 8 4c3.09-1.52 2.8-2.92 2.05-3.59z"/>
+</svg>
diff --git a/toolkit/themes/shared/illustrations/about-license.svg b/toolkit/themes/shared/illustrations/about-license.svg
new file mode 100644
index 0000000000..79498ec594
--- /dev/null
+++ b/toolkit/themes/shared/illustrations/about-license.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 xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+ <defs>
+   <linearGradient id="a" x1="-300.021" y1="-272.736" x2="547.138" y2="574.423" gradientUnits="userSpaceOnUse">
+     <stop offset="0" stop-color="#ccfbff"/>
+     <stop offset="1" stop-color="#c9e4ff"/>
+   </linearGradient>
+   <linearGradient id="b" x1="-18.672" y1="23.78" x2="279.805" y2="322.256" gradientUnits="userSpaceOnUse">
+     <stop offset="0" stop-color="#00c8d7"/>
+     <stop offset="1" stop-color="#0a84ff"/>
+   </linearGradient>
+ </defs>
+  <path d="M267.464 87.073h-27.583c-2.347-4.377-8.617-14.64-16.509-16.145-10.217-1.948-12.254 8.237-12.254 8.237s-6.79-17.654-23.97-15.315c-19.262 2.623-10.189 22.9-10.189 22.9h-29l16.568.323h-16.569a1 1 0 0 0 0 2h119.506a1 1 0 0 0 0-2z" fill="#fff"/>
+  <path d="M100.384 63.259H84.836c-1.212-2.3-4.758-8.29-9.271-9.15-5.682-1.083-6.814 4.58-6.814 4.58s-3.776-9.817-13.33-8.517c-10.712 1.458-5.666 12.735-5.666 12.735H33.629l18.049.352H33.924a1 1 0 1 0 0 2h66.46a1 1 0 0 0 0-2z" fill="#fff"/>
+  <path d="M122.246 134H26.93a1 1 0 1 1 0-2h95.316a1 1 0 1 1 0 2z" fill="#eaeaee"/>
+  <path d="M106.678 127.455H60.912a.5.5 0 1 1 0-1h45.766a.5.5 0 0 1 0 1z" fill="#eaeaee"/>
+  <path d="M245.16 186.748h-90.336a1 1 0 0 1 0-2h90.336a1 1 0 0 1 0 2z" fill="#eaeaee"/>
+  <path fill="none" stroke="#eaeaee" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="12 8 3 4 1 9" d="M132.518 192.779h135.95"/>
+  <path d="M148.458 82.782h29s-9.074-20.277 10.189-22.9c17.18-2.339 23.97 15.315 23.97 15.315s2.037-10.185 12.254-8.237c10.074 1.921 17.511 16.634 17.511 16.634h25.25" fill="none" stroke="#eaeaee" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="12 8 3 4 1 9"/>
+  <path d="M34.125 60.429H50.25s-5.05-11.276 5.667-12.735c9.554-1.3 13.33 8.517 13.33 8.517s1.133-5.664 6.814-4.58c5.6 1.068 9.738 8.589 9.738 8.589h14.042" fill="none" stroke="#eaeaee" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="12 8 3 4 1 9"/>
+  <ellipse cx="149.78" cy="243.175" rx="77.947" ry="6.445" fill="#eaeaee"/>
+  <path d="M221.876 77.056H78.01a10.312 10.312 0 0 0-10.3 10.3v134.026a9.824 9.824 0 0 0 9.95 9.669h144.566a9.824 9.824 0 0 0 9.95-9.669V87.356a10.313 10.313 0 0 0-10.3-10.3z" fill="#fff"/>
+  <path d="M221.876 81.89H78.01a5.306 5.306 0 0 0-5.3 5.3v134.027a4.821 4.821 0 0 0 4.95 4.669h144.566a4.821 4.821 0 0 0 4.95-4.669V87.19a5.307 5.307 0 0 0-5.3-5.3z" fill="#f9f9fa"/>
+  <g fill="url(#a)">
+   <path d="M76.368 105.543V219c0 2.28.84 3.13 3.12 3.13H220.4c2.28 0 3.12-.85 3.12-3.13V105.543zM185 200.6a3.693 3.693 0 0 1-3.693 3.693h-60.762a3.693 3.693 0 0 1-3.693-3.693v-78.762a3.693 3.693 0 0 1 3.693-3.693h44.971L185 137.421z"/>
+   <path d="M187.187 193.93h-16.773a2.625 2.625 0 0 1-1.924-.89l-5.326-5.759a2.924 2.924 0 0 1 0-3.894l5.326-5.759a2.625 2.625 0 0 1 1.924-.89h16.773c1.6 0 2.9 1.582 2.9 3.534V190.4c-.001 1.948-1.299 3.53-2.9 3.53z"/>
+   <path d="M187.187 166.021h-16.773a2.625 2.625 0 0 1-1.924-.89l-5.326-5.759a2.924 2.924 0 0 1 0-3.894l5.326-5.759a2.625 2.625 0 0 1 1.924-.89h16.773c1.6 0 2.9 1.582 2.9 3.534v10.126c-.001 1.949-1.299 3.532-2.9 3.532z"/>
+  </g>
+  <g fill="url(#b)">
+   <path d="M221.876 81.891a5.307 5.307 0 0 1 5.3 5.3v134.026a4.821 4.821 0 0 1-4.95 4.669H77.66a4.821 4.821 0 0 1-4.95-4.669V87.19a5.306 5.306 0 0 1 5.3-5.3h143.866m0-2H78.01a7.308 7.308 0 0 0-7.3 7.3v134.027a6.822 6.822 0 0 0 6.95 6.669h144.566a6.822 6.822 0 0 0 6.95-6.669V87.19a7.309 7.309 0 0 0-7.3-7.3z"/>
+   <circle cx="85.771" cy="93.32" r="3.241"/>
+   <circle cx="96.226" cy="93.32" r="3.241"/>
+   <path d="M186.093 96.986h-72.3a3.509 3.509 0 0 1-3.509-3.509v-.313a3.509 3.509 0 0 1 3.509-3.509h72.3a3.509 3.509 0 0 1 3.509 3.509v.313a3.509 3.509 0 0 1-3.509 3.509z"/>
+   <circle cx="203.66" cy="93.32" r="3.241"/>
+   <circle cx="214.116" cy="93.32" r="3.241"/>
+   <path d="M157.13 131.141h-31.754a1.351 1.351 0 1 1 0-2.7h31.755a1.351 1.351 0 1 1 0 2.7z"/>
+   <path d="M153.609 139.09a1.351 1.351 0 0 0-1.351-1.351h-26.882a1.351 1.351 0 0 0 0 2.7h26.882a1.351 1.351 0 0 0 1.351-1.349z"/>
+   <path d="M164.676 148.39a1.351 1.351 0 0 0-1.351-1.351h-37.949a1.351 1.351 0 0 0 0 2.7h37.949a1.351 1.351 0 0 0 1.351-1.349z"/>
+   <path d="M159.665 157.69a1.351 1.351 0 0 0-1.351-1.351h-32.938a1.351 1.351 0 0 0 0 2.7h32.938a1.351 1.351 0 0 0 1.351-1.349z"/>
+   <path d="M153.609 166.99a1.351 1.351 0 0 0-1.351-1.351h-26.882a1.351 1.351 0 1 0 0 2.7h26.882a1.351 1.351 0 0 0 1.351-1.349z"/>
+   <path d="M164.676 176.29a1.351 1.351 0 0 0-1.351-1.351h-37.949a1.351 1.351 0 1 0 0 2.7h37.949a1.351 1.351 0 0 0 1.351-1.349z"/>
+   <path d="M159.672 185.59a1.351 1.351 0 0 0-1.351-1.351h-32.945a1.351 1.351 0 1 0 0 2.7h32.944a1.351 1.351 0 0 0 1.352-1.349z"/>
+   <path d="M164.676 194.89a1.351 1.351 0 0 0-1.351-1.351h-37.949a1.351 1.351 0 1 0 0 2.7h37.949a1.351 1.351 0 0 0 1.351-1.349z"/>
+   <path d="M165.517 118.145l19.276 19.276h-15.179a4.1 4.1 0 0 1-4.1-4.1v-15.176m0-1a1 1 0 0 0-1 1v15.179a5.1 5.1 0 0 0 5.1 5.1h15.179a1 1 0 0 0 .707-1.707l-19.276-19.276a1 1 0 0 0-.707-.293z"/>
+   <path d="M187.187 178.737c.367 0 .9.6.9 1.534V190.4c0 .936-.532 1.534-.9 1.534h-16.773a.689.689 0 0 1-.455-.248l-5.326-5.759a.932.932 0 0 1 0-1.178l5.326-5.759a.688.688 0 0 1 .455-.248h16.773m0-2h-16.773a2.625 2.625 0 0 0-1.924.89l-5.326 5.759a2.924 2.924 0 0 0 0 3.894l5.326 5.759a2.626 2.626 0 0 0 1.924.89h16.773c1.6 0 2.9-1.582 2.9-3.534v-10.129c0-1.952-1.3-3.534-2.9-3.534z"/>
+   <path d="M187.187 150.827c.367 0 .9.6.9 1.534v10.126c0 .936-.532 1.534-.9 1.534h-16.773a.689.689 0 0 1-.455-.248l-5.326-5.759a.932.932 0 0 1 0-1.178l5.326-5.76a.687.687 0 0 1 .455-.248h16.773m0-2h-16.773a2.624 2.624 0 0 0-1.924.89l-5.326 5.759a2.924 2.924 0 0 0 0 3.894l5.326 5.759a2.626 2.626 0 0 0 1.924.89h16.773c1.6 0 2.9-1.582 2.9-3.534v-10.125c0-1.952-1.3-3.534-2.9-3.534z"/>
+   <path d="M186.408 136l-19.485-19.276a2 2 0 0 0-1.407-.578h-44.971a5.7 5.7 0 0 0-5.693 5.693V200.6a5.7 5.7 0 0 0 5.693 5.693h60.763A5.693 5.693 0 0 0 187 200.6v-8.67h-2v8.67a3.693 3.693 0 0 1-3.693 3.693h-60.762a3.693 3.693 0 0 1-3.693-3.693v-78.762a3.693 3.693 0 0 1 3.693-3.693h44.971L185 137.421v13.406h2v-13.406a2 2 0 0 0-.592-1.421zM185 178.737h2v-14.716h-2z"/>
+   <path d="M180.308 205.81h-58.763a5.7 5.7 0 0 1-5.693-5.693v4.667a5.7 5.7 0 0 0 5.693 5.693h58.763a5.693 5.693 0 0 0 5.692-5.694v-4.667a5.693 5.693 0 0 1-5.693 5.693z"/>
+  </g>
+</svg>
diff --git a/toolkit/themes/shared/illustrations/about-rights.svg b/toolkit/themes/shared/illustrations/about-rights.svg
new file mode 100644
index 0000000000..8a25c087c9
--- /dev/null
+++ b/toolkit/themes/shared/illustrations/about-rights.svg
@@ -0,0 +1,82 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. 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="300" viewBox="0 0 300 300">
+  <defs>
+    <linearGradient id="a" x1="-300.021" y1="-272.736" x2="547.138" y2="574.423" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ccfbff"/>
+      <stop offset="1" stop-color="#c9e4ff"/>
+    </linearGradient>
+    <linearGradient id="b" x1="-18.672" y1="23.78" x2="279.805" y2="322.256" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00c8d7"/>
+      <stop offset="1" stop-color="#0a84ff"/>
+    </linearGradient>
+  </defs>
+  <path d="M265.342 100.316h-23.336c-2.043-3.774-7.272-12.2-13.831-13.453-8.612-1.642-10.329 6.943-10.329 6.943s-5.724-14.88-20.206-12.906c-16.237 2.211-8.589 19.3-8.589 19.3h-24.443l5.931.115H164.6a1 1 0 0 0 0 2h100.742a1 1 0 0 0 0-2z" fill="#fff"/>
+  <path d="M111.942 71.45h-13.19c-1.1-2.054-4.033-6.851-7.731-7.556-4.789-.913-5.744 3.861-5.744 3.861s-3.183-8.276-11.236-7.179c-9.03 1.229-4.776 10.735-4.776 10.735H55.671l7.159.139h-6.91a1 1 0 0 0 0 2h56.022a1 1 0 0 0 0-2z" fill="#fff"/>
+  <path d="M235.972 169.581h-69.687a1 1 0 0 1 0-2h69.687a1 1 0 0 1 0 2z" fill="#eaeaee"/>
+  <path d="M226.512 163.154h-30.853a.5.5 0 0 1 0-1h30.854a.5.5 0 0 1 0 1z" fill="#eaeaee"/>
+  <path d="M251.077 175.007h-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1zm-5 0h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1zm-21 0h-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1zm-5 0h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1zm-21 0h-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1zm-5 0h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1z" fill="#eaeaee"/>
+  <path d="M240.909 210.47H92.625a1 1 0 0 1 0-2h148.284a1 1 0 1 1 0 2z" fill="#eaeaee"/>
+  <ellipse cx="81.399" cy="227.481" rx="15.603" ry="4.632" fill="#eaeaee"/>
+  <path d="M68.86 210.47H41.206a1 1 0 0 1 0-2H68.86a1 1 0 0 1 0 2z" fill="#eaeaee"/>
+  <path d="M95.206 125.267H45.287a1 1 0 0 1 0-2h49.919a1 1 0 0 1 0 2z" fill="#eaeaee"/>
+  <path d="M86.084 119.993h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1z" fill="#eaeaee"/>
+  <path d="M165.026 96.856h24.444s-7.649-17.093 8.589-19.3c14.482-1.972 20.205 12.91 20.205 12.91s1.717-8.585 10.329-6.943c8.492 1.619 14.761 14.022 14.761 14.022h21.285" fill="none" stroke="#eaeaee" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="12 8 3 4 1 9"/>
+  <path d="M56.089 69.222h13.593s-4.253-9.505 4.776-10.735c8.053-1.1 11.236 7.179 11.236 7.179s.955-4.774 5.744-3.861c4.722.9 8.209 7.24 8.209 7.24h11.837" fill="none" stroke="#eaeaee" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="12 8 3 4 1 9"/>
+  <ellipse cx="149.135" cy="242.903" rx="45.72" ry="9.272" fill="#eaeaee"/>
+  <path d="M209.9 164.086c3.013-9.515 1.374-19.8-4.615-28.958a45.642 45.642 0 0 0-13.924-13.5 6.243 6.243 0 0 0-4.588-4.872 6.223 6.223 0 0 0-4.553-3.595 6.212 6.212 0 0 0-5.383-3.988 6.522 6.522 0 0 0-.436-.016 6.252 6.252 0 0 0-3.955 1.389 6.211 6.211 0 0 0-.867-.061 6.242 6.242 0 0 0-5.513 3.311q-.946-.037-1.882-.037a45.681 45.681 0 0 0-12.117 1.6c-.062-8.393 1.088-19.17 5.862-29.058a12.031 12.031 0 0 0-10.82-17.255 12.046 12.046 0 0 0-10.836 6.8c-9.762 20.224-9.2 41.788-6.872 56.692a31.125 31.125 0 0 0-3.714 14.724 15.666 15.666 0 0 0-.636 1.638l-.814.521c-1.485.29-2.917.638-4.281 1.039a14.748 14.748 0 0 1-2.456-5.59l-.239-4.606a5.728 5.728 0 0 0-3.769-5.1q-.092-.035-.188-.067a5.749 5.749 0 0 0-1.627-6.85 12.379 12.379 0 0 0-2.9-1.732 15.685 15.685 0 0 0-6.68-1.57 12.767 12.767 0 0 0-4.5.8c-5.209 1.954-8.633 6.666-10.178 14.005-1.818 8.637 2.748 27.443 18.278 40.566 5.772 7.177 17.305 12.187 30.22 13.106 1.437.1 2.885.154 4.307.154a53.486 53.486 0 0 0 13.294-1.619 43.673 43.673 0 0 1-.329 11.819 11.877 11.877 0 0 0 .371 5.606 15.988 15.988 0 0 1-3.391 5.385 6.39 6.39 0 0 0-.307 9.009 6.459 6.459 0 0 0 .909.8 6.359 6.359 0 0 0 6.21 4.88 6.416 6.416 0 0 0 2.374-.452 6.376 6.376 0 0 0 7.382-1.615c3.211-3.7 4.993-8.546 5.964-12.321a12.025 12.025 0 0 0 4.18-7.179 68.453 68.453 0 0 0 .4-19.879 43.989 43.989 0 0 0 11.457-2.63c.49.046.981.068 1.469.068q.652 0 1.3-.054a6.244 6.244 0 0 0 8.974-1.6 6.251 6.251 0 0 0 5.171-8.579l-.383-.937a15.7 15.7 0 0 0 .415-1.681 31.279 31.279 0 0 0 4.216-8.511z" fill="#fff"/>
+  <g fill="url(#a)">
+    <path d="M201.452 136.985a45.33 45.33 0 0 0-52.633-16.478c-8.95 3.593-15.307 10.133-17.9 18.415-5.317 16.983 7.121 36.049 27.725 42.5a46.43 46.43 0 0 0 13.856 2.148c15.476 0 29.041-8.1 33.157-21.25 2.591-8.282 1.098-17.28-4.205-25.335z"/>
+    <path d="M161.541 205.621a2.514 2.514 0 0 0-.771-.121 2.524 2.524 0 0 0-2.41 1.758 47.907 47.907 0 0 1-2.917 7.05 9.367 9.367 0 0 1-2.409 3.035 2.53 2.53 0 0 0 2.66 4.3 13.056 13.056 0 0 0 4.165-4.868 52.016 52.016 0 0 0 3.318-7.97 2.535 2.535 0 0 0-1.636-3.184z"/>
+    <path d="M164.2 209.058a2.528 2.528 0 0 0-3.182 1.638 48.521 48.521 0 0 1-2.917 7.05 9.375 9.375 0 0 1-2.412 3.035 2.53 2.53 0 0 0 2.662 4.3 13.063 13.063 0 0 0 4.165-4.866 52.056 52.056 0 0 0 3.319-7.971 2.535 2.535 0 0 0-1.635-3.186z"/>
+    <path d="M169.179 209.558a2.513 2.513 0 0 0-1.611-1.075 2.542 2.542 0 0 0-.489-.048 2.537 2.537 0 0 0-2.484 2.037 47.923 47.923 0 0 1-2.094 7.336 9.379 9.379 0 0 1-2.048 3.291 2.529 2.529 0 0 0 3.133 3.971 13.016 13.016 0 0 0 3.584-5.312 51.568 51.568 0 0 0 2.389-8.3 2.513 2.513 0 0 0-.38-1.9z"/>
+    <path d="M190.9 181.291a10.39 10.39 0 0 1-6.11-1.989l-6.7-4.847a10.947 10.947 0 0 1-2.518-15.06 10.448 10.448 0 0 1 14.756-2.57l6.7 4.847a10.947 10.947 0 0 1 2.518 15.06 10.507 10.507 0 0 1-8.646 4.559z"/>
+    <path d="M185.675 122.091a1 1 0 0 0-1.058-.317l-3.187.962.318-3.422a1 1 0 0 0-1.683-.819l-1.856 1.754-1.17-5.146a1 1 0 0 0-1.909-.137l-1.625 4.225-1.34-2.95a1 1 0 0 0-1.9.29c-.216 1.727-.876 7.053-.985 8.508l-.848 1.462a1 1 0 0 0 .58 1.46l11.626 3.462a1 1 0 0 0 1.174-.5l3.984-7.732a1 1 0 0 0-.121-1.1z"/>
+    <path d="M135.176 158.7l-2.414-6.577a1.5 1.5 0 0 0-2.216-.745l-4.127 2.642a1.5 1.5 0 0 0 .3 2.673l2.768 1-1.276 1.617a1.5 1.5 0 0 0 1.178 2.429 1.455 1.455 0 0 0 .341-.039l4.381-1.025a1.5 1.5 0 0 0 1.068-1.978z"/>
+    <path d="M200.937 176.924l-1.854-4.537a1.491 1.491 0 0 0-.96-.868 1.511 1.511 0 0 0-1.282.2l-5.761 3.989a1.5 1.5 0 0 0-.267 2.231l2.995 3.361a1.5 1.5 0 0 0 1.12.5 1.5 1.5 0 0 0 1.5-1.583l-.113-2.056 2.84.771a1.5 1.5 0 0 0 1.785-2.014z"/>
+    <path d="M159.611 159.487c-5.6-3.72-13.21-6.09-21.425-6.675a54.688 54.688 0 0 0-3.871-.138c-15.618 0-27.884 6.871-28.532 15.982-.351 4.933 2.636 9.762 8.411 13.6 5.6 3.72 13.21 6.09 21.425 6.675 1.291.092 2.594.138 3.873.138 15.617 0 27.883-6.871 28.532-15.982.349-4.936-2.638-9.765-8.413-13.6z"/>
+    <path d="M124.666 177.47a4.742 4.742 0 0 0-2.313-2.828c-18.9-10.14-22.139-28.077-21.316-31.987.505-2.4 1.184-2.936 1.32-3.021a.589.589 0 0 0 .175-.055 1.012 1.012 0 0 0 .424-.317c.641-.579 2-2.067 5.575-5.963a1.009 1.009 0 0 0-.136-1.488 12.481 12.481 0 0 0-6.611-2.174 8.2 8.2 0 0 0-2.887.51c-3.59 1.346-6.013 4.893-7.2 10.542-1.374 6.526 2.394 29.625 26.144 42.367a4.774 4.774 0 0 0 6.827-5.585z"/>
+    <path d="M155.655 145.652a7.9 7.9 0 0 0-6.32-3.121 7.941 7.941 0 0 0-4.518 1.4 7.444 7.444 0 0 0-3.174 4.94 7.292 7.292 0 0 0 1.363 5.588c.189.255 18.886 25.834 14.472 50.251a7.288 7.288 0 0 0 1.232 5.528 7.762 7.762 0 0 0 5.12 3.188 8.12 8.12 0 0 0 1.335.111 7.706 7.706 0 0 0 7.671-6.235c5.564-30.792-16.25-60.402-17.181-61.65z"/>
+    <path d="M122.878 156.521q-.132 0-.265.007c-.21.014-.4.021-.589.021-7.346 0-9.405-10.133-9.584-11.093l-.261-4.963a1.009 1.009 0 0 0-1.74-.642l-6.672 7.018a1.009 1.009 0 0 0-.264.863c1.427 8.49 7.125 18.4 18.49 18.4.4 0 .809-.013 1.22-.039a4.8 4.8 0 0 0 3.327-1.629 4.744 4.744 0 0 0 1.183-3.461 4.837 4.837 0 0 0-4.845-4.482z"/>
+    <path d="M154.67 78.331a7.593 7.593 0 0 0-4.039-4.394 7.972 7.972 0 0 0-10.422 3.537c-15.809 31.64-3.755 67.22-3.234 68.719a7.8 7.8 0 0 0 7.418 5.159 8.1 8.1 0 0 0 2.466-.387 7.688 7.688 0 0 0 4.584-3.892 7.291 7.291 0 0 0 .372-5.691c-.106-.308-10.519-31.3 2.489-57.333a7.288 7.288 0 0 0 .366-5.718z"/>
+  </g>
+  <g fill="#f9f9fa">
+    <path d="M144.51 178c-8.129-4.344-13.41-12.143-13.455-19.869a1 1 0 0 0-1.107-.988c-10.364 1.124-17.6 6.019-17.6 11.905 0 6.8 9.618 12.135 21.9 12.135a37.451 37.451 0 0 0 10.069-1.34 1 1 0 0 0 .2-1.844z"/>
+    <path d="M178.859 150.443l.9-1.739a1 1 0 0 0-1.178-1.415l-4.394 1.327.438-4.705a1 1 0 0 0-1.683-.82l-2.677 2.529-1.578-6.942a1 1 0 0 0-.9-.776 1.011 1.011 0 0 0-1 .639l-2.274 5.915-1.949-4.292a1 1 0 0 0-1.9.29 964.54 964.54 0 0 0-.505 4.108c-11.4-4.874-19.225-9.7-21.771-1.659-.125.395-.235.8-.337 1.215a9.531 9.531 0 0 1 1.743-.172l7.761-.024h.03a9.492 9.492 0 0 1 5.762 17.04c-4.371-1.722-7.326-2.554-8.124-.037a6.264 6.264 0 0 0-.276 2l-2.441.008a24.511 24.511 0 0 1-1.91-2.542.5.5 0 0 0-.851.525 28.4 28.4 0 0 0 5.095 5.823q.628.63 1.318 1.241c.624.607 1.3 1.221 2.028 1.827 2.317 2.521 6.1 4.97 11.886 6.8 6.258 1.982 10.941 2.077 14.3 1.2a27.867 27.867 0 0 0 7.433-1.248 13.317 13.317 0 0 0 2.518-.96c.122-.06.209-.1.264-.124a.5.5 0 0 0-.316-.948 3.916 3.916 0 0 0-.386.173 12.409 12.409 0 0 1-2.354.9l-2.384-1.689a6.64 6.64 0 0 0 1.011-1.926c.769-2.428-1.889-3.463-6.173-4.527a10 10 0 0 1 15.415-10.781l6.333 4.487a10.027 10.027 0 0 1 1.221 1.035c.079-.224.168-.448.239-.671 2.515-7.943-6.418-8.584-18.334-11.085z"/>
+  </g>
+  <g fill="url(#b)">
+    <path d="M147.105 74.29a6.777 6.777 0 0 1 6.093 9.723c-6.372 13.2-7 27.638-6.034 38.767a35.29 35.29 0 0 1 2.353-1.046 39.658 39.658 0 0 1 14.664-2.727 44.406 44.406 0 0 1 6.055.419c.142-1.165.272-2.213.347-2.817a1 1 0 0 1 1.9-.29l1.34 2.95 1.625-4.225a1 1 0 0 1 .94-.641h.065a1 1 0 0 1 .9.776l1.17 5.146 1.856-1.754a1 1 0 0 1 1.683.819l-.295 3.169c.113.047.223.1.335.144l2.828-.854a.991.991 0 0 1 .288-.043 1 1 0 0 1 .89 1.458l-.553 1.073A40.9 40.9 0 0 1 200.89 138c5.11 7.816 6.531 16.517 4 24.5a26.118 26.118 0 0 1-4.221 8.054 10.53 10.53 0 0 1-1.05 3.772l1.17 2.864a1 1 0 0 1-.926 1.379.966.966 0 0 1-.261-.036l-2.713-.736c-.244.2-.495.394-.755.571l.108 1.959a1 1 0 0 1-1.745.72l-1.178-1.322a10.589 10.589 0 0 1-5.228.258 39.5 39.5 0 0 1-15.265 2.981q-.832 0-1.668-.033a65.709 65.709 0 0 1 .545 24.057 6.753 6.753 0 0 1-3.656 4.88c-.621 3.04-2.1 8.412-5.255 12.047a1.128 1.128 0 1 1-1.7-1.479c2.39-2.752 3.742-6.752 4.482-9.855a6.238 6.238 0 0 1-.544.024 6.756 6.756 0 0 1-.834-.053c-.958 3.015-2.981 8.111-6.453 11.36a1.116 1.116 0 0 1-.766.291 1.135 1.135 0 0 1-.83-.346 1.128 1.128 0 0 1 .055-1.592c3.065-2.867 4.928-7.565 5.827-10.372a6.769 6.769 0 0 1-1.105-.681 25.01 25.01 0 0 1-5.63 9.032 1.128 1.128 0 0 1-1.542-1.647c2.683-2.509 4.445-6.409 5.471-9.322a6.73 6.73 0 0 1-.864-4.6 52.712 52.712 0 0 0-.623-19.714 43.539 43.539 0 0 1-17.515 3.365c-1.3 0-2.611-.047-3.934-.14-11.783-.838-22.043-5.258-26.8-11.541-14.73-12.177-18.3-29.328-16.935-35.812 1.151-5.468 3.467-8.889 6.883-10.17a7.522 7.522 0 0 1 2.655-.471 11.751 11.751 0 0 1 6.272 2.129.5.5 0 0 1 .067.737c-4.039 4.409-5.322 5.786-5.815 6.224a.486.486 0 0 1-.047.058 10.287 10.287 0 0 0-1.689 3.318c-.794 2.193.414 11.566 7.831 21.016a14.5 14.5 0 0 1 2.117-2.5c-3.636-3.525-5.712-9.427-6.395-13.521a.5.5 0 0 1 .129-.424l6.588-7.006a.5.5 0 0 1 .364-.159.485.485 0 0 1 .172.032.5.5 0 0 1 .327.443l.26 5c.054.286 1.512 8.332 6.76 10.759a40.21 40.21 0 0 1 7.643-1.982.993.993 0 0 1 .382-.47l2.582-1.653a10.523 10.523 0 0 1 1.317-3.71 25.958 25.958 0 0 1 3.924-14.945c-2.288-13.3-3.642-35.193 6.117-55.411a6.8 6.8 0 0 1 6.107-3.833m0-2a8.8 8.8 0 0 0-7.909 4.964c-9.6 19.9-8.838 41.235-6.411 55.882a27.923 27.923 0 0 0-3.845 14.857 12.418 12.418 0 0 0-1.1 2.974l-1.862 1.192a2.936 2.936 0 0 0-.409.315 42.5 42.5 0 0 0-6.374 1.636c-3.467-2.2-4.749-7.91-4.933-8.818l-.252-4.861a2.491 2.491 0 0 0-1.638-2.218 2.44 2.44 0 0 0-.859-.153 2.509 2.509 0 0 0-1.821.789l-6.588 7.005a2.475 2.475 0 0 0-.273.348 8.137 8.137 0 0 1-.072-2.866 9.7 9.7 0 0 1 1.295-2.661l.011-.012c.6-.561 1.842-1.893 5.839-6.256a2.5 2.5 0 0 0-.347-3.691 13.627 13.627 0 0 0-7.468-2.525 9.532 9.532 0 0 0-3.357.6c-4.1 1.537-6.837 5.451-8.138 11.631-1.445 6.865 2.2 24.905 17.441 37.62 5.151 6.627 15.889 11.271 28.107 12.14a55.8 55.8 0 0 0 4.076.145 47.332 47.332 0 0 0 16-2.6 49.245 49.245 0 0 1 .167 16.607 8.721 8.721 0 0 0 .655 5.085 21.128 21.128 0 0 1-4.657 7.723 3.112 3.112 0 0 0 1.519 5.338 3.166 3.166 0 0 0-.058.511 3.137 3.137 0 0 0 5.264 2.385q.167-.157.331-.318a3.13 3.13 0 0 0 4.854.185c3.18-3.667 4.781-8.834 5.522-12.08a8.779 8.779 0 0 0 3.859-5.826 66.713 66.713 0 0 0-.114-22.372 41.259 41.259 0 0 0 14.755-2.906 12.588 12.588 0 0 0 4.315-.094l.373.419a3 3 0 0 0 5.236-2.142l.839.228a2.93 2.93 0 0 0 .785.106 3 3 0 0 0 2.778-4.134l-.849-2.077a12.43 12.43 0 0 0 .805-3.043 28.07 28.07 0 0 0 4.2-8.213c2.712-8.567 1.208-17.871-4.237-26.2a42.593 42.593 0 0 0-14.413-13.424 3 3 0 0 0-3.8-3.544l-.337.1.043-.463a3 3 0 0 0-4.324-2.965l-.426-1.875a2.984 2.984 0 0 0-2.709-2.327 3.298 3.298 0 0 0-.208-.007 2.986 2.986 0 0 0-2.809 1.921l-.052.135a3 3 0 0 0-4.934 1.9l-.106.851a45.995 45.995 0 0 0-4.312-.2 41.52 41.52 0 0 0-15.224 2.8c-.551-9.739.237-22.9 6.043-34.923a8.781 8.781 0 0 0-7.894-12.592z"/>
+    <path d="M201.082 171.875h-.028a.5.5 0 0 1-.472-.526 13.519 13.519 0 0 0-1.958-7 .5.5 0 1 1 .841-.541 14.3 14.3 0 0 1 2.116 7.6.5.5 0 0 1-.499.467z"/>
+    <path d="M130.643 148.528a.5.5 0 0 1-.406-.791c1.734-2.425 5.456-3.655 5.613-3.706a.5.5 0 0 1 .309.951c-.036.012-3.568 1.182-5.109 3.337a.5.5 0 0 1-.407.209z"/>
+    <path d="M184.377 126.738a.5.5 0 0 1-.372-.834c.572-.639 2.077-2.676 1.5-3.632-.484-.8-2.621.081-3.58.636a.5.5 0 0 1-.742-.528c.257-1.324.354-3.466-.258-3.857a.264.264 0 0 0-.235-.03c-.555.153-1.336 1.295-1.714 2.058a.5.5 0 0 1-.942-.151c-.392-2.705-1.323-5.791-2.031-5.892-.021 0-.076-.012-.177.065-.738.565-1.315 3.218-1.5 4.757a.5.5 0 0 1-.431.435.515.515 0 0 1-.529-.309c-.7-1.729-1.931-3.588-2.5-3.544-.009 0-.046.028-.093.107-.611 1.019-.2 4.857.018 5.394a.512.512 0 0 1-.252.655.486.486 0 0 1-.647-.219c-.278-.557-.808-4.824-.012-6.282a1.129 1.129 0 0 1 .879-.649c1.124-.127 2.166 1.38 2.848 2.674.28-1.367.793-3.18 1.62-3.812a1.223 1.223 0 0 1 .927-.262c1.425.2 2.259 3.345 2.654 5.4a3.488 3.488 0 0 1 1.625-1.392 1.247 1.247 0 0 1 1.042.152c1.032.661.993 2.647.849 3.909 1.2-.539 3.233-1.185 4.047.167 1.06 1.757-1.336 4.508-1.613 4.815a.5.5 0 0 1-.381.169z"/>
+    <path d="M130.109 161.852a3.206 3.206 0 0 1-1.385-.28 1.435 1.435 0 0 1-.863-1.084 3.969 3.969 0 0 1 1.2-2.733c-1.424-.448-3.732-1.375-3.751-2.663-.022-1.481 3.985-3.6 5.71-4.441a.5.5 0 1 1 .438.9c-2.727 1.332-5.133 2.98-5.148 3.528.008.539 2.012 1.47 3.8 1.94a.5.5 0 0 1 .221.842c-.674.656-1.578 1.856-1.477 2.468.016.1.066.228.308.343 1.108.53 3.093-.221 3.765-.554a.5.5 0 0 1 .447.895 8.44 8.44 0 0 1-3.265.839z"/>
+    <path d="M195.266 182.317c-1.464 0-3.507-2.879-4.366-4.2a.5.5 0 1 1 .838-.545c1.5 2.3 3.13 3.9 3.528 3.745.514-.2.617-1.951.387-3.4a.5.5 0 0 1 .667-.547c1.947.723 3.724.963 3.957.693.2-.487-.784-3.2-2.154-5.923a.5.5 0 0 1 .894-.449c.845 1.678 2.744 5.7 2.142 6.842-.57 1.077-2.9.534-4.423.04.1 1.208.075 3.222-1.111 3.679a1 1 0 0 1-.359.065z"/>
+    <path d="M153.084 218.985a.5.5 0 0 1-.342-.865c4.939-4.621 6.88-13.587 6.9-13.677a.5.5 0 1 1 .979.207c-.081.38-2.027 9.366-7.194 14.2a.5.5 0 0 1-.343.135z"/>
+    <path d="M155.771 221.9a.5.5 0 0 1-.342-.865c4.935-4.616 6.88-13.588 6.9-13.678a.5.5 0 0 1 .979.207c-.081.38-2.027 9.367-7.194 14.2a.5.5 0 0 1-.343.136z"/>
+    <path d="M160.647 222.024a.5.5 0 0 1-.377-.828c4.433-5.107 5.434-14.227 5.443-14.317a.487.487 0 0 1 .549-.445.5.5 0 0 1 .445.549c-.04.387-1.044 9.526-5.683 14.87a.5.5 0 0 1-.377.171z"/>
+    <path d="M110.254 161.469a.5.5 0 0 1-.369-.837 23.915 23.915 0 0 1 9.942-5.786.5.5 0 1 1 .3.953 23.391 23.391 0 0 0-9.507 5.508.5.5 0 0 1-.366.162z"/>
+    <path d="M107.264 169.781a.5.5 0 0 1-.472-.335c-.049-.139-1.155-3.438 1.8-7.218a.5.5 0 0 1 .787.617c-2.624 3.353-1.657 6.241-1.647 6.271a.5.5 0 0 1-.307.637.489.489 0 0 1-.161.028z"/>
+    <path d="M155.876 186.7a.5.5 0 0 1-.2-.96 22.264 22.264 0 0 0 3.824-2.14.5.5 0 1 1 .588.809 22.934 22.934 0 0 1-4.018 2.251.5.5 0 0 1-.194.04z"/>
+    <path d="M143.722 96.658a.494.494 0 0 1-.223-.053.5.5 0 0 1-.224-.671c2.965-5.928 1.7-14.842 1.683-14.931a.5.5 0 0 1 .989-.146c.056.378 1.329 9.313-1.778 15.524a.5.5 0 0 1-.447.277z"/>
+    <path d="M147.293 99.246a.494.494 0 0 1-.223-.053.5.5 0 0 1-.224-.671c2.965-5.928 1.7-14.841 1.684-14.93a.5.5 0 0 1 .989-.146c.056.378 1.329 9.312-1.778 15.523a.5.5 0 0 1-.448.277z"/>
+    <path d="M151.985 97.6a.487.487 0 0 1-.176-.032.5.5 0 0 1-.292-.644c2.334-6.2.148-14.938.126-15.025a.5.5 0 1 1 .969-.248c.095.369 2.287 9.124-.159 15.625a.5.5 0 0 1-.468.324z"/>
+    <path d="M188.641 167.773a1 1 0 0 1-.962-.729 3.532 3.532 0 0 0-2.26-2.218 3.574 3.574 0 0 0-3.12.508 1 1 0 1 1-1.271-1.543 5.5 5.5 0 0 1 8.578 2.717 1 1 0 0 1-.965 1.265z"/>
+    <path d="M149.323 155.323a1 1 0 0 1-.962-.729 3.532 3.532 0 0 0-2.26-2.218 3.575 3.575 0 0 0-3.12.508 1 1 0 1 1-1.271-1.543 5.5 5.5 0 0 1 8.578 2.717 1 1 0 0 1-.965 1.265z"/>
+    <path d="M169.2 174.119c-12.839 0-21.089-9.653-21.187-9.771a1 1 0 0 1 1.534-1.284c.108.13 11.038 12.862 27.056 7.905a1 1 0 1 1 .592 1.91 26.9 26.9 0 0 1-7.995 1.24z"/>
+    <path d="M148.308 88.455a5.777 5.777 0 0 1-1.881-.312c-4.221-1.443-5.695-7.407-5.756-7.66a1 1 0 0 1 1.945-.468c.013.052 1.282 5.153 4.462 6.237 1.662.566 3.658-.077 5.939-1.908a1 1 0 0 1 1.252 1.561 9.8 9.8 0 0 1-5.961 2.55z"/>
+    <path d="M143.018 98.25a.987.987 0 0 1-.416-.092 1 1 0 0 1-.493-1.325 29.886 29.886 0 0 0 2.285-9.877 1.016 1.016 0 0 1 1.044-.956 1 1 0 0 1 .955 1.043 31.384 31.384 0 0 1-2.465 10.624 1 1 0 0 1-.91.583z"/>
+    <path d="M146.893 100.375a1 1 0 0 1-.893-1.457c.031-.062 1.778-3.614 2.015-11.323a.987.987 0 0 1 1.03-.97 1 1 0 0 1 .969 1.03c-.254 8.258-2.155 12.022-2.236 12.179a1 1 0 0 1-.885.541z"/>
+    <path d="M151.643 99.5a1 1 0 0 1-.889-1.455 22.246 22.246 0 0 0 1.522-11.677 1 1 0 0 1 1.986-.236 23.772 23.772 0 0 1-1.729 12.824 1 1 0 0 1-.89.544z"/>
+    <path d="M175.977 184c-16.543 0-27.147-5.563-33.13-10.23-6.5-5.074-9.045-10.086-9.15-10.3a.5.5 0 0 1 .9-.446c.1.2 10.341 19.974 41.386 19.974a.5.5 0 0 1 0 1z"/>
+    <path d="M136.393 131.5a.5.5 0 0 1-.424-.764c.178-.285 4.463-7.025 14.763-10.543a.5.5 0 0 1 .323.947c-9.966 3.4-14.2 10.057-14.237 10.123a.5.5 0 0 1-.425.237z"/>
+    <path d="M146.4 151.423a1.358 1.358 0 0 1 .884 1.7l-.918 2.9a1.358 1.358 0 0 1-1.7.884 1.358 1.358 0 0 1-.884-1.7l.918-2.9a1.351 1.351 0 0 1 1.7-.884z"/>
+    <path d="M185.721 163.873a1.358 1.358 0 0 1 .884 1.7l-.918 2.9a1.358 1.358 0 0 1-1.7.884 1.358 1.358 0 0 1-.884-1.7l.918-2.9a1.355 1.355 0 0 1 1.7-.884z"/>
+    <path d="M171.819 164.988c-2.257-2.156-9.975-5.389-15.3-3.991a2.079 2.079 0 0 0-1.469 2.1c-.055 2.165 2 5.019 6.72 6.512a18.025 18.025 0 0 0 5.313.982 6.476 6.476 0 0 0 3.311-.779 4.566 4.566 0 0 0 2.166-3.1 1.965 1.965 0 0 0-.741-1.724z"/>
+    <path d="M121.965 96.833a1 1 0 0 1-1-1v-12.55a1 1 0 0 1 .421-.815L167.6 49.634a1 1 0 0 1 1.158 1.631L122.965 83.8v12.033a1 1 0 0 1-1 1z"/>
+    <path d="M116.318 124.646a1 1 0 0 1-.562-.174l-9.2-6.273a1 1 0 0 1-.437-.826v-15.058a1 1 0 1 1 2 0v14.529l8.765 5.976a1 1 0 0 1-.564 1.826z"/>
+    <path d="M80.489 227.782a2.5 2.5 0 0 1-2.5-2.5v-74.444a2.5 2.5 0 0 1 5 0v74.444a2.5 2.5 0 0 1-2.5 2.5z"/>
+    <path d="M80.492 161.79a2.5 2.5 0 0 0 3.477 3.594l10.508-10.168a42.319 42.319 0 0 1-1.528-5.479zm29.467-25.034a2.5 2.5 0 0 0-3.535-.059l-5.171 5c-.121.289-.245.6-.374.954-.332.917-.3 3.1.371 6.007l8.65-8.37a2.5 2.5 0 0 0 .059-3.532z"/>
+    <path d="M141.381 80.325c-18.7 13.4-25.152 18.462-25.416 18.99-.478.955-.552 2.013-.412 13.112.062 4.906.154 12.212-.093 13.978-1.161 1.589-7.3 8.162-12.858 13.906a2.5 2.5 0 1 0 3.593 3.477c4.786-4.944 12.946-13.5 13.824-15.258.605-1.211.69-3.779.534-16.166-.051-4.016-.112-8.893-.007-10.7 1.871-1.531 15.38-11.247 23.162-16.83.027-.094.058-.2.089-.3-.3-.4-.621-.848-.964-1.366a17.248 17.248 0 0 1-1.452-2.843zm24.034-13.956a2.5 2.5 0 0 0-3.483-.6c-4.667 3.287-8.85 6.24-12.611 8.9a6.883 6.883 0 0 1 .722.3 6.719 6.719 0 0 1 3.129 3.111c4.122-2.923 8.12-5.747 11.639-8.226a2.5 2.5 0 0 0 .605-3.485z"/>
+  </g>
+</svg>
diff --git a/toolkit/themes/shared/illustrations/error-malformed-url.svg b/toolkit/themes/shared/illustrations/error-malformed-url.svg
new file mode 100644
index 0000000000..36974c3b8c
--- /dev/null
+++ b/toolkit/themes/shared/illustrations/error-malformed-url.svg
@@ -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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <defs>
+    <linearGradient id="a" x1="-300.021" y1="-272.736" x2="547.138" y2="574.423" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ccfbff"/>
+      <stop offset="1" stop-color="#c9e4ff"/>
+    </linearGradient>
+    <linearGradient id="b" x1="-18.672" y1="23.78" x2="279.805" y2="322.256" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00c8d7"/>
+      <stop offset="1" stop-color="#0a84ff"/>
+    </linearGradient>
+  </defs>
+  <path d="M73.275 165.84l63.117-26.74a1 1 0 0 0-.78-1.842L72.494 164a1 1 0 0 0 .78 1.842z" fill="#eaeaee"/>
+  <path d="M110.05 144.74l15.834-6.708a.5.5 0 1 0-.39-.921l-15.834 6.708a.5.5 0 0 0 .39.921z" fill="#eaeaee"/>
+  <path d="M59.35 176.038a.5.5 0 0 1 .265-.655l2.762-1.17a.5.5 0 1 1 .39.921l-2.762 1.17a.5.5 0 0 1-.655-.266zm10.128-4.291a.5.5 0 0 1 .265-.655l11.049-4.681a.5.5 0 1 1 .39.921l-11.049 4.681a.5.5 0 0 1-.654-.266zm19.336-8.192a.5.5 0 0 1 .265-.655l.921-.39a.5.5 0 1 1 .39.921l-.921.39a.5.5 0 0 1-.654-.266zm4.6-1.951a.5.5 0 0 1 .265-.655l2.762-1.17a.5.5 0 1 1 .39.921l-2.762 1.17a.5.5 0 0 1-.65-.27zm10.128-4.291a.5.5 0 0 1 .265-.655l11.049-4.681a.5.5 0 0 1 .39.921l-11.046 4.68a.5.5 0 0 1-.653-.265z" fill="#eaeaee"/>
+  <path d="M103.245 194.26L208.809 161a1 1 0 0 0-.6-1.908l-105.565 33.26a1 1 0 1 0 .6 1.908z" fill="#eaeaee"/>
+  <path d="M116 185l26.482-8.343a.5.5 0 1 0-.3-.954l-26.482 8.342a.5.5 0 0 0 .3.954z" fill="#eaeaee"/>
+  <path d="M84.918 204.09a.5.5 0 0 1 .327-.627l11.445-3.606a.5.5 0 0 1 .3.954l-11.445 3.606a.5.5 0 0 1-.627-.327zm19.076-6.01a.5.5 0 0 1 .327-.627l2.861-.9a.5.5 0 1 1 .3.954l-2.861.9a.5.5 0 0 1-.627-.326zm6.677-2.1a.5.5 0 0 1 .327-.627l.954-.3a.5.5 0 1 1 .3.954l-.954.3a.5.5 0 0 1-.627-.33zm9.538-3a.5.5 0 0 1 .327-.627l11.445-3.606a.5.5 0 1 1 .3.954l-11.445 3.599a.5.5 0 0 1-.628-.327zm19.076-6.01a.5.5 0 0 1 .327-.627l2.861-.9a.5.5 0 1 1 .3.954l-2.861.9a.5.5 0 0 1-.628-.334zm6.677-2.1a.5.5 0 0 1 .327-.627l.954-.3a.5.5 0 1 1 .3.954l-.954.3a.5.5 0 0 1-.628-.337zm9.538-3a.5.5 0 0 1 .327-.627l11.445-3.606a.5.5 0 1 1 .3.954l-11.445 3.606a.5.5 0 0 1-.627-.342zm19.076-6.01a.5.5 0 0 1 .327-.627l2.861-.9a.5.5 0 0 1 .3.954l-2.861.9a.5.5 0 0 1-.629-.342zm6.677-2.1a.5.5 0 0 1 .327-.627l.954-.3a.5.5 0 1 1 .3.954l-.954.3a.5.5 0 0 1-.629-.345zm9.538-3a.5.5 0 0 1 .327-.627l11.445-3.606a.5.5 0 0 1 .3.954l-11.445 3.606a.5.5 0 0 1-.629-.35zm19.076-6.01a.5.5 0 0 1 .327-.627l2.861-.9a.5.5 0 0 1 .3.954l-2.861.9a.5.5 0 0 1-.629-.349zm6.677-2.1a.5.5 0 0 1 .327-.627l.954-.3a.5.5 0 0 1 .3.954l-.954.3a.5.5 0 0 1-.63-.352zm9.538-3a.5.5 0 0 1 .327-.627l11.445-3.606a.5.5 0 1 1 .3.954l-11.445 3.606a.5.5 0 0 1-.63-.357z" fill="#eaeaee"/>
+  <path d="M50.883 109.437L73.366 97.57s-15.334-12.008-1.472-21.924C84.256 66.8 96.745 77.71 96.745 77.71s-2.589-8.73 6.13-11.4c8.6-2.633 20.994 6.885 20.994 6.885l19.577-10.334" fill="#fff"/>
+  <path d="M141.872 58.947L136.085 62a.588.588 0 0 1-.549-1.04l5.788-3.055a.588.588 0 1 1 .549 1.04zm-15.152 8l-1.04.549a.588.588 0 0 1-.549-1.04l1.04-.549a.588.588 0 0 1 .549 1.04zM72.4 94.811l-1.674.884a.588.588 0 0 1-.549-1.04l.9-.478a24.222 24.222 0 0 1-.591-.543.588.588 0 1 1 .81-.853c.7.664 1.177 1.039 1.188 1.048a.588.588 0 0 1-.088.983zm-10 5.277l-12.485 6.59a.588.588 0 1 1-.549-1.04l12.485-6.59a.588.588 0 1 1 .549 1.04zm59.158-31.3a.588.588 0 0 1-.6-.026 45.206 45.206 0 0 0-3-1.776.588.588 0 1 1 .559-1.036 46.056 46.056 0 0 1 3.086 1.824.588.588 0 0 1-.045 1.014zM68.064 90.2a.588.588 0 0 1-.751-.176q-.348-.483-.681-1a.588.588 0 0 1 .993-.631c.208.328.423.643.642.946a.588.588 0 0 1-.133.821.666.666 0 0 1-.07.04zm25.892-16.6a.587.587 0 0 1-.6-.031c-.293-.2-.617-.4-.972-.62a.588.588 0 0 1 .611-1.006c.37.225.71.444 1.016.649a.588.588 0 0 1-.052 1.008zm15.815-10.047a.586.586 0 0 1-.405.053 14.722 14.722 0 0 0-7.557-.008 8.578 8.578 0 0 0-4.693 3.166.588.588 0 0 1-.966-.673 9.747 9.747 0 0 1 5.314-3.618 15.855 15.855 0 0 1 8.163-.013.588.588 0 0 1 .144 1.093zm-21.029 7.324a.587.587 0 0 1-.486.029 21.942 21.942 0 0 0-3.291-.988.588.588 0 0 1 .246-1.151 23.255 23.255 0 0 1 3.468 1.04.588.588 0 0 1 .063 1.07zm-23.055 8.291a.589.589 0 0 1-.827-.722 14.421 14.421 0 0 1 5.452-6.558 19.345 19.345 0 0 1 5.307-2.711.588.588 0 1 1 .361 1.123A18.263 18.263 0 0 0 71 72.844a13.284 13.284 0 0 0-5.031 6.006.59.59 0 0 1-.282.318z" fill="#eaeaee"/>
+  <path d="M144.627 62.6l-92.656 48.906a1.176 1.176 0 0 1-1.1-2.081l92.656-48.907a1.176 1.176 0 1 1 1.1 2.081z" fill="#fff"/>
+  <path d="M185.779 90.824l13.771 3.409s-1.925-10.7 7.531-9.678c8.434.909 9.583 10.091 9.583 10.091s2.165-4.6 6.788-2.471c4.558 2.1 6.186 10.666 6.186 10.666l11.991 2.968" fill="#fff"/>
+  <path d="M200.337 92.789l-13.752-3.4a.59.59 0 0 1 .284-1.146l13.752 3.4a.59.59 0 0 1-.284 1.146zm42.412 10.311l-.529-.131a.59.59 0 1 1 .284-1.146l.529.131a.59.59 0 0 1-.284 1.146zm-5.113-1.266l-3.438-.851a.59.59 0 1 1 .284-1.146l3.438.851a.59.59 0 0 1-.284 1.146zm-20.166-8.627a.614.614 0 0 1-.445-.506l-.035-.222a.589.589 0 0 1 .4-.662 5.483 5.483 0 0 1 6-2.637 7.111 7.111 0 0 1 1.259.447 10.622 10.622 0 0 1 4.381 4.221.591.591 0 0 1-1 .626 9.484 9.484 0 0 0-3.872-3.774 5.935 5.935 0 0 0-1.05-.374c-3.3-.818-4.891 2.422-4.957 2.562a.592.592 0 0 1-.681.319zm-14.675-9.061a.591.591 0 0 1-.2-1.053 6.8 6.8 0 0 1 3.628-1.19.591.591 0 0 1 .07 1.179 5.632 5.632 0 0 0-3.009.97.589.589 0 0 1-.489.094zm9 .181a.6.6 0 0 1-.146-.057 9.055 9.055 0 0 0-1-.478.59.59 0 0 1-.324-.769.6.6 0 0 1 .769-.325 10.36 10.36 0 0 1 1.128.54.59.59 0 0 1-.428 1.089z" fill="#eaeaee"/>
+  <path d="M242.217 107.236l-56.755-14.049a1.181 1.181 0 1 1 .567-2.292l56.755 14.049a1.181 1.181 0 0 1-.567 2.292z" fill="#fff"/>
+  <ellipse cx="155.535" cy="245.952" rx="7.463" ry="43.55" transform="rotate(-86.464 155.535 245.951)" fill="#eaeaee"/>
+  <path d="M112.695 226.207l-64.217-18.684a1 1 0 1 0-.559 1.92l64.217 18.684a1 1 0 1 0 .559-1.92z" fill="#eaeaee"/>
+  <path d="M243.246 226.609L178.5 209.394a1 1 0 0 0-.514 1.933l64.751 17.215a1 1 0 1 0 .514-1.933z" fill="#eaeaee"/>
+  <path d="M146.467 240.275a.789.789 0 0 0 .166-.037.82.82 0 0 1-.205.045z" fill="#fff"/>
+  <g fill="#fff">
+    <path d="M179.037 101.776l-.121-.547a12.937 12.937 0 0 0-.4-1.386 12.75 12.75 0 0 0-22.367-3.36l-4.583-.2a5 5 0 0 0-4.02-2.981 5 5 0 0 0-1.409-1.736l-.987 5.022-.259 1.327 1.261-.689 2.337-1.286.866 3.905 8.492.371.509-.8a9.751 9.751 0 0 1 16.444 10.478l-1.117 1.753a166 166 0 0 1 5.9 23.121c.32-.012 11.494 70.842 11.421 75.734a61.9 61.9 0 0 1-.1 10.1c-.433 3.64-1.661 13.195-5.4 14.023a2.76 2.76 0 0 1-1.855-.234c-.957-.484-1.864-1.833-3.817-11.386a123 123 0 0 1-15.17 4.294 149.57 149.57 0 0 1-17.448 2.843c2.283 9.563 1.761 10.211 1.121 11.019a2.76 2.76 0 0 1-1.582 1c-3.739.829-8.634-6.281-10.574-9.446a46.87 46.87 0 0 1-2.769-5.378c-2.744-3.417-5.519-2.72-2.775.881a47.78 47.78 0 0 0 2.805 5.4 38.26 38.26 0 0 0 6.116 7.863c2.261 2.07 4.879 3.528 7.652 2.913a5.81 5.81 0 0 0 3.292-2.061c.926-1.229 1.334-2.436 1.126-4.9a43.46 43.46 0 0 0-.916-5.379c4.453-.567 9.452-1.439 14.4-2.536 3.437-.762 7.923-1.869 12.292-3.277A61.92 61.92 0 0 0 179 232.33c.863 2.369 1.735 4.03 3.085 4.714a5.017 5.017 0 0 0 3.538.655c2.812-.623 4.751-1.742 6.522-6.337a46.05 46.05 0 0 0 1.841-10.27 75.3 75.3 0 0 0-.13-11.375c.029-4.493-.48-7.184-.945-13.441-1.184-16.126-9.59-59.447-11.018-64.876a168.439 168.439 0 0 0-5.141-20.053l.342-.537a12.8 12.8 0 0 0 1.475-3.236c.1-.361.189-.718.262-1.082a12.68 12.68 0 0 0 .206-4.716z"/>
+    <path d="M134.237 228.656l-6.947-14.593c-1.686-6.992-20.874-79.082-21.813-86.213l-3.447-2.2a9.76 9.76 0 0 1 10.489-16.449l2.087 1.33c4.834-2.638 12.315-6.642 15.256-7.744 3.252-1.223 9.874-6.285 12.141-8.119L146 91.43c-.11-.078-.209-.158-.317-.227a5 5 0 0 0-5.729.4c-3.239 2.623-8.884 6.732-11.307 7.627-2.713 1.021-8.725 4.167-14.083 7.075l-.6-.38a12.76 12.76 0 1 0-13.679 21.468l2.254 1.436c.592 4.611 14.794 90.939 28.1 99.384z"/>
+    <path d="M186.722 176.206s10.389-4.558 15.3-2.655c3.46 1.339 7.075 4.468 9.434 12.129s2.346 13.664-1.921 16.234-9.314 1.9-10.178-.979c-.621-2.067-2.547-9.158-2.547-9.158s-1.255-.941-6.281 1.683z"/>
+    <path d="M116.553 182.33s-16.275-1.34-19.879 3.447c-2.232 2.964-4.4 7.12-3.154 15.039s3.888 13.307 8.85 13.744 9.2-2.381 8.716-5.346c-.349-2.129-1.73-9.347-1.73-9.347s.135 1.219 11.44 2.024z"/>
+  </g>
+  <path d="M205.432 180.5c-3.039-4.414-6.895-5.465-18.936.241-3.035-15.577-8.491-43.6-8.527-43.761a260.987 260.987 0 0 0-.7-3.767l-.039-.176-.958-4.325-.113-.508-.361-1.63-.307-1.386-.314-1.416q-.216-.976-.5-1.937l-.206-.927q-.369-1.342-.756-2.67a5 5 0 0 0-.285-.961q-.305-1.008-.618-2c-.065-.293-.179-.575-.275-.871-.3-.957-.6-1.833-.924-2.735l1.623-2.8a7.778 7.778 0 0 0-13.12-8.359l-.448.7a12.79 12.79 0 0 1 7.84 4.408.5.5 0 0 1-.755.659 11.81 11.81 0 0 0-7.682-4.115l-.084.131-11.187-.495-.052-.234-.059.013-.576-2.6-4.955 2.737.067-.343-.192.1 1.014-5.131c-1.3 1.047-8.6 6.812-12.5 8.282-3.064 1.15-11.506 5.715-16.035 8.2-4.027 2.582-4.287 5.938-4.3 6.074a.5.5 0 0 1-.391.455l-.137.03a.5.5 0 0 1-.474-.52c-.035-.156.269-3.778 4.383-6.615l-2.111-1.345a7.778 7.778 0 0 0-8.359 13.12l3.817 2.432.463.287c.312 3.3 1.05 7.88 2.09 13.129a244.916 244.916 0 0 0 2.3 10.359l.182.82s.136 11.739 6.835 36.611c-13.88-.9-19.023.179-20.366 4.046-1.625 4.678.566 13.9 1.116 15.346a4 4 0 0 0 4.6 2.486 4.046 4.046 0 0 0 .557-.167c2.064-.782 1.925-2.583 1.145-4.648-1.047-2.768-.811-7.074-.755-9.09 2.342-1.09 8.613-.388 16.016.208a437.29 437.29 0 0 0 5.028 15.915c3.14 9.547 6.214 11.174 9.089 14.624a46.19 46.19 0 0 0 2.75 5.383c2.74 4.412 5.31 7.181 7.025 8.174l.357.177.091.041.277.092.13.033.2.037.156-.035.137-.03a.821.821 0 0 0 .205-.045l.059-.013a.781.781 0 0 0 .214-.191c.465-.584-.541-5.4-1.791-10.532a17.821 17.821 0 0 1-5.563-1.625.5.5 0 1 1 .446-.9 17.649 17.649 0 0 0 4.866 1.482c2.018-.14 4.231-.364 6.637-.693l.185-.041 2.114-.3.989-.158 1.423-.234 1.45-.25.976-.216 1.836-.356.586-.13 2.119-.47.312-.069a115.067 115.067 0 0 0 17.231-4.884c2.187-1.13 5.312-3.021 5.347-3.049a.5.5 0 0 1 .518.858c-.136.081-2.713 1.625-4.879 2.8 1.044 5.218 2.365 11.073 3.045 11.414a.77.77 0 0 0 .476.069l.049-.011.215-.048.088-.019.205-.138.087-.07.2-.2.09-.1.216-.273.078-.109.228-.358.046-.072a15.559 15.559 0 0 0 1.319-3.293l-.019-.088.221-.807.033-.13.215-.877-.022-.1c.072-.323.143-.646.211-.989.213-1.071 1.234-3.087.359-4.558a61.5 61.5 0 0 0 .075-9.829l-.015-.068-.033-.658c.569-3.666-.534-19.041-.534-19.041l-.4-2.048c5.392-2.54 8.767-3.317 11.088-3.221.826 1.839 2.666 5.179 2.763 8.137.074 2.206.67 4.468 2.876 4.4a4 4 0 0 0 3.869-4.122c-.047-1.53-.432-9.45-3.24-13.53z" fill="url(#a)"/>
+  <g fill="#f9f9fa">
+    <path d="M120.69 115.886c-2.232 1.282-7.4 4.415-7.3 9.164s2.239 19.146 3.2 20.184 16.5-.365 17.218-1.631-1.208-31.981-1.974-32.714-8.428 3.437-11.144 4.997z"/>
+    <path d="M173.771 187.946c-.254-1.838 4.982-9.811 7.446-13.441-2.179-10.881-6.769-31.937-7.541-34.944-1.738-10.523-4.47-21.185-8.722-28.908-2.181-3.961-12.142-6.956-23.757-5.16l-4.669 36.8s-.428 3.26-2.172 3.549c-1.431.237-13.05 3.558-17.183 4.745q.248.932.505 1.867c.248 1.63 4.281 18.045 7.083 28.711 4.165 2.817 11.809 8.193 12.283 10.016.429 1.652-2.666 8.234-4.839 12.552 2.917 7.157 5.781 12.57 7.815 14.158 12.135 9.6 40.827 2.219 43.492-11.964a69.862 69.862 0 0 0 .03-7.868c-3.884-3.376-9.553-8.541-9.771-10.113z"/>
+  </g>
+  <g fill="url(#b)">
+    <path d="M124.228 131.126a1.4 1.4 0 0 0 1.064-1.67l-.679-3.066a1.4 1.4 0 1 0-2.734.606l.679 3.066a1.4 1.4 0 0 0 1.67 1.064z"/>
+    <path d="M165.962 143.534a1.4 1.4 0 0 0 1.064-1.67l-.679-3.066a1.4 1.4 0 1 0-2.734.606l.679 3.066a1.4 1.4 0 0 0 1.67 1.064z"/>
+    <path d="M125.543 137.062a5.7 5.7 0 0 0 3.981-3.341 1 1 0 1 0-1.876-.7 3.72 3.72 0 0 1-2.548 2.091 3.67 3.67 0 0 1-3.193-.819 1 1 0 0 0-1.4 1.428 5.7 5.7 0 0 0 5.036 1.341z"/>
+    <path d="M167.278 149.47a5.7 5.7 0 0 0 3.991-3.343 1 1 0 0 0-1.866-.7 3.64 3.64 0 0 1-5.741 1.272 1 1 0 0 0-1.395 1.426 5.7 5.7 0 0 0 5.011 1.345z"/>
+    <path d="M156.452 156.752a6.476 6.476 0 0 1-.522.387 6.69 6.69 0 0 1 .8 1.377 4.69 4.69 0 0 1-.525 4.333 1 1 0 0 0 1.592 1.21 6.72 6.72 0 0 0 .808-6.321 7.62 7.62 0 0 0-.365-.762 4.47 4.47 0 0 0 1.118.081 5 5 0 0 0 3.889-2.108 1 1 0 0 0-1.693-1.061 3.06 3.06 0 0 1-2.335 1.181 4.41 4.41 0 0 1-1.548-.31 6.4 6.4 0 0 1-.921 1.814 1.579 1.579 0 0 1-.298.179z"/>
+    <path d="M155.906 157.107a6.476 6.476 0 0 0 .522-.387 1.58 1.58 0 0 0 .249-.184 6.4 6.4 0 0 0 .921-1.814 14.34 14.34 0 0 0 .973-5.9 2.88 2.88 0 0 0-1.181-2.149 1.75 1.75 0 0 0-1.792-.017c-2.144 1-6.864 6.325-7.348 10.764a1.52 1.52 0 0 0 .906 1.594c1.376.615 5.074-.928 6.75-1.907z"/>
+    <path d="M205.286 200.2a5.653 5.653 0 0 0 4.378-4.134c.93-3.7-1.4-15.212-7.182-18.87-5.91-3.741-18 3.543-19.94 4.564-.488.258-.789.725-.531 1.213a1 1 0 0 0 1.35.418c14.7-7.753 16.768-5.262 18.106-4.473 4.967 2.926 7.036 13.563 6.257 16.658a3.561 3.561 0 0 1-3.3 2.686.794.794 0 0 1-.858-.791c-1.144-9.775-3.335-12.139-3.582-12.377a1 1 0 0 0-.744-.28c-.358.018-2.956-.343-13.509 4.457a.97.97 0 0 0-.37 1.365 1.049 1.049 0 0 0 1.365.369c7.878-3.365 10.1-3.936 12.094-4.148.54.877 1.925 3.726 2.759 10.845a2.777 2.777 0 0 0 2.714 2.555 4.132 4.132 0 0 0 .993-.057z"/>
+    <path d="M122.9 161.253l-16.287 3.61a1 1 0 0 1-.433-1.953l16.287-3.61a1 1 0 0 1 .433 1.953z"/>
+    <path d="M124.115 166.721l-16.287 3.61a1 1 0 1 1-.433-1.953l16.287-3.61a1 1 0 1 1 .433 1.953z"/>
+    <path d="M125.219 171.7l-16.287 3.61a.5.5 0 1 1-.216-.976l16.284-3.61a.5.5 0 0 1 .216.976z"/>
+    <path d="M177.123 139.793a1 1 0 0 1-1.06-1.514l8.964-14.069a1 1 0 0 1 1.687 1.075l-8.964 14.069a1 1 0 0 1-.627.439z"/>
+    <path d="M105.051 211.452a5.653 5.653 0 0 1-5.63-2.134c-2.28-3.056-4.647-14.652-.62-20.181 3.171-4.352 22.929-3.128 25.11-2.93a1 1 0 0 1 .9 1.087 1.024 1.024 0 0 1-1.086.9c-22.257-.643-23.329 2.139-23.329 2.139-3.462 4.61-1.284 15.225.625 17.784a3.561 3.561 0 0 0 4.076 1.213.794.794 0 0 0 .488-1.06c-2.7-9.464-1.586-12.489-1.449-12.8a1 1 0 0 1 .58-.544c.337-.121 7.4-.753 19.966.848a1 1 0 1 1-.253 1.983c-10.344-1.318-16.621-1.676-18.541-1.106-.162 1.018-.346 4.18 1.62 11.072a2.777 2.777 0 0 1-1.524 3.4 4.132 4.132 0 0 1-.933.329z"/>
+    <path d="M154.954 133.172s2.432 4.544 3.463 4.542 1.742-2.279 4.785-3.524c3.272-1.339 5.033.538 6.124-.251s1.2-5.459.718-6.368-3.7-2.42-8.672-.654-6.905 5.347-6.418 6.255z"/>
+    <path d="M131.166 148.6a6.476 6.476 0 0 0 .643.1 1.58 1.58 0 0 0 .307.046 6.4 6.4 0 0 0 1.934-.631 14.34 14.34 0 0 0 4.857-3.481 2.88 2.88 0 0 0 .685-2.355 1.75 1.75 0 0 0-1.255-1.279c-2.225-.807-9.326-.381-12.807 2.416a1.52 1.52 0 0 0-.486 1.768c.538 1.397 4.244 2.916 6.122 3.416z"/>
+    <path d="M131.973 147.394s-.186 6.672 2.354 8.45"/>
+    <path d="M134.349 156.844a1 1 0 0 1-.595-.181c-2.9-2.028-2.8-8.559-2.781-9.3a.982.982 0 0 1 1.028-.972 1 1 0 0 1 .972 1.027c-.064 2.374.4 6.536 1.929 7.6a1 1 0 0 1-.553 1.819z"/>
+    <path d="M191.146 210.564c-.657-8.673-1.389-15.793-2.2-22.113a70.69 70.69 0 0 0-1.943.918c.927 6.929 1.676 13.949 2.144 21.2l.015.068a61.494 61.494 0 0 1-.075 9.829c-.254 3.16-.151 3.467-.359 4.558-.067.343-.139.666-.211.989l.022.1-.215.877-.033.13-.221.807.019.088a15.562 15.562 0 0 1-1.319 3.293l-.046.072-.228.358-.078.109-.216.273-.09.1-.2.2-.087.07-.205.138-.088.019-.215.048-.049.011a.77.77 0 0 1-.476-.069c-.67-.343-2-6.187-3.045-11.414 2.134-1.139 4.734-2.719 4.879-2.8a.5.5 0 1 0-.518-.858s-3.162 1.909-5.347 3.049l-.156.035a113.632 113.632 0 0 1-16.147 4.695l-1.25.277-2.119.47-.586.13-1.837.356-.976.216-1.45.25-1.423.233-.989.158-2.114.3-.185.041c-2.4.326-4.649.559-6.637.693a17.65 17.65 0 0 1-4.866-1.482.5.5 0 1 0-.446.9 17.821 17.821 0 0 0 5.563 1.625c1.25 5.131 2.256 9.948 1.791 10.532a.769.769 0 0 1-.224.193l-.1.022a.784.784 0 0 1-.166.037l-.137.03-.156.035-.2-.037-.13-.033-.276-.092-.091-.041-.357-.177c-1.723-.98-4.285-3.762-7.025-8.174a46.184 46.184 0 0 1-2.75-5.383c-2.877-3.46-6.6-10.108-9.711-19.642q-1.77-5.725-3.244-10.808c-.206-.022-.41-.043-.606-.059-.655-.052-1.3-.1-1.936-.157 4.495 15.768 9.369 28.443 13.727 31.643a46.869 46.869 0 0 0 2.769 5.378c1.93 3.116 6.835 10.274 10.574 9.446a2.76 2.76 0 0 0 1.582-1c.64-.808 1.16-1.466-1.121-11.019a149.565 149.565 0 0 0 17.448-2.843 123 123 0 0 0 15.17-4.294c1.953 9.554 2.86 10.9 3.817 11.386a2.76 2.76 0 0 0 1.855.234c3.739-.829 5.571-8.783 5.4-14.023a61.9 61.9 0 0 0 .1-10.101zm-79.172-59.54l-.182-.82-2.3-10.359c-1.052-5.257-1.793-9.845-2.11-13.124l-.441-.281-3.817-2.432a7.778 7.778 0 1 1 8.359-13.12l2.111 1.345c-4.114 2.837-4.368 6.448-4.383 6.615a.5.5 0 0 0 .474.52l.137-.03a.5.5 0 0 0 .391-.455c-.032-.146.249-3.5 4.3-6.074 4.568-2.5 12.973-7.044 16.035-8.2 3.885-1.465 11.18-7.23 12.5-8.282l.2-.167-1.02 5.194-.067.343 4.955-2.737.059-.013.63 2.841 11.181.492.084-.131a11.81 11.81 0 0 1 7.682 4.115.5.5 0 1 0 .755-.659 12.79 12.79 0 0 0-7.84-4.408l.448-.7a7.778 7.778 0 1 1 13.12 8.359l-1.634 2.564c.311.894.616 1.81.924 2.735.065.293.188.573.275.871q.3.957.618 2a5 5 0 0 0 .285.961q.386 1.328.756 2.67l.206.927q.216.976.5 1.938l.314 1.416.307 1.386.361 1.63.112.508.959 4.325.039.176c2.917 16.877 6.122 32.387 8.549 48.11a99.288 99.288 0 0 1 1.969-.924c-2.147-13.977-4.762-25.188-7.888-44.349a179.865 179.865 0 0 0-6.07-24.087l1.117-1.753a9.751 9.751 0 0 0-16.447-10.479l-.509.8-8.492-.371-.859-3.91-2.337 1.286-1.261.689.259-1.327.987-5.022.076-.4-.3.24-3.993 3.241c-2.342 1.82-8.958 6.861-12.167 8.094-2.941 1.1-10.422 5.106-15.256 7.744l-2.087-1.33a9.76 9.76 0 1 0-11.04 16.1q.269.185.55.351l3.447 2.2A571.373 571.373 0 0 0 117.6 187.6q1.175.069 2.441.158c-6.999-25.479-8.067-36.735-8.067-36.735z"/>
+  </g>
+</svg>
diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
new file mode 100644
index 0000000000..a25cfda112
--- /dev/null
+++ b/toolkit/themes/shared/in-content/common-shared.css
@@ -0,0 +1,1474 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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/design-tokens-brand.css");
+
+@namespace html "http://www.w3.org/1999/xhtml";
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+:host,
+:root {
+  --in-content-page-color: rgb(21, 20, 26);
+  --in-content-page-background: #fff;
+  --in-content-text-color: var(--in-content-page-color);
+  --in-content-box-background: #fff;
+  --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
+  --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent);
+  --in-content-box-info-background: #f0f0f4;
+  --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent);
+  --in-content-item-hover-text: var(--in-content-page-color);
+  --in-content-item-selected: var(--in-content-primary-button-background);
+  --in-content-item-selected-text: var(--in-content-primary-button-text-color);
+  --in-content-icon-color: rgb(91,91,102);
+  --in-content-accent-color: var(--in-content-primary-button-background);
+  --in-content-accent-color-active: var(--in-content-primary-button-background-hover);
+  --in-content-border-hover: var(--grey-90-a50);
+  --in-content-border-invalid: var(--red-50);
+  --in-content-border-color: #d7d7db;
+  --in-content-error-text-color: #c50042;
+  --in-content-success-icon-color: #2ac3a2;
+  --in-content-link-color: var(--in-content-primary-button-background);
+  --in-content-link-color-hover: var(--in-content-primary-button-background-hover);
+  --in-content-link-color-active: var(--in-content-primary-button-background-active);
+  --in-content-link-color-visited: var(--in-content-link-color);
+  --in-content-button-text-color: var(--in-content-text-color);
+  --in-content-button-text-color-hover: var(--in-content-text-color);
+  --in-content-button-text-color-active: var(--in-content-button-text-color-hover);
+   /* button background states are also used for checkboxes and radiobuttons */
+  --in-content-button-background: color-mix(in srgb, currentColor 7%, transparent);
+  --in-content-button-background-hover: color-mix(in srgb, currentColor 14%, transparent);
+  --in-content-button-background-active: color-mix(in srgb, currentColor 21%, transparent);
+  --in-content-button-border-color: transparent;
+  --in-content-button-border-color-hover: transparent;
+  --in-content-button-border-color-active: var(--in-content-button-border-color-hover);
+  --in-content-primary-button-text-color: rgb(251,251,254);
+  --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color);
+  --in-content-primary-button-text-color-active: var(--in-content-primary-button-text-color);
+  --in-content-primary-button-background: #0061e0;
+  --in-content-primary-button-background-hover: #0250bb;
+  --in-content-primary-button-background-active: #053e94;
+  --in-content-primary-button-border-color: transparent;
+  --in-content-primary-button-border-hover: transparent;
+  --in-content-primary-button-border-active: transparent;
+  --in-content-danger-button-background: #e22850;
+  --in-content-danger-button-background-hover: #c50042;
+  --in-content-danger-button-background-active: #810220;
+  --in-content-focus-outline-color: var(--focus-outline-color);
+  --in-content-focus-outline-width: var(--focus-outline-width);
+  --in-content-focus-outline-offset: var(--focus-outline-offset);
+  --in-content-focus-outline-inset: var(--focus-outline-inset);
+  --in-content-focus-outline: var(--focus-outline);
+
+  --in-content-table-background: #f8f8fa;
+  --in-content-table-border-color: var(--in-content-box-border-color);
+  --in-content-table-header-background: var(--in-content-primary-button-background);
+  --in-content-table-header-color: var(--in-content-primary-button-text-color);
+  --in-content-sidebar-width: 240px;
+
+  --dialog-warning-text-color: var(--red-60);
+
+  --checkbox-border-color: var(--in-content-box-border-color);
+  --checkbox-unchecked-bgcolor: var(--in-content-button-background);
+  --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover);
+  --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active);
+  --checkbox-checked-bgcolor: var(--in-content-primary-button-background);
+  --checkbox-checked-color: var(--in-content-primary-button-text-color);
+  --checkbox-checked-border-color: transparent;
+  --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover);
+  --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active);
+
+  --blue-40: #45a1ff;
+  --blue-50: #0a84ff;
+  --blue-60: #0060df;
+  --grey-30: #d7d7db;
+  --grey-60: #4a4a4f;
+  --grey-90-a10: rgba(12, 12, 13, 0.1);
+  --grey-90-a20: rgba(12, 12, 13, 0.2);
+  --grey-90-a30: rgba(12, 12, 13, 0.3);
+  --grey-90-a50: rgba(12, 12, 13, 0.5);
+  --grey-90-a60: rgba(12, 12, 13, 0.6);
+  --green-50: #30e60b;
+  --green-60: #12bc00;
+  --green-70: #058b00;
+  --green-80: #006504;
+  --green-90: #003706;
+  --orange-50: #ff9400;
+  --red-40: #ff4f5e;
+  --red-50: #ff0039;
+  --red-60: #d70022;
+  --red-70: #a4000f;
+  --red-80: #5a0002;
+  --red-90: #3e0200;
+  --yellow-50: #ffe900;
+  --yellow-60: #d7b600;
+  --yellow-60-a30: rgba(215, 182, 0, 0.3);
+  --yellow-70: #a47f00;
+  --yellow-80: #715100;
+  --yellow-90: #3e2800;
+
+  --shadow-10: 0 1px 4px var(--grey-90-a10);
+  --shadow-30: 0 4px 16px var(--grey-90-a10);
+
+  --card-padding: 16px;
+  --card-shadow: var(--shadow-10);
+  --card-outline-color: var(--grey-30);
+  --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
+
+  accent-color: var(--in-content-accent-color);
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :host,
+  :root {
+    /* Keep these in sync with:
+     *
+     *  * nsXPLookAndFeel::GenericDarkColor
+     *  * The default value of browser.display.foreground_color.dark and
+     *    browser.display.background_color.dark
+     *
+     * TODO (emilio): Once color-scheme support is complete, perhaps we can
+     * just replace most of these for system colors and remove all this
+     * duplication (assuming we honor the preferred color scheme for
+     * in-content privileged pages and plain-text documents). */
+    --in-content-page-background: rgb(28,27,34);
+    --in-content-page-color: rgb(251,251,254);
+
+    --in-content-box-background: rgb(35, 34, 43);
+    --in-content-box-background-odd: rgba(249,249,250,0.05);
+    --in-content-box-info-background: rgba(249,249,250,0.15);
+
+    --in-content-border-color: rgba(249,249,250,0.2);
+    --in-content-border-hover: rgba(249,249,250,0.3);
+    --in-content-border-invalid: rgb(255,132,139);
+
+    --in-content-error-text-color: #FF9AA2;
+    --in-content-success-icon-color: #54FFBD;
+
+    --in-content-icon-color: rgb(251,251,254);
+
+    --in-content-primary-button-text-color: rgb(43,42,51);
+    --in-content-primary-button-background: rgb(0,221,255);
+    --in-content-primary-button-background-hover: rgb(128,235,255);
+    --in-content-primary-button-background-active: rgb(170,242,255);
+
+    --in-content-danger-button-background: #ff848b;
+    --in-content-danger-button-background-hover: #ffbdc5;
+    --in-content-danger-button-background-active: #ffdfe7;
+
+    --in-content-table-background: rgb(35, 34, 43);
+
+    --card-outline-color: var(--grey-60);
+
+    --dialog-warning-text-color: var(--red-40);
+
+    scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
+  }
+
+  /* For dialogs, use a different background colour. We don't do
+   * this in High Contrast mode, as we should be using system colours then.
+   */
+  @media not (prefers-contrast) {
+    :root[dialogroot],
+    /* Also need this on dialog :hosts, or the rule above will override the
+     * value for this custom property again in the shadow DOM. */
+    :host(dialog) {
+      --in-content-page-background: #42414d;
+    }
+  }
+}
+
+@media (prefers-contrast) {
+  :host,
+  :root {
+    --in-content-page-color: CanvasText;
+    --in-content-page-background: Canvas;
+
+    --in-content-box-background: -moz-Dialog;
+    --in-content-box-background-odd: -moz-Dialog;
+    --in-content-box-border-color: -moz-DialogText;
+    --in-content-box-info-background: -moz-Dialog;
+
+    --in-content-item-hover: SelectedItem;
+    --in-content-item-hover-text: SelectedItemText;
+    --in-content-item-selected: SelectedItem;
+    --in-content-item-selected-text: SelectedItemText;
+    --in-content-icon-color: -moz-DialogText;
+
+    --in-content-accent-color: SelectedItem;
+    --in-content-accent-color-active: SelectedItem;
+
+    --in-content-border-hover: ThreeDShadow;
+    /* This is not great, but there is no suitable keyword for this.
+     * In theory, we shouldn't be conveying invalid state just with a colour
+     * change... */
+    --in-content-border-invalid: ThreeDShadow;
+    --in-content-border-color: ThreeDShadow;
+
+    --in-content-link-color: -moz-nativehyperlinktext;
+    --in-content-link-color-hover: -moz-nativehyperlinktext;
+    --in-content-link-color-active: -moz-nativehyperlinktext;
+    --in-content-link-color-visited: -moz-nativehyperlinktext;
+
+    --in-content-button-text-color: ButtonText;
+    --in-content-button-text-color-hover: SelectedItemText;
+    --in-content-button-text-color-active: SelectedItem;
+    --in-content-button-background: ButtonFace;
+    --in-content-button-background-hover: SelectedItem;
+    --in-content-button-background-active: SelectedItemText;
+    --in-content-button-border-color: ButtonText;
+    --in-content-button-border-color-hover: SelectedItemText;
+    --in-content-button-border-color-active: SelectedItem;
+
+    --in-content-primary-button-text-color: ButtonFace;
+    --in-content-primary-button-text-color-hover: SelectedItemText;
+    --in-content-primary-button-text-color-active: SelectedItem;
+    --in-content-primary-button-background: ButtonText;
+    --in-content-primary-button-background-hover: SelectedItem;
+    --in-content-primary-button-background-active: SelectedItemText;
+    --in-content-primary-button-border-color: ButtonFace;
+    --in-content-primary-button-border-hover: SelectedItemText;
+    --in-content-primary-button-border-active: SelectedItem;
+
+    --in-content-danger-button-background: var(--in-content-primary-button-background);
+    --in-content-danger-button-background-hover: var(--in-content-primary-button-background-hover);
+    --in-content-danger-button-background-active: var(--in-content-primary-button-background-active);
+
+    --in-content-focus-outline-color: -moz-DialogText;
+
+    --in-content-table-border-color: ThreeDDarkShadow;
+    --in-content-table-background: -moz-Dialog;
+    --in-content-table-header-background: -moz-Dialog;
+    --in-content-table-header-color: -moz-DialogText;
+
+    --dialog-warning-text-color: -moz-FieldText;
+
+    --checkbox-border-color: ThreeDShadow;
+    --checkbox-unchecked-bgcolor: -moz-Field;
+    --checkbox-unchecked-hover-bgcolor: -moz-Field;
+    --checkbox-unchecked-active-bgcolor: -moz-Field;
+    --checkbox-checked-bgcolor: SelectedItem;
+    --checkbox-checked-color: SelectedItemText;
+    --checkbox-checked-border-color: SelectedItem;
+    --checkbox-checked-hover-bgcolor: -moz-Field;
+    --checkbox-checked-active-bgcolor: -moz-Field;
+  }
+}
+
+:root {
+  font: message-box;
+  appearance: none;
+  background-color: var(--in-content-page-background);
+  color: var(--in-content-page-color);
+}
+
+:root:not(.system-font-size) {
+  font-size: var(--in-content-font-body-size-base);
+}
+
+html|body {
+  margin: 0;
+}
+
+html|h1 {
+  font-size: 2.5em;
+  font-weight: lighter;
+  line-height: 1.2;
+  color: var(--in-content-text-color);
+  margin: 0;
+  margin-bottom: .5em;
+}
+
+html|hr {
+  border-style: solid none none none;
+  border-color: var(--in-content-border-color);
+}
+
+html|h2 {
+  font-weight: 600;
+  line-height: 1.4em;
+}
+
+.main-content {
+  padding: 40px 28px;
+  overflow: auto;
+}
+
+/* tabpanels and tabs */
+
+xul|tabpanels {
+  appearance: none;
+  border: none;
+  padding: 0;
+  background-color: transparent;
+  color: inherit;
+  color-scheme: unset;
+}
+
+xul|tabs {
+  margin-bottom: 10px;
+  border-bottom: 1px solid var(--in-content-border-color);
+  background-color: transparent;
+  color: inherit;
+}
+
+xul|tab {
+  appearance: none;
+  margin: 0;
+  padding: 2px 20px 0;
+  min-height: 44px;
+  color: inherit;
+  background-color: transparent;
+  border-bottom: 2px solid transparent;
+  transition: background-color 50ms ease 0s;
+  color-scheme: unset;
+}
+
+xul|tab:where(:hover) {
+  border-bottom-color: var(--in-content-border-color);
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+}
+
+xul|tab:where(:hover:active) {
+  background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-active);
+}
+
+xul|tab[selected] {
+  color: var(--in-content-accent-color);
+  border-bottom-color: currentColor;
+}
+
+xul|tab[selected]:hover {
+  background-color: var(--in-content-button-background-hover);
+}
+
+xul|tab[selected]:hover:active {
+  background-color: var(--in-content-button-background-active);
+}
+
+@media (prefers-contrast) {
+  xul|tab:hover,
+  xul|tab:hover:active {
+    border-bottom-color: currentColor;
+  }
+
+  xul|tab[selected]:hover {
+    color: var(--in-content-button-text-color-hover);
+  }
+
+  xul|tab[selected]:hover:active {
+    color: var(--in-content-button-text-color-active);
+  }
+}
+
+/* html buttons */
+
+html|button {
+  font: inherit;
+}
+
+/* xul buttons and menulists */
+
+button,
+html|select,
+html|input[type="color"],
+xul|menulist {
+  appearance: none;
+  min-height: 32px;
+  color: var(--in-content-button-text-color);
+  border: 1px solid var(--in-content-button-border-color);
+  border-radius: 4px;
+  background-color: var(--in-content-button-background);
+  font-weight: 400;
+  padding: 7px 15px;
+  text-decoration: none;
+  margin: 4px 8px;
+  /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
+  font-size: 1em;
+}
+
+button {
+  font-weight: 600;
+}
+
+/* Small buttons get sized to 6/12px padding (when adding the 1px border) */
+button.small-button {
+  padding: 5px 11px;
+  min-height: 24px;
+  font-size: 0.9em;
+}
+
+/* Remove margin added by button.css */
+xul|button > .button-box > .button-text {
+  margin: 0;
+}
+
+xul|button,
+html|button {
+  /* Use the same margin of other elements for the alignment */
+  margin-inline: 4px;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+button:focus-visible,
+html|select:focus-visible,
+html|input:is([type="checkbox"], [type="color"], [type="radio"]):focus-visible,
+xul|menulist:focus-visible,
+xul|checkbox:not([native]):focus-visible > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
+xul|radio[focused="true"] > .radio-check,
+xul|tab:focus-visible > .tab-middle > .tab-text {
+  box-shadow: none;
+  /* Don't set `var(--in-content-focus-outline)` here to allow more complicated UIs
+     to use a different color when needed */
+  outline: var(--in-content-focus-outline-width) solid var(--in-content-focus-outline-color);
+  outline-offset: var(--in-content-focus-outline-offset);
+}
+
+html|select:not([size], [multiple]) {
+  background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  background-position: right 19px center;
+  background-repeat: no-repeat;
+  background-size: auto 12px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  font: inherit;
+  font-weight: 600;
+
+  /* The following padding matches how a menulist is internally spaced.
+   * 15px is the menulist's standard padding-inline, 3px is for
+   * the internal label margin, 12px is the dropmarker's width
+   * and 4px is the dropmarker's margin-inline-end. */
+  padding-inline-start: calc(15px + 3px);
+  padding-inline-end: calc(15px + 12px + 4px);
+  text-overflow: ellipsis;
+}
+
+html|select:not([size], [multiple]):dir(rtl) {
+  background-position-x: left 19px;
+}
+
+html|select:not([size], [multiple]) > html|option {
+  background-color: var(--in-content-box-background);
+  color: var(--in-content-text-color);
+}
+
+html|button:enabled:hover,
+html|select:not([size], [multiple]):enabled:hover,
+html|input[type="color"]:hover,
+xul|button:not([disabled="true"]):hover,
+xul|menulist:not([disabled="true"]):hover {
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+  border-color: var(--in-content-button-border-color-hover);
+}
+
+html|button:enabled:hover:active,
+html|select:not([size], [multiple]):enabled:hover:active,
+html|input[type="color"]:enabled:hover:active,
+xul|button:not([disabled="true"]):hover:active,
+xul|button[open],
+xul|button[open]:hover,
+xul|menulist[open="true"]:not([disabled="true"]) {
+  background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-active);
+  border-color: var(--in-content-button-border-color-active);
+}
+
+html|button:disabled,
+html|select:disabled,
+html|input[type="color"]:disabled,
+xul|button[disabled="true"],
+xul|menulist[disabled="true"] {
+  opacity: 0.4;
+}
+
+html|button[autofocus],
+html|button[type="submit"],
+xul|button[default],
+button.primary {
+  background-color: var(--in-content-primary-button-background);
+  color: var(--in-content-primary-button-text-color);
+  border-color: var(--in-content-primary-button-border-color);
+}
+
+html|button[autofocus]:enabled:hover,
+html|button[type="submit"]:enabled:hover,
+html|button.primary:enabled:hover,
+xul|button[default]:not([disabled="true"]):hover,
+xul|button.primary:not([disabled="true"]):hover {
+  background-color: var(--in-content-primary-button-background-hover);
+  color: var(--in-content-primary-button-text-color-hover);
+  border-color: var(--in-content-primary-button-border-hover);
+}
+
+html|button[autofocus]:enabled:hover:active,
+html|button[type="submit"]:enabled:hover:active,
+html|button.primary:enabled:hover:active,
+xul|button[default]:not([disabled="true"]):hover:active,
+xul|button.primary:not([disabled="true"]):hover:active {
+  background-color: var(--in-content-primary-button-background-active);
+  color: var(--in-content-primary-button-text-color-active);
+  border-color: var(--in-content-primary-button-border-active);
+}
+
+@media not (prefers-contrast) {
+  html|button.semi-transparent:not(.ghost-button, .primary):enabled {
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  html|button.semi-transparent:not(.primary):enabled:hover {
+    background-color: color-mix(in srgb, currentColor 20%, transparent);
+  }
+
+  html|button.semi-transparent:not(.primary):enabled:hover:active {
+    background-color: color-mix(in srgb, currentColor 30%, transparent);
+  }
+}
+
+.danger-button {
+  --in-content-primary-button-background: var(--in-content-danger-button-background);
+  --in-content-primary-button-background-hover: var(--in-content-danger-button-background-hover);
+  --in-content-primary-button-background-active: var(--in-content-danger-button-background-active);
+  --in-content-focus-outline-color: var(--in-content-danger-button-background);
+}
+
+@media not (prefers-contrast) {
+  html|button.ghost-button {
+    background-color: transparent;
+  }
+}
+
+html|button.ghost-button:not(.semi-transparent):enabled:hover {
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+}
+
+html|button.ghost-button:not(.semi-transparent):enabled:hover:active {
+  background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-active);
+}
+
+html|button.ghost-button.icon-button {
+  height: 16px;
+  width: 16px;
+  min-width: auto;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: center;
+  fill: currentColor;
+  -moz-context-properties: fill;
+}
+
+html|input[type="color"] {
+  padding: 6px;
+  width: 50px;
+}
+
+xul|menulist[image]::part(icon) {
+  margin-inline-end: 5px;
+}
+
+xul|menulist::part(dropmarker) {
+  appearance: none;
+  margin-inline-end: 4px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  align-items: center;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+xul|menulist > xul|menupopup {
+  appearance: none;
+
+  /* Reset native styles on Windows and macOS */
+  border: none;
+  background-color: transparent;
+
+  --panel-border-color: var(--in-content-box-border-color);
+  --panel-border-radius: 2px;
+  --panel-background: var(--in-content-box-background);
+  --panel-color: var(--in-content-text-color);
+  --panel-padding: 0;
+}
+
+xul|menulist > xul|menupopup xul|menu,
+xul|menulist > xul|menupopup xul|menuitem {
+  appearance: none;
+  font-size: 1em;
+  padding-block: 0.2em;
+  padding-inline: 10px 30px;
+}
+
+xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
+xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
+  color: var(--in-content-item-hover-text);
+  background-color: var(--in-content-item-hover);
+}
+
+xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
+xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
+  color: var(--in-content-item-selected-text);
+  background-color: var(--in-content-item-selected);
+}
+
+xul|menulist > xul|menupopup > xul|menu[disabled="true"],
+xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] {
+  color: #999;
+  /* override the [_moz-menuactive="true"] background color from
+     global/menu.css */
+  background-color: transparent;
+}
+
+xul|menulist > xul|menupopup xul|menuseparator {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--in-content-box-border-color);
+  border-bottom: none;
+}
+
+/* textboxes */
+
+html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
+html|textarea,
+xul|search-textbox {
+  appearance: none;
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 4px;
+  color: inherit;
+  background-color: var(--in-content-box-background);
+}
+
+xul|search-textbox {
+  min-height: 32px;
+  padding-inline: 8px;
+}
+
+html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
+html|textarea {
+  font-family: inherit;
+  font-size: inherit;
+  padding: 8px;
+  margin: 2px 4px;
+}
+
+html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus,
+html|textarea:focus,
+xul|search-textbox[focused],
+xul|tree:focus-visible,
+xul|richlistbox:focus-visible {
+  border-color: transparent;
+  outline: var(--in-content-focus-outline);
+  outline-offset: -1px; /* Prevents antialising around the corners */
+}
+
+html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid,
+html|textarea:-moz-ui-invalid {
+  border-color: transparent;
+  outline: 2px solid var(--in-content-border-invalid);
+  outline-offset: -1px; /* Prevents antialising around the corners */
+}
+
+html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled,
+html|textarea:disabled,
+xul|search-textbox[disabled="true"] {
+  opacity: 0.4;
+}
+
+/* Links */
+
+html|a,
+.text-link {
+  color: var(--in-content-link-color);
+}
+
+html|a:hover,
+.text-link:hover,
+button.text-link:is(:not([disabled="true"]), :enabled):hover {
+  color: var(--in-content-link-color-hover);
+}
+
+html|a:visited {
+  color: var(--in-content-link-color-visited);
+}
+
+html|a:hover:active,
+.text-link:hover:active,
+button.text-link:is(:not([disabled="true"]), :enabled):hover:active {
+  color: var(--in-content-link-color-active);
+  text-decoration: none;
+}
+
+html|a:focus-visible,
+.text-link:focus-visible {
+  outline: var(--in-content-focus-outline);
+  outline-offset: 1px;
+  border-radius: 4px;
+}
+
+button.text-link {
+  background-color: transparent !important; /* override hover related background changes */
+  padding: 0;
+  border: 0;
+  font-weight: normal;
+  min-height: 0;
+  min-width: 0;
+}
+
+/* Checkboxes and radio buttons */
+
+/* Add invisible vertical click-target */
+xul|*.checkbox-check,
+html|input[type="checkbox"] {
+  margin-block: 2px;
+}
+
+html|input[type="checkbox"] {
+  appearance: none;
+  height: 16px;
+  width: 16px;
+  border: 1px solid var(--checkbox-border-color);
+  background-color: var(--checkbox-unchecked-bgcolor);
+  border-radius: 2px;
+  margin-inline: 0 6px;
+  flex-shrink: 0; /* avoid shrinking inside flex container */
+}
+
+html|input[type="checkbox"]:enabled:hover {
+  background-color: var(--checkbox-unchecked-hover-bgcolor);
+}
+
+html|input[type="checkbox"]:enabled:hover:active {
+  background-color: var(--checkbox-unchecked-active-bgcolor);
+}
+
+html|input[type="checkbox"]:checked {
+  border-color: var(--checkbox-checked-border-color);
+  background-color: var(--checkbox-checked-bgcolor);
+  background-image: url("chrome://global/skin/icons/check.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  color: var(--checkbox-checked-color);
+  /* Style the button also when printing with "Print Backgrounds" unchecked */
+  color-adjust: exact;
+}
+
+html|input[type="checkbox"]:enabled:checked:hover {
+  background-color: var(--checkbox-checked-hover-bgcolor);
+}
+
+html|input[type="checkbox"]:enabled:checked:hover:active {
+  background-color: var(--checkbox-checked-active-bgcolor);
+}
+
+@media (prefers-contrast) {
+  html|input[type="checkbox"] {
+    /* Normalize the border-color to the in-content version following color */
+    border-color: currentColor;
+    color: var(--checkbox-border-color);
+  }
+
+  html|input[type="checkbox"]:not(:checked):enabled:hover {
+    /* color sets the border color in HCM in-content */
+    color: var(--checkbox-checked-border-color);
+  }
+
+  html|input[type="checkbox"]:checked:enabled {
+    /* color sets the border color in HCM in-content */
+    color: var(--checkbox-checked-bgcolor);
+    fill: var(--checkbox-checked-color);
+  }
+
+  html|input[type="checkbox"]:checked:enabled:hover {
+    fill: var(--checkbox-checked-bgcolor);
+  }
+}
+
+xul|richlistitem > xul|*.checkbox-check {
+  margin: 3px 6px;
+}
+
+html|*.radio-container-with-text,
+html|*.toggle-container-with-text {
+  display: flex;
+  align-items: center;
+}
+
+xul|radio {
+  margin-inline-start: 0;
+  appearance: none;
+}
+
+html|input[type="radio"],
+xul|*.radio-check {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 100%;
+  margin-block: 2px; /* extend the vertical clicktarget */
+  margin-inline: 0 6px;
+  background-color: var(--in-content-button-background);
+  background-position: center;
+  flex-shrink: 0; /* avoid shrinking inside flex container */
+}
+
+@media (prefers-contrast) {
+  html|input[type="radio"],
+  xul|*.radio-check {
+    border-color: var(--in-content-button-border-color);
+  }
+
+  html|input[type="radio"]:enabled:hover,
+  xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
+    border-color: var(--in-content-button-border-color-hover);
+  }
+
+  html|input[type="radio"]:enabled:hover:active,
+  xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
+    border-color: var(--in-content-button-border-color-active);
+  }
+}
+
+html|input[type="radio"]:enabled:hover,
+xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+}
+
+html|input[type="radio"]:enabled:hover:active,
+xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
+  background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-active);
+}
+
+html|input[type="radio"]:checked,
+xul|*.radio-check[selected] {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  color: var(--in-content-primary-button-text-color);
+  background-color: var(--in-content-primary-button-background);
+  background-image: url("chrome://global/skin/icons/radio.svg");
+  border-color: var(--in-content-primary-button-border-color);
+
+  /* Style the button also when printing with "Print Backgrounds" unchecked */
+  color-adjust: exact;
+}
+
+html|input[type="radio"]:enabled:checked:hover,
+xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
+  background-color: var(--in-content-primary-button-background-hover);
+  color: var(--in-content-primary-button-text-color-hover);
+  border-color: var(--in-content-primary-button-border-hover);
+}
+
+html|input[type="radio"]:enabled:checked:hover:active,
+xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
+  background-color: var(--in-content-primary-button-background-active);
+  color: var(--in-content-primary-button-text-color-active);
+  border-color: var(--in-content-primary-button-border-active);
+}
+
+xul|*.radio-label-box {
+  margin-inline: 0 8px;
+  padding-inline-start: 0;
+}
+
+/* Disabled checkboxes, radios and labels */
+
+xul|checkbox[disabled="true"],
+xul|radio[disabled="true"],
+xul|label[disabled="true"] {
+  color: inherit;
+}
+
+html|input[type="checkbox"]:disabled,
+html|input[type="radio"]:disabled,
+xul|checkbox[disabled="true"],
+xul|radio[disabled="true"],
+xul|label[disabled="true"] {
+  opacity: 0.5;
+}
+
+/* Category List */
+
+#categories {
+  appearance: none;
+  background-color: initial; /* override the background-color set on all richlistboxes in common.inc.css */
+  margin: 70px 0 0;
+  border-width: 0;
+  width: var(--in-content-sidebar-width);
+  outline: none;
+}
+
+@media print {
+  #categories {
+    display: none;
+  }
+}
+
+html|*#categories {
+  box-sizing: border-box;
+  padding: 1px;
+}
+
+#categories > .category {
+  border: 1px solid var(--in-content-primary-button-border-color);
+  border-radius: 4px;
+  min-height: 48px;
+  appearance: none;
+  color: inherit;
+  margin-inline-start: 34px;
+  padding-inline: 10px;
+  transition: background-color 150ms;
+}
+
+html|*#categories > html|*.category {
+  border: 1px solid var(--in-content-primary-button-border-color);
+  background-color: initial;
+  background-size: 24px;
+  background-repeat: no-repeat;
+  background-position-x: 10px;
+  background-position-y: 12px;
+  margin-inline-end: 0;
+  min-width: auto;
+  padding-inline-start: 34px;
+  text-align: start;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+}
+
+html|*#categories > html|*.category:dir(rtl) {
+  background-position-x: right 10px;
+}
+
+#categories > .category:hover {
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+  border-color: var(--in-content-button-border-color-hover);
+}
+
+#categories > .category:hover:active {
+  background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-active);
+  border-color: var(--in-content-button-border-color-active);
+}
+
+@media not (prefers-contrast) {
+  #categories > .category[selected],
+  #categories > .category.selected {
+    color: var(--in-content-accent-color);
+  }
+
+  #categories > .category[selected]:not(:hover) {
+    /* override richlistitem selected style while letting hover style above apply */
+    background-color: transparent;
+  }
+
+  #categories > .category[selected]:hover:active,
+  #categories > .category.selected:hover:active {
+    color: var(--in-content-accent-color-active);
+  }
+}
+
+@media (prefers-contrast) {
+  #categories > .category {
+    /* The transition causes issues with the text getting a background while
+     * transitioning and it looks weird. */
+    transition: none;
+    /* We need a true transparent but in HCM this would compute to an actual color,
+     * so select the page's background color instead: */
+    border-color: var(--in-content-page-background);
+  }
+
+  #categories > .category[selected],
+  #categories > .category.selected {
+    background-color: var(--in-content-button-background-hover);
+    color: var(--in-content-button-text-color-hover);
+    border-color: var(--in-content-button-border-color-hover);
+  }
+}
+
+#categories[keyboard-navigation="true"]:focus-visible > .category[current],
+#categories > .category:focus-visible {
+  outline: var(--in-content-focus-outline);
+  outline-offset: var(--in-content-focus-outline-inset);
+}
+
+html|*#categories[last-input-type="mouse"] > html|button.category:focus-visible {
+  outline: none;
+}
+
+.category-name {
+  font-size: 1.07em;
+  line-height: 1.4em;
+  padding-inline-start: 9px;
+  margin: 0;
+  user-select: none;
+}
+
+.category-icon {
+  width: 24px;
+  height: 24px;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+}
+
+.category[selected] > .category-icon,
+.category.selected > .category-icon {
+  fill-opacity: 1;
+}
+
+@media (max-width: 830px) {
+  :root {
+    --in-content-sidebar-width: 118px;
+  }
+
+  html|*.category:not(.category-no-icon) > html|*.category-name,
+  .category-icon + .category-name {
+    display: none;
+  }
+
+  #categories > .category {
+    padding-inline-start: 12px; /* make category icons align center */
+    margin-inline-end: 33px;
+  }
+
+  html|*#categories > html|*.category {
+    width: 48px;
+    min-width: auto;
+    box-sizing: border-box;
+  }
+
+  html|*#categories > html|*.category,
+  /* We need to override the full-width RTL rule, so explicitly specify RTL. */
+  html|*#categories > html|*.category:dir(rtl) {
+    background-position: center;
+  }
+
+  .main-content {
+    padding-inline: 0;
+  }
+
+  .pane-container {
+    margin-inline-end: 10px;
+  }
+}
+
+/* header */
+
+.header {
+  margin-inline-end: 4px; /* add the 4px end-margin of other elements */
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  align-items: baseline;
+}
+
+.header-name {
+  font-size: 1.46em;
+  font-weight: 300;
+  line-height: 1.3em;
+  margin: 0;
+}
+
+/* List boxes */
+
+html|select[size][multiple],
+xul|listheader,
+xul|richlistbox {
+  appearance: none;
+  margin-inline: 0;
+  background-color: var(--in-content-box-background);
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 4px;
+  color: var(--in-content-text-color);
+}
+
+xul|listheader {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  overflow: clip; /* Clip border-radius */
+}
+
+xul|listheader + xul|richlistbox {
+  margin-top: 0;
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+html|select[size][multiple] > html|option,
+xul|treechildren::-moz-tree-row {
+  padding: 0.3em;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background-image: none;
+}
+
+xul|treechildren::-moz-tree-row(multicol, odd) {
+  background-color: var(--in-content-box-background-odd);
+}
+
+html|select[size][multiple] > html|option:hover,
+xul|treechildren::-moz-tree-row(hover) {
+  background-color: var(--in-content-item-hover);
+  color: var(--in-content-item-hover-text);
+}
+
+xul|richlistbox > xul|richlistitem[selected],
+xul|treechildren::-moz-tree-row(selected) {
+  background-color: var(--in-content-item-selected);
+  color: var(--in-content-item-selected-text);
+}
+
+@media not (prefers-contrast) {
+  xul|richlistbox:not(#categories) > xul|richlistitem[selected] {
+    /* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */
+    --in-content-button-background: color-mix(in srgb, currentColor 15%, transparent);
+    --in-content-button-background-hover: color-mix(in srgb, currentColor 30%, transparent);
+    --in-content-button-background-active: color-mix(in srgb, currentColor 45%, transparent);
+    --in-content-button-text-color: var(--in-content-item-selected-text);
+    --in-content-button-text-color-hover: var(--in-content-item-selected-text);
+    --in-content-button-text-color-active: var(--in-content-button-text-color-hover);
+    --in-content-focus-outline-color: var(--in-content-item-selected-text);
+  }
+}
+
+xul|richlistitem[selected] xul|menulist:focus-visible {
+  outline-offset: var(--in-content-focus-outline-inset);
+}
+
+/* Use a 2px border so that selected row highlight is still visible behind
+    an existing high-contrast border that uses the background color */
+@media (prefers-contrast) {
+  xul|treechildren::-moz-tree-row(selected) {
+     border: 2px solid currentColor;
+     border-radius: 4px;
+  }
+}
+
+xul|panel[type="autocomplete-richlistbox"] {
+  background-color: var(--in-content-box-background);
+  border: 1px solid var(--in-content-box-border-color);
+  color: var(--in-content-text-color);
+}
+
+/* Trees */
+
+xul|tree {
+  appearance: none;
+  font-size: 1em;
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 4px;
+  background-color: var(--in-content-box-background);
+  color: inherit;
+  margin: 0;
+}
+
+xul|treecols {
+  appearance: none;
+  border: none;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-bottom: 1px solid var(--in-content-border-color);
+  overflow: clip; /* Clip border-radius */
+  padding: 0;
+}
+
+xul|treecol:not([hideheader="true"]),
+.tree-columnpicker-button {
+  appearance: none;
+  border: none;
+  border-radius: unset;
+  background-color: var(--in-content-button-background);
+  color: var(--in-content-button-text-color, inherit);
+  padding: 5px 10px;
+}
+
+xul|treecol:not([hideheader="true"], [sortable="false"]):hover,
+.tree-columnpicker-button:hover {
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+}
+
+xul|treecol:not([hideheader="true"], [sortable="false"]):hover:active,
+.tree-columnpicker-button:hover:active {
+  background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-active);
+}
+
+xul|treecol:not([hideheader="true"], :first-child),
+.tree-columnpicker-button {
+  border-inline-start-width: 1px;
+  border-inline-start-style: solid;
+  border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-box-border-color) 20%, var(--in-content-box-border-color) 80%, transparent 80%, transparent 100%) 1 1;
+}
+
+@media (prefers-contrast) {
+  xul|treecol:not([hideheader="true"], :first-child),
+  xul|treecolpicker {
+    --in-content-box-border-color: var(--in-content-button-border-color);
+  }
+}
+
+xul|treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
+  list-style-image: url("chrome://global/skin/icons/sort-arrow.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+  width: 18px;
+  height: 18px;
+}
+
+xul|treecol[sortDirection="ascending"]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
+  transform: scaleY(-1);
+}
+
+/* This is the only way to increase the height of a tree row unfortunately */
+xul|treechildren::-moz-tree-row {
+  min-height: 2em;
+}
+
+xul|treechildren::-moz-tree-cell-text(hover),
+xul|treechildren::-moz-tree-twisty(hover),
+xul|treechildren::-moz-tree-image(hover) {
+  color: var(--in-content-item-hover-text);
+}
+
+xul|treechildren::-moz-tree-cell-text(selected),
+xul|treechildren::-moz-tree-twisty(selected),
+xul|treechildren::-moz-tree-image(selected) {
+  color: var(--in-content-item-selected-text);
+}
+
+/* Message bars */
+.message-bar {
+  background-color: var(--in-content-box-info-background);
+  border-radius: 4px;
+  min-height: 32px;
+  align-items: center;
+  padding: 4px;
+}
+
+.message-bar-description {
+  margin: 2px 0;
+  line-height: 1.25;
+}
+
+.message-bar-description.rtl-locale {
+  direction: rtl;
+  text-align: match-parent;
+}
+
+/* The message-bar-button styles have extra specificity to override
+ * the defaults for buttons. */
+.message-bar-content > .message-bar-button {
+  background-color: var(--grey-90-a10);
+  border: none;
+  border-radius: 2px;
+  height: 24px;
+  margin-inline-start: 8px;
+  padding: 0 8px;
+}
+
+.message-bar-content > .message-bar-button:hover {
+  background-color: var(--grey-90-a20);
+}
+
+.message-bar-content > .message-bar-button:hover:active {
+  background-color: var(--grey-90-a30);
+}
+
+.message-bar-icon {
+  list-style-image: url("chrome://global/skin/icons/info.svg");
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  margin-inline-end: 4px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* Warning styles */
+.message-bar-warning {
+  background-color: var(--yellow-50);
+  color: var(--yellow-90);
+}
+
+.message-bar-warning > .message-bar-icon {
+  list-style-image: url("chrome://global/skin/icons/warning.svg");
+}
+
+input[type="text"][warning]:enabled:not(:focus) {
+  border-color: var(--yellow-60);
+  box-shadow: 0 0 0 1px var(--yellow-60), 0 0 0 4px var(--yellow-60-a30);
+}
+
+/* Cards */
+
+.card {
+  background: var(--in-content-box-background);
+  /* Needed for high-contrast where the border will appear. */
+  border: 1px solid transparent;
+  border-radius: 4px;
+  box-shadow: var(--card-shadow);
+  margin: 0 0 8px;
+  /* Remove the border from the overall padding. */
+  padding: calc(var(--card-padding) - 1px);
+  transition: box-shadow 150ms;
+}
+
+.card:not(.card-no-hover):hover {
+  box-shadow: var(--card-shadow-hover);
+}
+
+.card-heading-image {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  margin: -16px -16px 16px;
+}
+
+.card-heading-image:dir(rtl) {
+  transform: scaleX(-1);
+}
+
+/* Sidebar footer links */
+
+.sidebar-footer-list {
+  list-style-type: none;
+  margin-block: 0 36px;
+  margin-inline: 34px 0;
+  padding: 0;
+}
+
+.sidebar-footer-link {
+  height: 36px;
+  cursor: default;
+  border: 1px solid var(--in-content-button-border-color);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+}
+
+@media (prefers-contrast) {
+  .sidebar-footer-link {
+    /* We need a true transparent but in HCM this would compute to an actual color,
+     * so select the page's background color instead: */
+    border-color: var(--in-content-page-background);
+  }
+}
+
+.sidebar-footer-link,
+.sidebar-footer-link:visited {
+  /* Override link style for :hover and :hover:active states */
+  text-decoration: none !important;
+  color: inherit;
+}
+
+xul|*.sidebar-footer-link {
+  display: flex;
+  align-items: center;
+}
+
+.sidebar-footer-link:hover {
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+  border-color: var(--in-content-button-border-color-hover);
+}
+
+.sidebar-footer-link:hover:active:not([disabled]) {
+  background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-active);
+  border-color: var(--in-content-button-border-color-active);
+}
+
+.sidebar-footer-link:focus-visible {
+  outline: var(--in-content-focus-outline);
+  outline-offset: var(--in-content-focus-outline-inset);
+}
+
+.sidebar-footer-icon {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
+  margin: 10px;
+  margin-inline-start: 13px;
+}
+
+.sidebar-footer-label {
+  font-size: .9em;
+  margin: 0 4px;
+  user-select: none;
+}
+
+@media (max-width: 830px) {
+  .sidebar-footer-list {
+    margin-inline-start: 40px;
+    align-items: flex-start;
+  }
+
+  .sidebar-footer-link {
+    width: 36px;
+    height: 36px;
+    padding-inline-start: 0;
+    margin-inline-start: 1px;
+  }
+
+  .sidebar-footer-icon {
+    margin-inline-start: 10px;
+  }
+
+  .sidebar-footer-label {
+    display: none;
+  }
+}
+
+/* Icon helper classes */
+
+xul|*.help-icon {
+  list-style-image: url("chrome://global/skin/icons/help.svg");
+}
+
+xul|*.addons-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
+}
+
+/* Back button */
+
+.back-button {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  background-image: url("chrome://global/skin/icons/arrow-left.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  min-width: auto;
+  width: 32px;
+  margin-block: 0;
+  margin-inline-start: 0;
+}
+
+.back-button:-moz-locale-dir(rtl),
+.back-button:dir(rtl) {
+  transform: scaleX(-1);
+}
+
+/* Adjust vertical margins for buttons in dialogs. We do this here because
+ * this sheet gets inserted into the Shadow DOM for the button box in the dialog,
+ * so can actually affect the button styling that way.  */
+:host(dialog[subdialog]) .dialog-button-box > button {
+  margin: 0 4px;
+  min-width: auto;
+}
diff --git a/toolkit/themes/shared/in-content/info-pages.css b/toolkit/themes/shared/in-content/info-pages.css
new file mode 100644
index 0000000000..a0307960b8
--- /dev/null
+++ b/toolkit/themes/shared/in-content/info-pages.css
@@ -0,0 +1,182 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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");
+
+:root {
+  --in-content-container-min-width: 13em;
+  --in-content-container-max-width: 52em;
+}
+
+/* Body and container */
+body {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 40px 48px;
+  align-items: center;
+  justify-content: center;
+}
+
+body.wide-container {
+  display: block;
+}
+
+.container {
+  min-width: var(--in-content-container-min-width);
+  max-width: var(--in-content-container-max-width);
+}
+
+/* Typography */
+.title {
+  background-position: left 0;
+  background-repeat: no-repeat;
+  background-size: 1.6em;
+  margin-inline-start: -2.3em;
+  padding-inline-start: 2.3em;
+  font-size: 2.2em;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.title:-moz-locale-dir(rtl),
+.title:dir(rtl) {
+  background-position: right 0;
+}
+
+.title-text {
+  font-size: inherit;
+  padding-bottom: 0.4em;
+}
+
+@media (max-width: 970px) {
+  .title {
+    padding-inline-start: 0;
+    margin-inline-start: 0;
+    padding-top: 2.3em;
+  }
+
+  .title-text {
+    padding-top: 0;
+  }
+}
+
+.page-subtitle {
+  margin-bottom: 2em;
+}
+
+ul, ol {
+  margin: 1em 0;
+  padding: 0;
+  margin-inline-start: 2em;
+}
+
+ul > li, ol > li {
+  margin-bottom: .5em;
+}
+
+ul {
+  list-style: disc;
+}
+
+dt {
+  font-weight: bold;
+}
+
+ul.columns {
+  column-count: 2;
+  column-gap: 5em;
+}
+
+@media (max-width: 35em) {
+  ul.columns {
+    column-count: 1;
+  }
+}
+
+/* Buttons */
+.button-container {
+  margin-top: 1.2em;
+}
+
+button {
+  padding: 0 1.5em;
+}
+
+.button-container > button:first-child {
+  margin-inline-start: 0;
+}
+
+.button-container > button:last-child {
+  margin-inline-end: 0;
+}
+
+/* Trees */
+
+tree {
+  width: 100%;
+}
+
+/* Tables */
+
+table {
+  background-color: var(--in-content-table-background);
+  color: var(--in-content-text-color);
+  font: message-box;
+  text-align: start;
+  width: 100%;
+  border: 1px solid var(--in-content-table-border-color);
+  border-radius: 4px;
+  border-spacing: 0;
+  overflow: hidden;
+}
+
+table button {
+  padding-inline: 3px;
+}
+
+th, td {
+  padding: 4px;
+  text-align: match-parent;
+}
+
+thead th {
+  text-align: center;
+}
+
+th {
+  background-color: var(--in-content-table-header-background);
+  color: var(--in-content-table-header-color);
+  border: 1px solid var(--in-content-table-border-color);
+}
+
+th.column {
+  white-space: nowrap;
+  width: 0;
+}
+
+td {
+  border: 1px solid var(--in-content-border-color);
+  unicode-bidi: plaintext; /* Make sure file paths will be LTR */
+}
+
+.action-box {
+  background-color: var(--in-content-table-background);
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 4px;
+  padding: 16px;
+  flex: 1 1 25%;
+}
+
+.header-flex {
+  display: flex;
+  gap: 1.5rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.content-flex {
+  flex: 1 1 65%;
+}
diff --git a/toolkit/themes/shared/in-content/wifi.svg b/toolkit/themes/shared/in-content/wifi.svg
new file mode 100644
index 0000000000..39fd936231
--- /dev/null
+++ b/toolkit/themes/shared/in-content/wifi.svg
@@ -0,0 +1,30 @@
+<?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 version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     width="64"
+     height="64"
+     viewBox="0 0 64 64">
+
+  <style>
+    .gray {
+      fill: #797c80;
+    }
+  </style>
+
+  <defs>
+    <clipPath id="clip-path">
+      <polygon points="32 52.35 78.88 6.06 -14.88 6.06 32 52.35"/>
+    </clipPath>
+  </defs>
+
+  <circle class="gray" cx="32" cy="52" r="6"/>
+
+  <g clip-path="url('#clip-path')">
+    <path class="gray" d="M71.63,52A39.63,39.63,0,1,1,32,12.38,39.63,39.63,0,0,1,71.63,52ZM32,7.63A44.38,44.38,0,1,0,76.38,52,44.38,44.38,0,0,0,32,7.63Z"/>
+    <path class="gray" d="M47.75,52A15.75,15.75,0,1,1,32,36.25,15.75,15.75,0,0,1,47.75,52ZM32,31.65A20.35,20.35,0,1,0,52.35,52,20.35,20.35,0,0,0,32,31.65Z"/>
+    <path class="gray" d="M59.58,52A27.58,27.58,0,1,1,32,24.42,27.58,27.58,0,0,1,59.58,52ZM32,19.38A32.63,32.63,0,1,0,64.63,52,32.63,32.63,0,0,0,32,19.38Z"/>
+  </g>
+</svg>
diff --git a/toolkit/themes/shared/media/audio-muted.svg b/toolkit/themes/shared/media/audio-muted.svg
new file mode 100644
index 0000000000..bf26fc3877
--- /dev/null
+++ b/toolkit/themes/shared/media/audio-muted.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="m11 4.149 0 4.181 1.775 1.775c.3-.641.475-1.35.475-2.105a4.981 4.981 0 0 0-1.818-3.851l-.432 0z"/>
+  <path d="M2.067 1.183a.626.626 0 0 0-.885.885L4.115 5 2 5a2 2 0 0 0-2 2l0 2a2 2 0 0 0 2 2l2.117 0 3.128 3.65C7.848 15.353 9 14.927 9 14l0-4.116 3.317 3.317c-.273.232-.56.45-.873.636a.624.624 0 0 0-.218.856.621.621 0 0 0 .856.219 7.58 7.58 0 0 0 1.122-.823l.729.729a.626.626 0 0 0 .884-.886L2.067 1.183z"/>
+  <path d="M9 2c0-.926-1.152-1.352-1.755-.649L5.757 3.087 9 6.33 9 2z"/>
+  <path d="M11.341 2.169a6.767 6.767 0 0 1 3.409 5.864 6.732 6.732 0 0 1-.83 3.217l.912.912A7.992 7.992 0 0 0 16 8.033a8.018 8.018 0 0 0-4.04-6.95.625.625 0 0 0-.619 1.086z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/audio.svg b/toolkit/themes/shared/media/audio.svg
new file mode 100644
index 0000000000..0736786ba6
--- /dev/null
+++ b/toolkit/themes/shared/media/audio.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.245 1.35 4.117 5 2 5a2 2 0 0 0-2 2l0 2a2 2 0 0 0 2 2l2.117 0 3.128 3.65C7.848 15.353 9 14.927 9 14L9 2c0-.927-1.152-1.353-1.755-.65z"/>
+  <path d="M11.764 15a.623.623 0 0 1-.32-1.162 6.783 6.783 0 0 0 3.306-5.805 6.767 6.767 0 0 0-3.409-5.864.624.624 0 1 1 .619-1.085A8.015 8.015 0 0 1 16 8.033a8.038 8.038 0 0 1-3.918 6.879c-.1.06-.21.088-.318.088z"/>
+  <path d="M11.434 11.85A4.982 4.982 0 0 0 13.25 8a4.982 4.982 0 0 0-1.819-3.852l-.431 0 0 7.702.434 0z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/audioNoAudioButton.svg b/toolkit/themes/shared/media/audioNoAudioButton.svg
new file mode 100644
index 0000000000..7d5c60a09c
--- /dev/null
+++ b/toolkit/themes/shared/media/audioNoAudioButton.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="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill"
+        d="M14.901,3.571l-4.412,3.422V1.919L6.286,5.46H4.869c-1.298,0-2.36,1.062-2.36,2.36v2.36
+           c0,1.062,0.708,1.888,1.652,2.242l-2.242,1.77l1.18,1.416L16.081,4.987L14.901,3.571z M10.489,16.081V11.36l-2.669,2.36
+           L10.489,16.081z"/>
+</svg>
+
diff --git a/toolkit/themes/shared/media/castingButton-active.svg b/toolkit/themes/shared/media/castingButton-active.svg
new file mode 100644
index 0000000000..f57d30b2c1
--- /dev/null
+++ b/toolkit/themes/shared/media/castingButton-active.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="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill"
+        d="M0 13.91v2.454h2.455A2.451 2.451 0 0 0 0 13.909zm0-3.274v1.637a4.092 4.092 0 0 1 4.09 4.09h1.637A5.723 5.723 0 0 0 0 10.637zM14.727 4.91H3.273v1.334a10.664 10.664 0 0 1 6.848 6.848h4.606zM0 7.364V9a7.364 7.364 0 0 1 7.364 7.364H9a9 9 0 0 0-9-9zm16.364-5.728H1.636C.736 1.636 0 2.373 0 3.273v2.454h1.636V3.273h14.728v11.454h-5.728v1.637h5.728c.9 0 1.636-.737 1.636-1.637V3.273c0-.9-.736-1.637-1.636-1.637z"
+        fill-rule="evenodd"/>
+</svg>
diff --git a/toolkit/themes/shared/media/castingButton-ready.svg b/toolkit/themes/shared/media/castingButton-ready.svg
new file mode 100644
index 0000000000..7622e7349d
--- /dev/null
+++ b/toolkit/themes/shared/media/castingButton-ready.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="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill"
+        d="M16.364 1.636H1.636C.736 1.636 0 2.373 0 3.273v2.454h1.636V3.273h14.728v11.454h-5.728v1.637h5.728c.9 0 1.636-.737 1.636-1.637V3.273c0-.9-.736-1.637-1.636-1.637zM0 13.91v2.455h2.455A2.451 2.451 0 0 0 0 13.909zm0-3.273v1.637a4.092 4.092 0 0 1 4.09 4.09h1.637A5.723 5.723 0 0 0 0 10.637zm0-3.272V9a7.364 7.364 0 0 1 7.364 7.364H9a9 9 0 0 0-9-9z"
+        fill-rule="evenodd" />
+</svg>
diff --git a/toolkit/themes/shared/media/closed-caption-settings-button.svg b/toolkit/themes/shared/media/closed-caption-settings-button.svg
new file mode 100644
index 0000000000..1ef12e7902
--- /dev/null
+++ b/toolkit/themes/shared/media/closed-caption-settings-button.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="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m13.15 2.25.6.6v7.3l-.6.6h-1.9c-.28 0-.5.22-.5.5v2.15l-3.04-2.43c-.18-.14-.4-.22-.62-.22H2.85l-.6-.6v-7.3l.6-.6h10.3ZM13 1H3c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h4l3.75 3H12v-3h1c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2ZM6.27 7.73H4.86a.62.62 0 0 0-.62.62v.01c0 .342.278.62.62.62h1.41a.62.62 0 0 0 .62-.62v-.01a.62.62 0 0 0-.62-.62Zm2.24 0h2.63a.62.62 0 0 1 .62.62v.01a.62.62 0 0 1-.62.62H8.51a.62.62 0 0 1-.62-.62v-.01a.62.62 0 0 1 .62-.62Zm2.63-2.75H9.73a.62.62 0 0 0-.62.62v.01c0 .342.278.62.62.62h1.41a.62.62 0 0 0 .62-.62V5.6a.62.62 0 0 0-.62-.62Zm-6.28 0h2.63a.62.62 0 0 1 .62.62v.01a.62.62 0 0 1-.62.62H4.86a.62.62 0 0 1-.62-.62V5.6a.62.62 0 0 1 .62-.62Z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>
diff --git a/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg b/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg
new file mode 100644
index 0000000000..481c5c9cab
--- /dev/null
+++ b/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg
@@ -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/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill" fill-rule="evenodd"
+        d="M16.531,16.107H5.267l1.982-2H15c0.6,0,1-0.4,1-1V5.274
+           l1.946-1.964C17.963,3.399,18,3.483,18,3.576v11.031C18,15.407,17.331,16.107,16.531,16.107z M14.016,8.506h-1.218l1.005-1.014
+           C13.913,7.789,13.984,8.128,14.016,8.506z M11.786,12.361c-0.828,0-1.476-0.326-1.913-0.902l1.09-1.101
+           c0.136,0.323,0.374,0.541,0.796,0.541c0.514,0,0.695-0.44,0.756-1.014h1.535C13.908,11.43,13.071,12.361,11.786,12.361z
+           M1.496,16.106C0.697,16.104,0,15.406,0,14.607V3.576c0-0.8,0.7-1.5,1.5-1.5h12.846L16.299,0l1.316,1.283L2.615,17.13L1.496,16.106
+           z M3,4.107c-0.6,0-1,0.4-1,1v8c0,0.6,0.4,1,1,1h0.029l2.031-2.16c-0.757-0.503-1.191-1.457-1.191-2.744
+           c0-1.936,1.069-3.14,2.428-3.14c1.357,0,2.136,0.76,2.361,2.059l3.777-4.016H3z M8.298,8.506H7.355
+           c-0.047-0.623-0.49-1.23-0.99-1.23c-0.561,0-1.337,0.84-1.337,1.995c0,0.674,0.381,1.427,0.95,1.702L8.298,8.506z"/>
+</svg>
+
diff --git a/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg b/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg
new file mode 100644
index 0000000000..7f62144b93
--- /dev/null
+++ b/toolkit/themes/shared/media/closedCaptionButton-cc-on.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 xmlns="http://www.w3.org/2000/svg"
+     width="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill"
+        d="M16.531,1.984H1.5c-0.8,0-1.5,0.7-1.5,1.5v11.031c0,0.8,0.7,1.5,1.5,1.5h15.031
+           c0.8,0,1.469-0.7,1.469-1.5V3.484C18,2.684,17.331,1.984,16.531,1.984z
+           M16,13.016c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1v-8c0-0.6,0.4-1,1-1h12c0.6,0,1,0.4,1,1V13.016z
+           M6.426,10.807c-0.811,0-0.96-0.789-0.96-1.628c0-1.155,0.338-1.745,0.899-1.745c0.5,0,0.818,0.357,0.866,0.98
+           h1.484C8.585,6.877,7.785,5.972,6.297,5.972c-1.359,0-2.428,1.205-2.428,3.14c0,1.944,0.974,3.157,2.583,3.157
+           c1.285,0,2.153-0.93,2.295-2.476H7.244C7.183,10.367,6.94,10.807,6.426,10.807z
+           M11.759,10.807c-0.811,0-0.96-0.789-0.96-1.628c0-1.155,0.338-1.745,0.899-1.745c0.5,0,0.756,0.357,0.803,0.98h1.515
+           c-0.129-1.537-0.898-2.443-2.385-2.443c-1.359,0-2.396,1.205-2.396,3.14c0,1.944,0.943,3.157,2.552,3.157
+           c1.285,0,2.122-0.93,2.264-2.476h-1.535C12.454,10.367,12.273,10.807,11.759,10.807z"/>
+</svg>
+
diff --git a/toolkit/themes/shared/media/error.png b/toolkit/themes/shared/media/error.png
new file mode 100644
index 0000000000..51a73696c8
--- /dev/null
+++ b/toolkit/themes/shared/media/error.png
diff --git a/toolkit/themes/shared/media/fullscreenEnterButton.svg b/toolkit/themes/shared/media/fullscreenEnterButton.svg
new file mode 100644
index 0000000000..5ed0edb640
--- /dev/null
+++ b/toolkit/themes/shared/media/fullscreenEnterButton.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 xmlns="http://www.w3.org/2000/svg"
+     width="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill"
+        d="M6.728,10.188l-3.235,3.094l0.017-2.267l-1.513-0.016l0,5l4.987-0.008l0.011-1.537l-2.281-0.022
+           l3.097-3.158L6.728,10.188z M14.453,11.004l-0.022,2.281l-3.158-3.097l-1.086,1.083l3.094,3.235l-2.267-0.017l-0.016,1.514l5,0
+           l-0.008-4.988L14.453,11.004z M11.015,2.01l-0.011,1.537l2.281,0.022l-3.097,3.158l1.083,1.086l3.235-3.094L14.49,6.986
+           l1.513,0.016v-5L11.015,2.01z M6.986,3.511l0.016-1.514l-5,0L2.01,6.985l1.537,0.011l0.022-2.281l3.158,3.097l1.086-1.083
+           L4.718,3.494L6.986,3.511z"/>
+</svg>
+
diff --git a/toolkit/themes/shared/media/fullscreenExitButton.svg b/toolkit/themes/shared/media/fullscreenExitButton.svg
new file mode 100644
index 0000000000..1a770da285
--- /dev/null
+++ b/toolkit/themes/shared/media/fullscreenExitButton.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="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill"
+        d="M2.047,11.135l-0.011,1.537l2.281,0.022L1.22,15.851l1.083,1.086l3.235-3.094l-0.017,2.268l1.513,0.016
+           l0-5L2.047,11.135z M13.781,12.587l2.267,0.017l0.016-1.514l-5,0l0.008,4.988l1.537,0.011l0.022-2.281l3.158,3.097l1.086-1.083
+           L13.781,12.587z M16.058,5.578l-2.281-0.021l3.097-3.158l-1.083-1.086l-3.235,3.094l0.017-2.267L11.06,2.123v5l4.988-0.008
+           L16.058,5.578z M5.516,2.098L5.494,4.379L2.336,1.283L1.25,2.365L4.344,5.6L2.077,5.583L2.06,7.097l5,0L7.053,2.109L5.516,2.098z"/>
+</svg>
+
diff --git a/toolkit/themes/shared/media/imagedoc-darknoise.png b/toolkit/themes/shared/media/imagedoc-darknoise.png
new file mode 100644
index 0000000000..5c33e24d4c
--- /dev/null
+++ b/toolkit/themes/shared/media/imagedoc-darknoise.png
diff --git a/toolkit/themes/shared/media/imagedoc-lightnoise.png b/toolkit/themes/shared/media/imagedoc-lightnoise.png
new file mode 100644
index 0000000000..1fe5b3a586
--- /dev/null
+++ b/toolkit/themes/shared/media/imagedoc-lightnoise.png
diff --git a/toolkit/themes/shared/media/pause-fill.svg b/toolkit/themes/shared/media/pause-fill.svg
new file mode 100644
index 0000000000..8dc2dea140
--- /dev/null
+++ b/toolkit/themes/shared/media/pause-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="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m4.5 14-1 0A1.5 1.5 0 0 1 2 12.5l0-9A1.5 1.5 0 0 1 3.5 2l1 0A1.5 1.5 0 0 1 6 3.5l0 9A1.5 1.5 0 0 1 4.5 14z"/>
+  <path d="m11.5 14-1 0A1.5 1.5 0 0 1 9 12.5l0-9A1.5 1.5 0 0 1 10.5 2l1 0A1.5 1.5 0 0 1 13 3.5l0 9a1.5 1.5 0 0 1-1.5 1.5z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/picture-in-picture-closed.svg b/toolkit/themes/shared/media/picture-in-picture-closed.svg
new file mode 100644
index 0000000000..efa4028c00
--- /dev/null
+++ b/toolkit/themes/shared/media/picture-in-picture-closed.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.125 15a.625.625 0 0 0 0-1.25l-6.275 0-.6-.6 0-9.3.6-.6 10.3 0 .6.6 0 4.275a.625.625 0 0 0 1.25 0L14 4a2 2 0 0 0-2-2L2 2a2 2 0 0 0-2 2l0 9a2 2 0 0 0 2 2l6.125 0z"/>
+  <path d="m11.286 12.17-.75.75a.314.314 0 0 1-.536-.223l0-2.509.189-.188 2.509 0c.28 0 .42.338.222.536l-.75.75 2.652 2.652a.618.618 0 0 1 .11.718.496.496 0 0 1-.276.276.618.618 0 0 1-.718-.11l-2.652-2.652z"/>
+  <path d="M8 5 4 5a1 1 0 0 0-1 1l0 3a1 1 0 0 0 1 1l4 0a1 1 0 0 0 1-1l0-3a1 1 0 0 0-1-1z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.svg b/toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.svg
new file mode 100644
index 0000000000..3f7908a578
--- /dev/null
+++ b/toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.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="28" height="28" viewBox="0 0 28 28" fill="context-fill" xmlns="http://www.w3.org/2000/svg">

+  <path d="M20.7 7h-3.993a.5.5 0 0 0-.354.854l1.454 1.454-7.5 7.5-1.454-1.454a.5.5 0 0 0-.853.353V19.7l.3.3h3.993a.5.5 0 0 0 .354-.854l-1.454-1.454 7.5-7.5 1.454 1.454a.5.5 0 0 0 .853-.353V7.3l-.3-.3Z"/>

+</svg>

diff --git a/toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.svg b/toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.svg
new file mode 100644
index 0000000000..2d95224454
--- /dev/null
+++ b/toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.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="28" height="28" viewBox="0 0 28 28" fill="context-fill" xmlns="http://www.w3.org/2000/svg">

+  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.374 6a.626.626 0 0 1 .444 1.067l-3.625 3.625 1.454 1.454a.5.5 0 0 1-.354.854H15.3l-.3-.3V8.707a.5.5 0 0 1 .853-.353l1.173 1.173.28.281 3.626-3.625A.626.626 0 0 1 21.374 6ZM9.43 14.084A.5.5 0 0 1 9.707 14H13.7l.3.3v3.993a.5.5 0 0 1-.854.353l-1.173-1.173-.281-.28-3.625 3.624a.63.63 0 0 1-.885.001.628.628 0 0 1 0-.885l3.625-3.625-1.454-1.454a.5.5 0 0 1 .076-.77Z"/>

+</svg>

diff --git a/toolkit/themes/shared/media/picture-in-picture-open.svg b/toolkit/themes/shared/media/picture-in-picture-open.svg
new file mode 100644
index 0000000000..afc8910a2c
--- /dev/null
+++ b/toolkit/themes/shared/media/picture-in-picture-open.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 10-4 0a1 1 0 0 0-1 1l0 3a1 1 0 0 0 1 1l4 0a1 1 0 0 0 1-1l0-3a1 1 0 0 0-1-1z"/>
+  <path d="M8.125 15a.625.625 0 0 0 0-1.25l-6.275 0-.6-.6 0-9.3.6-.6 10.3 0 .6.6 0 4.275a.625.625 0 0 0 1.25 0L14 4a2 2 0 0 0-2-2L2 2a2 2 0 0 0-2 2l0 9a2 2 0 0 0 2 2l6.125 0z"/>
+  <path d="m6.714 7.83.75-.75A.314.314 0 0 1 8 7.303l0 2.509-.189.188-2.509 0a.314.314 0 0 1-.222-.536l.75-.75-2.652-2.652a.618.618 0 0 1-.11-.718.496.496 0 0 1 .276-.276.618.618 0 0 1 .718.11L6.714 7.83z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/picture-in-picture-seekBackward-button.svg b/toolkit/themes/shared/media/picture-in-picture-seekBackward-button.svg
new file mode 100644
index 0000000000..07428daa52
--- /dev/null
+++ b/toolkit/themes/shared/media/picture-in-picture-seekBackward-button.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="28" height="28" viewBox="0 0 28 28" fill="context-fill" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.196 19.097A7.455 7.455 0 0 1 7 13.793a.625.625 0 1 1 1.25 0c0 1.669.65 3.239 1.831 4.419a6.207 6.207 0 0 0 4.419 1.83 6.257 6.257 0 0 0 6.25-6.25 6.257 6.257 0 0 0-6.25-6.25 6.211 6.211 0 0 0-2.978.773l1.125 1.125a.5.5 0 0 1-.354.853h-3.52L8.5 10.02V6.5a.5.5 0 0 1 .854-.353l1.251 1.25A7.451 7.451 0 0 1 14.5 6.294c4.136 0 7.5 3.364 7.5 7.5 0 4.136-3.364 7.5-7.5 7.5a7.456 7.456 0 0 1-5.304-2.196v-.001Z"/>
+  <path d="M14.518 17.08c1.296 0 2.177-.844 2.174-2.02.003-1.114-.776-1.915-1.824-1.915-.51 0-.952.213-1.156.5h-.034l.15-1.457h2.543V11.18h-3.557l-.276 3.069 1.094.196c.18-.241.526-.392.87-.392.585.003 1.005.426 1.005 1.037 0 .605-.412 1.023-.989 1.023-.488 0-.883-.307-.91-.76h-1.195c.023 1.007.9 1.725 2.105 1.725Z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/picture-in-picture-seekForward-button.svg b/toolkit/themes/shared/media/picture-in-picture-seekForward-button.svg
new file mode 100644
index 0000000000..0968164dd4
--- /dev/null
+++ b/toolkit/themes/shared/media/picture-in-picture-seekForward-button.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 width="28" height="28" viewBox="0 0 28 28" fill="context-fill" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)">
+    <path d="M19.804 19.097A7.455 7.455 0 0 0 22 13.793a.624.624 0 1 0-1.25 0c0 1.669-.65 3.239-1.831 4.419a6.206 6.206 0 0 1-4.419 1.83 6.257 6.257 0 0 1-6.25-6.25 6.257 6.257 0 0 1 6.25-6.25c1.051 0 2.066.276 2.978.773L16.353 9.44a.5.5 0 0 0 .354.853h3.52l.273-.273V6.5a.5.5 0 0 0-.854-.353l-1.251 1.25A7.451 7.451 0 0 0 14.5 6.294C10.364 6.293 7 9.657 7 13.793c0 4.136 3.364 7.5 7.5 7.5 2.003 0 3.887-.78 5.304-2.196Z"/>
+    <path d="M14.518 17.08c1.296 0 2.177-.844 2.174-2.02.003-1.114-.776-1.915-1.824-1.915-.51 0-.952.213-1.156.5h-.034l.15-1.457h2.543V11.18h-3.557l-.276 3.069 1.094.196c.18-.241.526-.392.87-.392.585.003 1.005.426 1.005 1.037 0 .605-.412 1.023-.989 1.023-.488 0-.883-.307-.91-.76h-1.195c.023 1.007.9 1.725 2.105 1.725Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path transform="translate(6 6)" d="M0 0h16v16H0z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/toolkit/themes/shared/media/pipToggle.css b/toolkit/themes/shared/media/pipToggle.css
new file mode 100644
index 0000000000..2a2ddeac58
--- /dev/null
+++ b/toolkit/themes/shared/media/pipToggle.css
@@ -0,0 +1,393 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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 CSS file is for the Picture-in-Picture toggle.
+ *
+ * The "experiment" class is used to enable styling for the VARIANT version
+ * of the toggle for upcoming PiP Nimbus experiments.
+ * @see Bug 1811314.
+ *
+ * To see each section of style changes, search "PIP STYLING" in this file.
+ */
+
+/* SHARED PIP STYLING */
+
+.controlsOverlay[hidetoggle="true"].hovering > .pip-wrapper:not(.hovering) {
+  /* If this isn't !important, it will fail to override the other opacity
+   * rules, which are currently defined below this point in this file. */
+  opacity: 0 !important;
+}
+
+.pip-wrapper {
+  position: absolute;
+  cursor: pointer;
+  -moz-appearance: none;
+  background: none;
+  color: inherit;
+  border: none;
+  text-align: unset;
+  top: calc(70% - 40px);
+  opacity: 0;
+  padding-inline: 0;
+  transition: opacity 200ms;
+  --pip-icon-size: 24px;
+  --pip-icon-width-with-margins: calc(2 * var(--pip-toggle-margin) + var(--pip-icon-size));
+  --pip-highlight-style: solid rgba(0, 254, 255, 1);
+  --pip-highlight-width: 2px;
+  --pip-toggle-distanceFromVideoEdge: 18px;
+  --pip-toggle-focus-outline-offset: 1px;
+  --pip-toggle-margin: 8px;
+  --pip-border-radius-toggle: 4px;
+  --pip-box-shadow-default: 0 0 4px rgba(255, 255, 255, 0.9);
+  --pip-box-shadow-hover: 0 0 10px rgba(255, 255, 255, 0.7);
+  --pip-expanded-height: 40px;
+  --pip-expanded-min-width: 200px;
+  --pip-expanded-max-width: max-content;
+}
+
+/* Adjust sizing of the regular toggle wrapper to correctly show the
+ * focus outline when navigating via keyboard. */
+.pip-wrapper[has-used],
+.pip-wrapper[small-video] {
+  height: var(--pip-icon-width-with-margins);
+  width: var(--pip-icon-width-with-margins);
+  border-radius: var(--pip-border-radius-toggle);
+  margin-right: calc(var(--pip-icon-width-with-margins) * -1);
+}
+
+.pip-wrapper[policy="hidden"] {
+  display: none;
+}
+
+.pip-wrapper[policy="top"] {
+  top: 0%;
+  translate: var(--pip-toggle-translate-x);
+}
+
+.pip-wrapper[policy="one-quarter"] {
+  top: 25%;
+}
+
+.pip-wrapper[policy="middle"] {
+  top: 50%;
+}
+
+.pip-wrapper[policy="three-quarters"] {
+  top: 75%;
+}
+
+.pip-wrapper[policy="bottom"] {
+  top: 100%;
+  translate: var(--pip-toggle-translate-x) -100%;
+}
+
+.pip-wrapper[medium-video] > .pip-expanded > .pip-icon-label > .pip-label {
+  font-size: 13px;
+}
+
+.pip-wrapper[medium-video] > .pip-expanded {
+  font-size: 11px;
+}
+
+.pip-wrapper[position="right"] {
+  /* move from the right by total width of pip toggle so that it is at least visible in the video element */
+  right: calc(var(--pip-icon-width-with-margins) + var(--pip-toggle-distanceFromVideoEdge));
+}
+
+/* Re-position the first-time toggle such that it will always be the same distance away from the right edge
+ * of the video, even if the label and/or message string(s) are long. */
+.pip-wrapper[position="right"] > .pip-expanded {
+  translate: calc(-100% + var(--pip-icon-width-with-margins));
+  transform-origin: right;
+}
+
+.pip-wrapper[position="left"] {
+  left: var(--pip-toggle-distanceFromVideoEdge);
+}
+
+.pip-expanded,
+.pip-small,
+.pip-icon,
+.pip-explainer {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.pip-wrapper > .pip-expanded {
+  display: flex;
+  opacity: 0;
+  align-items: center;
+  scale: 0.33 1;
+  font-size: 14px;
+}
+
+.pip-wrapper:not([small-video], [has-used]) > .pip-small {
+  opacity: 0;
+  transition: opacity 200ms;
+}
+
+.pip-wrapper:not([small-video], [has-used]) > .pip-expanded {
+  opacity: 1;
+  scale: 1;
+  pointer-events: none;
+}
+
+.pip-wrapper:not([small-video], [has-used]).hovering > .pip-expanded {
+  pointer-events: auto;
+}
+
+.pip-icon {
+  top: 8px;
+  left: 8px;
+  pointer-events: none;
+  background-image: url("chrome://global/skin/media/picture-in-picture-open.svg");
+  background-position: center, center;
+  background-repeat: no-repeat;
+  background-size: var(--pip-icon-size) var(--pip-icon-size);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  height: var(--pip-icon-size);
+  width: var(--pip-icon-size);
+}
+
+.videocontrols[localedir="rtl"] .pip-icon {
+  transform: scaleX(-1);
+}
+
+.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-label {
+  margin-left: var(--pip-icon-width-with-margins);
+  margin-right: var(--pip-toggle-margin);
+}
+
+.pip-small {
+  width: 40px;
+  height: 40px;
+}
+
+.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-icon {
+  display: none;
+}
+
+.pip-wrapper:is([small-video], [has-used]) > .pip-expanded,
+.pip-wrapper[position="right"]:not([small-video], [has-used]) > .pip-icon {
+  display: none;
+}
+
+.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: inline-block;
+}
+
+.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+}
+
+.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon,
+.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-label {
+  margin-block: auto;
+}
+
+.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon {
+  margin-inline: var(--pip-toggle-margin);
+}
+
+.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-label {
+  margin-right: var(--pip-toggle-margin);
+}
+
+@media (prefers-reduced-motion) {
+  .pip-wrapper,
+  .pip-expanded,
+  .pip-small,
+  .pip-explainer {
+    /* Transition changes in other rules may override this one if reduced motion is preferred.
+     * Make sure this one always takes priority. */
+    transition: none !important;
+  }
+}
+
+
+/* NO EXPERIMENT - PIP STYLING */
+
+.controlsOverlay:not(.experiment).hovering > .pip-wrapper:not(:focus-visible) {
+  opacity: 0.8;
+}
+
+.controlsOverlay:not(.experiment).hovering > .pip-wrapper.hovering {
+  opacity: 1;
+}
+
+/* If the PiP toggle is keyboard focused, always show it at 100% opacity */
+.pip-wrapper:not([policy="hidden"], .experiment):focus-visible {
+  opacity: 1;
+}
+
+/* If showing the expanded PiP toggle, don't outline the
+ * parent wrapper element - the expanded toggle handles its
+ * own outline. This also affects the regular toggle for small-videos. */
+.pip-wrapper:not([policy="hidden"], [has-used], .experiment):focus-visible {
+  outline: none;
+}
+
+/* Override outline set by ua.css for the regular toggle. */
+.pip-wrapper[has-used]:not([policy="hidden"], .experiment):focus-visible {
+  outline: var(--control-focus-outline);
+}
+
+.pip-wrapper:not(.experiment) > .pip-small {
+  background-color: rgba(12, 12, 13, 0.65);
+  box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25);
+  border-radius: var(--pip-border-radius-toggle);
+}
+
+.pip-wrapper:not(.experiment) > .pip-expanded,
+.pip-wrapper:not(.experiment) > .pip-small {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-sizing: border-box;
+}
+
+/* If first-time toggle is visible and then switched to the regular toggle for smaller videos,
+ * maintain the border shown on the first-time toggle. */
+.pip-wrapper:not([has-used], .experiment) > .pip-small {
+  border: var(--pip-highlight-width) var(--pip-highlight-style);
+}
+
+.pip-wrapper:not(.experiment) > .pip-expanded {
+  border: var(--pip-highlight-width) var(--pip-highlight-style);
+  transition: opacity 250ms, scale 200ms;
+  height: var(--pip-expanded-height);
+  background-color: rgba(12, 12, 13, 0.9);
+  box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25);
+  width: var(--pip-expanded-max-width);
+  min-width: var(--pip-expanded-min-width);
+  border-radius: 8px;
+}
+
+.pip-wrapper:not(.experiment).hovering > .pip-expanded {
+  box-shadow: none;
+  border: var(--pip-highlight-width) var(--pip-highlight-style);
+  /* Remove bottom border but keep text centred with padding. */
+  border-bottom: none;
+  padding-bottom: var(--pip-highlight-width);
+}
+
+.pip-wrapper:not([small-video], [has-used], .experiment).hovering > .pip-expanded {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* Toggle message only appears for CONTROL variant. */
+.pip-wrapper:not(.experiment) > .pip-expanded > .pip-explainer {
+  padding: 6px 16px 8px 8px;
+  translate: 0;
+  transition: opacity 250ms, translate 190ms;
+  transition-timing-function: cubic-bezier(.07, .95, 0, 1);
+  background: rgba(12, 12, 13, 0.65);
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border: var(--pip-highlight-width) var(--pip-highlight-style);
+  border-top: 0;
+  box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25);
+  opacity: 0;
+  margin-inline: calc(-1 * var(--pip-highlight-width));
+  width: calc(100% - 24px);
+  word-break: break-word;
+  pointer-events: none;
+  user-select: none;
+}
+
+.videocontrols[localedir="rtl"] .pip-wrapper:not(.experiment) > .pip-explainer {
+  text-align: right;
+  direction: rtl;
+}
+
+.pip-wrapper:not(.experiment).hovering > .pip-expanded > .pip-explainer {
+  pointer-events: auto;
+  opacity: 1;
+  translate: 0 calc(40px - var(--pip-highlight-width));
+}
+
+
+/* EXPERIMENT ONLY - PIP STYLING */
+
+/* Since we change the outline for the first-time PiP toggle VARIANT,
+ * override the focus outline in videocontrols.css as well so that
+ * there is design consistency. */
+.controlsContainer.experiment {
+  --control-focus-outline: 2px solid #0060DF;
+}
+
+.pip-wrapper.experiment > .pip-expanded > .pip-icon-label > .pip-label {
+  font-size: min(16px, 1.4em);
+}
+
+/* Only the background will be set at 70% opacity. The icons and labels will remain at 100%. */
+.controlsOverlay.experiment.hovering > .pip-wrapper {
+  opacity: 1;
+}
+
+/* If the PiP toggle is keyboard focused, always show it and override outline set by ua.css.
+ * Opacity only affects the toggle icon and label, not the background, which is handled separately. */
+.pip-wrapper.experiment:not([policy="hidden"]):focus-visible {
+  opacity: 1;
+  /* Wrapper size won't always match pip-small or pip-expanded, so don't apply outline on wrapper. */
+  outline: none;
+}
+
+/* For the regular PiP toggle, take into consideration small videos and has-used=true. */
+.pip-wrapper.experiment:is([has-used], [small-video]):not([policy="hidden"]):focus-visible > .pip-small,
+.pip-wrapper.experiment:not([policy="hidden"], [has-used]):focus-visible > .pip-expanded {
+  outline: var(--control-focus-outline);
+  outline-offset: var(--pip-toggle-focus-outline-offset);
+}
+
+.pip-wrapper.experiment > .pip-expanded > .pip-explainer {
+  display: none;
+}
+
+.pip-wrapper.experiment > .pip-small {
+  border-radius: var(--pip-border-radius-toggle);
+  transition: background-color 200ms;
+}
+
+.pip-wrapper.experiment > .pip-expanded {
+  transition: opacity 250ms, scale 200ms, translate 190ms, background-color 200ms;
+  height: var(--pip-expanded-height);
+  width: var(--pip-expanded-max-width);
+  min-width: var(--pip-expanded-min-width);
+  border-radius: var(--pip-border-radius-toggle);
+}
+
+.pip-wrapper.experiment > .pip-small,
+.pip-wrapper.experiment > .pip-expanded {
+  background-color: rgba(0, 0, 0, 0.7);
+  box-sizing: border-box;
+}
+
+.pip-wrapper.experiment.hovering > .pip-small,
+.pip-wrapper.experiment.hovering > .pip-expanded {
+  background-color: rgba(0, 0, 0, 1);
+}
+
+.pip-wrapper.experiment:not([policy="hidden"], :focus-visible) > .pip-small,
+.pip-wrapper.experiment:not([policy="hidden"], :focus-visible) > .pip-expanded {
+  box-shadow: var(--pip-box-shadow-default);
+}
+
+.pip-wrapper.experiment:not([policy="hidden"], :focus-visible).hovering > .pip-small,
+.pip-wrapper.experiment:not([policy="hidden"], :focus-visible).hovering > .pip-expanded {
+  box-shadow: var(--pip-box-shadow-hover);
+}
+
+/* Remove white box shadow if there is keyboard focus on the toggle and
+ * replace it with blue box shadow instead. */
+.pip-wrapper.experiment:not([policy="hidden"]):focus-visible > .pip-small,
+.pip-wrapper.experiment:not([policy="hidden"]):focus-visible > .pip-expanded {
+  box-shadow: 0 0 10px rgba(0, 96, 223, 0.9);
+}
diff --git a/toolkit/themes/shared/media/play-fill.svg b/toolkit/themes/shared/media/play-fill.svg
new file mode 100644
index 0000000000..1558868ecb
--- /dev/null
+++ b/toolkit/themes/shared/media/play-fill.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.992 13.498 0-10.996a1.5 1.5 0 0 1 2.245-1.303l9.621 5.498a1.5 1.5 0 0 1 0 2.605L5.237 14.8a1.5 1.5 0 0 1-2.245-1.302z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/stalled.png b/toolkit/themes/shared/media/stalled.png
new file mode 100644
index 0000000000..525375889b
--- /dev/null
+++ b/toolkit/themes/shared/media/stalled.png
diff --git a/toolkit/themes/shared/media/textrecognition.css b/toolkit/themes/shared/media/textrecognition.css
new file mode 100644
index 0000000000..b10bc21329
--- /dev/null
+++ b/toolkit/themes/shared/media/textrecognition.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 url("http://www.w3.org/1999/xhtml");
+
+.textrecognition {
+  position: absolute;
+  overflow: clip;
+
+  /* Prevent unwanted style inheritance. */
+  font: normal normal normal 100%/normal sans-serif;
+  text-align: left;
+  white-space: normal;
+}
+
+canvas {
+  position: absolute;
+  user-select: none;
+  inset: 0;
+}
+
+span {
+  position: absolute;
+  transform-origin: 0 0;
+  color: transparent;
+}
diff --git a/toolkit/themes/shared/media/throbber.png b/toolkit/themes/shared/media/throbber.png
new file mode 100644
index 0000000000..8e49fe5b2a
--- /dev/null
+++ b/toolkit/themes/shared/media/throbber.png
diff --git a/toolkit/themes/shared/media/videocontrols.css b/toolkit/themes/shared/media/videocontrols.css
new file mode 100644
index 0000000000..a0e1f91d5b
--- /dev/null
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -0,0 +1,586 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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.w3.org/1999/xhtml");
+
+.videocontrols {
+  writing-mode: horizontal-tb;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  overflow: hidden;
+
+  direction: ltr;
+  /* Prevent selection from interacting weirdly with the page,
+   * see bug 1766093. Our text selection story with shadow dom should be
+   * better, see bug 1590379 */
+  user-select: none;
+  /* Prevent unwanted style inheritance. See bug 554717. */
+  text-align: left;
+  list-style-image: none !important;
+  font: normal normal normal 100%/normal sans-serif !important;
+  text-decoration: none !important;
+  white-space: normal !important;
+}
+
+.videocontrols[flipped="true"] {
+  transform: scaleX(-1);
+}
+
+.controlsContainer {
+  --clickToPlay-size: 48px;
+  --button-size: 30px;
+  --timer-size: 40px;
+  --timer-long-size: 60px;
+  --track-size: 5px;
+  --thumb-size: 13px;
+  --label-font-size: 13px;
+  --pip-toggle-padding: 5px;
+  --control-focus-outline: 2px solid #00DDFF;
+  --control-focus-outline-offset: -2px;
+  --pip-toggle-icon-width-height: 16px;
+  --pip-toggle-translate-x: calc(100% - var(--pip-toggle-icon-width-height) - 2 * var(--pip-toggle-padding));
+
+  color: #fff;
+}
+.controlsContainer.touch {
+  --clickToPlay-size: 64px;
+  --button-size: 40px;
+  --timer-size: 52px;
+  --timer-long-size: 78px;
+  --track-size: 7px;
+  --thumb-size: 16px;
+  --label-font-size: 16px;
+}
+
+/* Some CSS custom properties defined here are referenced by videocontrols.js */
+.controlBar {
+  /* Do not delete: these variables are accessed by JavaScript directly.
+     see videocontrols.js and search for |-width|. */
+  --clickToPlay-width: var(--clickToPlay-size);
+  --playButton-width: var(--button-size);
+  --scrubberStack-width: 64px;
+  --muteButton-width: var(--button-size);
+  --volumeStack-width: 48px;
+  --castingButton-width: var(--button-size);
+  --closedCaptionButton-width: var(--button-size);
+  --fullscreenButton-width: var(--button-size);
+  --positionDurationBox-width: var(--timer-size);
+  --durationSpan-width: var(--timer-size);
+  --positionDurationBox-width-long: var(--timer-long-size);
+  --durationSpan-width-long: var(--timer-long-size);
+}
+
+.touch .controlBar {
+  /* Do not delete: these variables are accessed by JavaScript directly.
+     see videocontrols.js and search for |-width|. */
+  --scrubberStack-width: 84px;
+  --volumeStack-width: 64px;
+}
+
+.controlsContainer [hidden],
+.controlBar[hidden] .progressBar,
+.controlBar[hidden] .bufferBar,
+.videocontrols[inDOMFullscreen] > .controlsContainer > .controlsOverlay > #pictureInPictureToggle {
+  display: none;
+}
+
+/* We hide the controlBar visually so it doesn't obscure the video. However,
+ * we still want to expose it to a11y so users who don't use a mouse can access
+ * it.
+ */
+.controlBar[hidden] {
+  display: flex;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.controlBar[size="hidden"] {
+  display: none;
+}
+
+.controlsSpacer[hideCursor] {
+  cursor: none;
+}
+
+.controlsContainer,
+.progressContainer {
+  position: relative;
+  height: 100%;
+}
+
+.stackItem {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.statusOverlay {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: rgb(80,80,80, .85);
+}
+
+.controlsOverlay {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.controlsSpacerStack {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+}
+
+.controlBar {
+  display: flex;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  height: 40px;
+  padding: 0 9px;
+  background-color: rgba(26,26,26,.8);
+}
+
+.touch .controlBar {
+  height: 52px;
+}
+
+.controlBar > .button {
+  /* Prevent #textTrackListContainer from blocking clicks on controls */
+  z-index: 1;
+  height: 100%;
+  min-width: var(--button-size);
+  min-height: var(--button-size);
+  padding: 6px;
+  border: 0;
+  margin: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-origin: content-box;
+  background-clip: content-box;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  color: inherit;
+  /* We don't suppress ::-moz-focus-inner, so that does for a focus indicator */
+  outline: none;
+}
+
+/* Keyboard focus styling for interactive control elements (includes control
+   bar, click to play and track list) */
+.controlBar > .button:focus-visible,
+.volumeControl:focus-visible,
+.scrubber:focus-visible,
+.clickToPlay:focus-visible,
+.textTrackList > .textTrackItem:focus-visible {
+  outline: var(--control-focus-outline);
+  outline-offset: var(--control-focus-outline-offset);
+}
+
+.touch .controlBar > .button {
+  background-size: 24px 24px;
+}
+
+.controlBar > .button:enabled:hover {
+  fill: #48a0f7;
+}
+
+.controlBar > .button:enabled:hover:active {
+  fill: #2d89e6;
+}
+
+.playButton {
+  background-image: url(chrome://global/skin/media/pause-fill.svg);
+}
+.playButton[paused] {
+  background-image: url(chrome://global/skin/media/play-fill.svg);
+}
+
+.muteButton {
+  background-image: url(chrome://global/skin/media/audio.svg);
+}
+.muteButton[muted] {
+  background-image: url(chrome://global/skin/media/audio-muted.svg);
+}
+.muteButton[noAudio] {
+  background-image: url(chrome://global/skin/media/audioNoAudioButton.svg);
+}
+.muteButton[noAudio] + .volumeStack {
+  display: none;
+}
+
+.castingButton {
+  background-image: url(chrome://global/skin/media/castingButton-ready.svg);
+}
+
+.castingButton[enabled] {
+  background-image: url(chrome://global/skin/media/castingButton-active.svg);
+}
+
+.closedCaptionButton {
+  background-image: url(chrome://global/skin/media/closedCaptionButton-cc-off.svg);
+}
+.closedCaptionButton[enabled] {
+  background-image: url(chrome://global/skin/media/closedCaptionButton-cc-on.svg);
+}
+
+.fullscreenButton {
+  background-image: url(chrome://global/skin/media/fullscreenEnterButton.svg);
+}
+.fullscreenButton[fullscreened] {
+  background-image: url(chrome://global/skin/media/fullscreenExitButton.svg);
+}
+
+.controlBarSpacer {
+  flex-grow: 1;
+}
+
+.volumeControl::-moz-range-thumb,
+.scrubber::-moz-range-thumb {
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  border: none;
+  border-radius: 50%;
+  /* this is a foreground element even though it is implemented as a background */
+  background-color: currentColor;
+  filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.65));
+}
+
+.volumeControl,
+.scrubber {
+  outline: none;
+}
+
+.progressBackgroundBar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.progressStack {
+  position: relative;
+  width: 100%;
+  height: var(--track-size);
+}
+
+.scrubberStack {
+  /* minus margin to get basis of required width */
+  min-width: calc(var(--scrubberStack-width) - 18px);
+  flex-basis: calc(var(--scrubberStack-width) - 18px);
+  flex-grow: 2;
+  flex-shrink: 0;
+  margin: 0 9px;
+}
+
+.volumeStack {
+  max-width: 60px;
+  min-width: var(--volumeStack-width);
+  flex-grow: 1;
+  flex-shrink: 0;
+  margin-right: 6px;
+  margin-left: 4px;
+}
+
+.bufferBar,
+.progressBar,
+.scrubber,
+.volumeControl {
+  bottom: 0;
+  color: inherit;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--track-size) / 2);
+  margin: 0;
+  background: none;
+  outline: none;
+}
+
+.bufferBar {
+  background-color: rgba(0,0,0,0.7);
+}
+
+.bufferBar::-moz-progress-bar,
+.progressBar::-moz-progress-bar {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: calc(var(--track-size) / 2);
+  background: none;
+}
+
+.bufferBar::-moz-progress-bar {
+  background-color: rgba(255,255,255,0.3);
+  border-radius: calc(var(--track-size) / 2);
+}
+
+.progressBar::-moz-progress-bar {
+  background-color: #00b6f0;
+}
+
+.scrubber:hover::-moz-range-thumb,
+.volumeControl:hover::-moz-range-thumb {
+  background-color: #48a0f7;
+}
+
+.scrubber:active::-moz-range-thumb,
+.volumeControl:active::-moz-range-thumb {
+  background-color: #2d89e6;
+}
+
+.scrubber::-moz-range-track,
+.scrubber::-moz-range-progress {
+  background-color: transparent;
+}
+
+.volumeControl::-moz-range-progress,
+.volumeControl::-moz-range-track {
+  height: var(--track-size);
+  border-radius: calc(var(--track-size) / 2);
+}
+
+.volumeControl::-moz-range-progress {
+  /* this is a foreground element even though it is implemented as a background */
+  background-color: currentColor;
+}
+
+.volumeControl::-moz-range-track {
+  background-color: rgba(0,0,0,0.7);
+}
+
+@media (prefers-contrast) {
+  /* Show a border in high contrast mode since background-colors
+     are not shown. */
+  .scrubber::-moz-range-track,
+  .volumeControl::-moz-range-track {
+    border: 1px solid;
+  }
+
+  .scrubber::-moz-range-progress,
+  .volumeControl::-moz-range-progress {
+    border: 2px solid;
+  }
+}
+
+.textTrackListContainer {
+  position: absolute;
+  right: 5px;
+  bottom: 45px;
+  top: 5px;
+  max-width: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+}
+
+.textTrackList {
+  flex: 0 1 auto;
+  border: 1px solid #000;
+  border-radius: 2.5px;
+  padding: 5px 0;
+  vertical-align: middle;
+  background-color: #000;
+  opacity: 0.7;
+  overflow-y: auto;
+}
+
+.touch .textTrackList {
+  bottom: 58px;
+}
+
+.textTrackList > .textTrackItem {
+  display: block;
+  width: 100%;
+  height: var(--button-size);
+  font-size: var(--label-font-size);
+  padding: 2px 10px;
+  border: none;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  background-color: transparent;
+  color: inherit;
+}
+
+.textTrackList > .textTrackItem:hover {
+  background-color: #444;
+}
+
+.textTrackList > .textTrackItem[aria-checked="true"] {
+  color: #48a0f7;
+}
+
+.positionLabel,
+.durationLabel {
+  display: none;
+}
+
+.positionDurationBox {
+  text-align: center;
+  padding-inline-start: 1px;
+  padding-inline-end: 9px;
+  white-space: nowrap;
+  font: message-box;
+  font-size: var(--label-font-size);
+  font-size-adjust: 0.55;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (-moz-platform: macos) {
+  .positionDurationBox {
+    font-size-adjust: unset;
+    font-family: "Helvetica Neue", "Helvetica", sans-serif;
+  }
+}
+
+.duration {
+  display: inline-block;
+  white-space: pre;
+  color: #929292;
+}
+
+.statusIcon {
+  width: 36px;
+  height: 36px;
+  margin-bottom: 20px;
+}
+
+/* Not showing the throbber on mobile because of conflict with m.youtube.com (see bug 1289412) */
+.controlsContainer:not(.mobile) .statusIcon[type="throbber"] {
+  background: url(chrome://global/skin/media/throbber.png) no-repeat center;
+}
+
+.controlsContainer:not(.mobile) .statusIcon[type="throbber"][stalled] {
+  background: url(chrome://global/skin/media/stalled.png) no-repeat center;
+}
+
+.statusIcon[type="error"],
+.statusIcon[type="pictureInPicture"] {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.statusIcon[type="error"] {
+  min-width: 70px;
+  min-height: 60px;
+  background-image: url(chrome://global/skin/media/error.png);
+}
+
+.statusIcon[type="pictureInPicture"] {
+  min-width: 84px;
+  min-height: 84px;
+  background-image: url(chrome://global/skin/media/picture-in-picture-open.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.videocontrols[localedir="rtl"] .statusIcon[type="pictureInPicture"] {
+  transform: scaleX(-1);
+}
+
+.pictureInPictureToggleLabel {
+  margin-inline-start: var(--pip-toggle-padding);
+}
+
+/* Overlay Play button */
+.clickToPlay {
+  appearance: none;
+  border: none;
+  min-width: var(--clickToPlay-size);
+  min-height: var(--clickToPlay-size);
+  border-radius: 50%;
+  background-image: url(chrome://global/skin/media/play-fill.svg);
+  background-repeat: no-repeat;
+  background-position: 54% 50%;
+  background-size: 40% 40%;
+  background-color: #1a1a1a;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  color: inherit;
+  opacity: 0.8;
+  position: relative;
+  top: 20px;
+}
+
+.controlsSpacerStack:hover > .clickToPlay,
+.clickToPlay:hover {
+  opacity: 0.55;
+}
+
+.controlsSpacerStack:hover > .clickToPlay[fadeout] {
+  opacity: 0;
+}
+
+.controlBar[fullscreen-unavailable] .fullscreenButton {
+  display: none;
+}
+
+.statusOverlay[fadeout],
+.statusOverlay[error] + .controlsOverlay > .controlsSpacerStack {
+  opacity: 0;
+}
+
+.pictureInPictureOverlay {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  background-color: rgb(12, 12, 13);
+}
+
+/* Status description formatting */
+.statusLabel {
+  display: none;
+  padding: 0 10px;
+  text-align: center;
+  font: message-box;
+  font-size: 14px;
+}
+
+.videocontrols[localedir="rtl"] .statusLabel {
+  direction: rtl;
+}
+
+[status="errorAborted"]         > #errorAborted,
+[status="errorNetwork"]         > #errorNetwork,
+[status="errorDecode"]          > #errorDecode,
+[status="errorSrcNotSupported"] > #errorSrcNotSupported,
+[status="errorNoSource"]        > #errorNoSource,
+[status="errorGeneric"]         > #errorGeneric,
+[status="pictureInPicture"]     > #pictureInPicture {
+  display: inline;
+}
+
+@media (-moz-platform: windows) and (-moz-windows-default-theme: 0) {
+  .controlsSpacer,
+  .clickToPlay {
+    background-color: transparent;
+  }
+}
+
+.a11y-only {
+  position: absolute;
+  left: -10000px;
+  width: 100px;
+  height: 100px;
+}
diff --git a/toolkit/themes/shared/menu-scrolling.css b/toolkit/themes/shared/menu-scrolling.css
new file mode 100644
index 0000000000..d0a62d130d
--- /dev/null
+++ b/toolkit/themes/shared/menu-scrolling.css
@@ -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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Scroll buttons */
+
+/* Hide arrow buttons when there's nothing to scroll in that direction */
+.menupopup-arrowscrollbox[scrolledtostart="true"]::part(scrollbutton-up),
+.menupopup-arrowscrollbox[scrolledtoend="true"]::part(scrollbutton-down) {
+  display: none;
+}
+
+/* Prevent the scrolled contents of the menupopup from jumping vertically when
+ * the arrow buttons appear / disappear, by positioning ::part(scrollbox) in
+ * such a way that its edges are at the same position as the edges of
+ * arrowscrollbox regardless of scroll button visibility.
+ */
+.menupopup-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbox) {
+  /* scrollbutton-up is visible; shift our top edge up by its height. */
+  margin-top: -16px;
+}
+
+.menupopup-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbox) {
+  /* scrollbutton-down is visible; shift our bottom edge down by its height. */
+  margin-bottom: -16px;
+}
+
+.menupopup-arrowscrollbox::part(scrollbox-clip) {
+  /* In the space where the arrow buttons overlap the scrollbox, clip away the
+   * scrollbox so that nothing is shown behind the arrow button even if the
+   * button is transparent.
+   */
+  overflow: clip;
+}
diff --git a/toolkit/themes/shared/menulist-shared.css b/toolkit/themes/shared/menulist-shared.css
new file mode 100644
index 0000000000..b775b66cbf
--- /dev/null
+++ b/toolkit/themes/shared/menulist-shared.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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+:host(:not([native])) {
+  appearance: none;
+  background-color: var(--button-bgcolor, ButtonFace);
+  color: var(--button-color, ButtonText);
+  border-radius: 4px;
+  padding-block: 4px;
+  padding-inline: 12px 8px;
+  margin: 5px 2px 3px;
+}
+
+:host(:not([native])[size="medium"]) {
+  padding-block: 6px;
+  padding-inline: 16px 10px;
+}
+
+:host(:not([native])[size="large"]) {
+  padding-block: 8px;
+  padding-inline: 16px 12px;
+}
+
+:host(:not([native]):hover) {
+  background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace));
+}
+
+:host(:not([native]):hover:active) {
+  background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace));
+}
+
+:host(:not([native]):focus-visible) {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+#label-box {
+  min-width: 0;
+  pointer-events: none;
+}
+
+#label-box:not([native]) {
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+}
+
+dropmarker {
+  pointer-events: none;
+}
+
+dropmarker:not([native]) {
+  display: flex;
+  appearance: none;
+  width: 12px;
+  height: unset;
+}
+
+dropmarker:not([native])::part(icon) {
+  list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#highlightable-label:not([highlightable="true"]),
+#label[highlightable="true"] {
+  display: none;
+}
diff --git a/toolkit/themes/shared/minimal-toolkit.jar.inc.mn b/toolkit/themes/shared/minimal-toolkit.jar.inc.mn
new file mode 100644
index 0000000000..a30a507f52
--- /dev/null
+++ b/toolkit/themes/shared/minimal-toolkit.jar.inc.mn
@@ -0,0 +1,47 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.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 ALL
+# 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.
+#
+# Note that items included here get shipped on mobile. If mobile
+# doesn't need them, please use shared/desktop-jar.inc.mn instead, to keep
+# mobile package size down.
+
+toolkit.jar:
+% skin global classic/1.0 %skin/classic/global/
+
+# images and CSS we need for widgets like video controls
+  skin/classic/global/icons/resizer.svg                    (../../shared/icons/resizer.svg)
+
+  skin/classic/global/media/imagedoc-lightnoise.png        (../../shared/media/imagedoc-lightnoise.png)
+  skin/classic/global/media/imagedoc-darknoise.png         (../../shared/media/imagedoc-darknoise.png)
+
+  skin/classic/global/media/videocontrols.css              (../../shared/media/videocontrols.css)
+  skin/classic/global/media/pipToggle.css                  (../../shared/media/pipToggle.css)
+
+  skin/classic/global/media/pause-fill.svg                 (../../shared/media/pause-fill.svg)
+  skin/classic/global/media/play-fill.svg                  (../../shared/media/play-fill.svg)
+  skin/classic/global/media/error.png                      (../../shared/media/error.png)
+  skin/classic/global/media/throbber.png                   (../../shared/media/throbber.png)
+  skin/classic/global/media/stalled.png                    (../../shared/media/stalled.png)
+  skin/classic/global/media/audio-muted.svg                (../../shared/media/audio-muted.svg)
+  skin/classic/global/media/audioNoAudioButton.svg         (../../shared/media/audioNoAudioButton.svg)
+  skin/classic/global/media/audio.svg                      (../../shared/media/audio.svg)
+  skin/classic/global/media/castingButton-ready.svg        (../../shared/media/castingButton-ready.svg)
+  skin/classic/global/media/castingButton-active.svg       (../../shared/media/castingButton-active.svg)
+  skin/classic/global/media/closedCaptionButton-cc-off.svg (../../shared/media/closedCaptionButton-cc-off.svg)
+  skin/classic/global/media/closedCaptionButton-cc-on.svg  (../../shared/media/closedCaptionButton-cc-on.svg)
+  skin/classic/global/media/fullscreenEnterButton.svg      (../../shared/media/fullscreenEnterButton.svg)
+  skin/classic/global/media/fullscreenExitButton.svg       (../../shared/media/fullscreenExitButton.svg)
+  skin/classic/global/media/closed-caption-settings-button.svg (../../shared/media/closed-caption-settings-button.svg)
+  skin/classic/global/media/picture-in-picture-enter-fullscreen-button.svg (../../shared/media/picture-in-picture-enter-fullscreen-button.svg)
+  skin/classic/global/media/picture-in-picture-exit-fullscreen-button.svg (../../shared/media/picture-in-picture-exit-fullscreen-button.svg)
+  skin/classic/global/media/picture-in-picture-seekForward-button.svg (../../shared/media/picture-in-picture-seekForward-button.svg)
+  skin/classic/global/media/picture-in-picture-seekBackward-button.svg (../../shared/media/picture-in-picture-seekBackward-button.svg)
+# Text recognition widget
+
+  skin/classic/global/media/textrecognition.css            (../../shared/media/textrecognition.css)
diff --git a/toolkit/themes/shared/mozapps.inc.mn b/toolkit/themes/shared/mozapps.inc.mn
new file mode 100644
index 0000000000..d2beca0bda
--- /dev/null
+++ b/toolkit/themes/shared/mozapps.inc.mn
@@ -0,0 +1,35 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.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/mozapps/extensions/dictionaryGeneric.svg      (../../shared/extensions/category-dictionaries.svg)
+  skin/classic/mozapps/extensions/extensionGeneric.svg       (../../shared/extensions/extensionGeneric.svg)
+  skin/classic/mozapps/extensions/themeGeneric.svg           (../../shared/extensions/category-themes.svg)
+  skin/classic/mozapps/extensions/category-available.svg     (../../shared/extensions/category-available.svg)
+  skin/classic/mozapps/extensions/category-discover.svg      (../../shared/extensions/category-discover.svg)
+  skin/classic/mozapps/extensions/category-extensions.svg    (../../shared/extensions/category-extensions.svg)
+  skin/classic/mozapps/extensions/category-plugins.svg       (../../shared/extensions/category-plugins.svg)
+  skin/classic/mozapps/extensions/category-recent.svg        (../../shared/extensions/category-recent.svg)
+  skin/classic/mozapps/extensions/category-sitepermission.svg  (../../shared/extensions/category-sitepermission.svg)
+  skin/classic/mozapps/extensions/extension.svg              (../../shared/extensions/extension.svg)
+  skin/classic/mozapps/extensions/recommended.svg            (../../shared/extensions/recommended.svg)
+  skin/classic/mozapps/extensions/line.svg                   (../../shared/extensions/line.svg)
+#ifndef ANDROID
+  skin/classic/mozapps/extensions/rating-star.svg            (../../shared/extensions/rating-star.svg)
+#endif
+#ifndef ANDROID
+  skin/classic/mozapps/aboutProfiles.css                     (../../shared/aboutProfiles.css)
+#endif
+  skin/classic/mozapps/aboutServiceWorkers.css               (../../shared/aboutServiceWorkers.css)
+  skin/classic/mozapps/profileDowngrade.css                  (../../shared/profileDowngrade.css)
+  skin/classic/mozapps/profileSelection.css                  (../../shared/profileSelection.css)
+
+% override chrome://mozapps/skin/extensions/category-languages.svg        chrome://mozapps/skin/extensions/localeGeneric.svg
+% override chrome://mozapps/skin/extensions/category-themes.svg           chrome://mozapps/skin/extensions/themeGeneric.svg
+% override chrome://mozapps/skin/extensions/category-dictionaries.svg chrome://mozapps/skin/extensions/dictionaryGeneric.svg
+% override chrome://mozapps/skin/extensions/localeGeneric.svg         chrome://mozapps/skin/extensions/dictionaryGeneric.svg
diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css
new file mode 100644
index 0000000000..fbda43841e
--- /dev/null
+++ b/toolkit/themes/shared/narrate.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/. */
+
+/* Avoid adding ID selector rules in this style sheet, since they could
+ * inadvertently match elements in the article content. */
+
+body {
+  --current-voice: #7f7f7f;
+  --narrate-word-highlight-color: #ffe087;
+  --narrating-paragraph-background-color: #ffc;
+}
+
+body.sepia {
+  --narrate-word-highlight-color: #bdb5a5;
+  --narrating-paragraph-background-color: #e0d7c5;
+}
+
+body.dark {
+  --current-voice: #a09eac;
+  --narrate-word-highlight-color: #6f6f6f;
+  --narrating-paragraph-background-color: #242424;
+}
+
+body.hcm {
+  --current-voice: inherit;
+  --narrate-word-highlight-color: SelectedItem;
+  --narrating-paragraph-background-color: Canvas;
+}
+
+.narrating {
+  position: relative;
+  z-index: 1;
+  background-color: var(--narrating-paragraph-background-color);
+}
+
+.narrate-word-highlight {
+  position: absolute;
+  display: none;
+  transform: translate(-50%, calc(-50% - 2px));
+  z-index: -1;
+  border-bottom: 7px solid var(--narrate-word-highlight-color);
+  transition: left 0.1s ease, width 0.1s ease;
+}
+
+body.hcm .narrate-word-highlight {
+  /* Shift the word highlight a bit downwards to not cover the bottom part of characters.
+   * The z-index above is meant to have the highlight appear below the text,
+   * but that's not best practice in HCM so we do this instead. */
+  transform: translate(-50%, calc(-50% + 2px));
+  border-bottom-width: 3px;
+}
+
+.narrating > .narrate-word-highlight {
+  display: inline-block;
+}
+
+.narrate-word-highlight.newline {
+  transition: none;
+}
+
+.narrate-toggle {
+  background-image: url("chrome://global/skin/narrate/headphone.svg");
+}
+
+.speaking .narrate-toggle {
+  /* This shows with an animation. */
+  background-image: url("chrome://global/skin/narrate/headphone-active.svg");
+  fill: var(--toolbar-button-foreground-active);
+}
+
+body.hcm .speaking .narrate-toggle {
+  background-color: var(--toolbar-button-background-active);
+  border-color: var(--toolbar-button-border-active);
+}
+
+body.hcm .speaking:not(.open) .narrate-toggle:hover {
+  background-color: var(--toolbar-button-background-hover);
+  border-color: var(--toolbar-button-border-hover);
+  fill: var(--toolbar-button-foreground-hover);
+}
+
+.narrate-dropdown > .dropdown-popup button {
+  background-color: transparent;
+  fill: var(--popup-button-foreground);
+}
+
+.narrate-dropdown > .dropdown-popup button:enabled:hover {
+  background-color: var(--popup-button-background-hover);
+  color: var(--popup-button-foreground-hover);
+  fill: var(--popup-button-foreground-hover);
+}
+
+.narrate-dropdown > .dropdown-popup button:enabled:hover:active {
+  background-color: var(--popup-button-background-active);
+}
+
+.narrate-dropdown > .dropdown-popup button:enabled:focus-visible {
+  outline: 2px solid var(--outline-focus-color);
+  outline-offset: -2px;
+}
+
+.narrate-dropdown > .dropdown-popup {
+  top: -34px;
+}
+
+.narrate-dropdown .dropdown-arrow {
+  top: 40px;
+}
+
+.narrate-row {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  box-sizing: border-box;
+}
+
+.narrate-row:not(.narrate-voices) {
+  direction: ltr;
+}
+
+.narrate-row:not(:first-child) {
+  border-top: 1px solid var(--popup-line);
+}
+
+/* Control buttons */
+
+.narrate-control > button {
+  background-size: 24px 24px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  height: 64px;
+  width: 82px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.narrate-control > button:not(:first-child) {
+  border-inline-start: 1px solid var(--popup-line);
+}
+
+.narrate-skip-previous {
+  border-top-left-radius: 3px;
+  background-image: url("chrome://global/skin/narrate/back.svg");
+}
+
+.narrate-skip-next {
+  border-top-right-radius: 3px;
+  background-image: url("chrome://global/skin/narrate/forward.svg");
+}
+
+.narrate-start-stop {
+  background-image: url("chrome://global/skin/narrate/start.svg");
+}
+
+.narrate-dropdown.speaking .narrate-start-stop {
+  background-image: url("chrome://global/skin/narrate/stop.svg");
+}
+
+/* Rate control */
+
+.narrate-rate::before,
+.narrate-rate::after {
+  content: '';
+  width: 48px;
+  height: 40px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 24px auto;
+  -moz-context-properties: fill;
+  fill: var(--icon-fill);
+}
+
+.narrate-rate::before {
+  background-image: url("chrome://global/skin/narrate/slow.svg");
+}
+
+.narrate-rate::after {
+  background-image: url("chrome://global/skin/narrate/fast.svg");
+}
+
+.narrate-rate-input {
+  margin: 0 1px;
+  flex-grow: 1;
+  background-color: var(--popup-background);
+  border-radius: 2px;
+  width: 148px;
+}
+
+.narrate-rate-input:focus-visible {
+  outline: 2px solid var(--outline-focus-color);
+  outline-offset: 2px;
+}
+
+.narrate-rate-input::-moz-range-track {
+  background-color: var(--icon-fill);
+  height: 2px;
+}
+
+.narrate-rate-input::-moz-range-progress {
+  background-color: var(--primary-color);
+  height: 2px;
+}
+
+.narrate-rate-input::-moz-range-thumb {
+  background-color: var(--icon-fill);
+  height: 16px;
+  width: 16px;
+  border-radius: 8px;
+  border-width: 0;
+}
+
+.narrate-rate-input:active::-moz-range-thumb {
+  background-color: var(--primary-color);
+}
+
+/* Voice selection */
+
+.voiceselect {
+  width: 246px;
+}
+
+.voiceselect > button.select-toggle,
+.voiceselect > .options > button.option {
+  appearance: none;
+  border: none;
+  width: 100%;
+  min-height: 40px;
+}
+
+.voiceselect > button.select-toggle::after {
+  content: '';
+  background-image: url("chrome://global/skin/narrate/arrow.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  display: inline-block;
+  width: 1.5em;
+  height: 1em;
+  vertical-align: middle;
+}
+
+.current-voice {
+  color: var(--current-voice);
+}
+
+.voiceselect > .options {
+  display: none;
+  overflow-y: auto;
+}
+
+.voiceselect.open > .options {
+  display: block;
+  border-top: 1px solid var(--popup-line);
+}
+
+.voiceselect > .options > button.option {
+  box-sizing: border-box;
+}
+
+.voiceselect > .options > button.option:not(:first-child) {
+  border-top: 1px solid var(--popup-line);
+}
+
+.voiceselect > .options > button.option::-moz-focus-inner {
+  outline: none;
+  border: 0;
+}
+
+.voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) {
+  background-color: transparent;
+}
+
+.voiceselect:not(.open) > button,
+.voiceselect .option:last-child {
+  border-radius: 0 0 3px 3px;
+}
diff --git a/toolkit/themes/shared/narrate/arrow.svg b/toolkit/themes/shared/narrate/arrow.svg
new file mode 100644
index 0000000000..5ccf8c6e9d
--- /dev/null
+++ b/toolkit/themes/shared/narrate/arrow.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">
+  <path fill="context-fill" d="M6 9L1 4l1-1 4 4 4-4 1 1z"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/back.svg b/toolkit/themes/shared/narrate/back.svg
new file mode 100644
index 0000000000..7b5b1ebea9
--- /dev/null
+++ b/toolkit/themes/shared/narrate/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 24 24">
+  <path fill="context-fill" d="M 5 0 C 4.446 0 4 0.446 4 1 L 4 23 C 4 23.554 4.446 24 5 24 L 7 24 C 7.554 24 8 23.554 8 23 L 8 12.404297 C 8.04108 12.509297 8.109944 12.610125 8.203125 12.703125 L 19.296875 23.775391 C 19.495259 23.972391 19.661613 24.039562 19.796875 23.976562 C 19.932137 23.915564 20 23.748516 20 23.478516 L 20 0.52148438 C 20 0.25248437 19.93214 0.084484365 19.796875 0.021484375 C 19.661613 -0.040515625 19.495259 0.02856248 19.296875 0.2265625 L 8.203125 11.298828 C 8.1099445 11.381828 8.04108 11.481703 8 11.595703 L 8 1 C 8 0.446 7.554 0 7 0 L 5 0 z"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/fast.svg b/toolkit/themes/shared/narrate/fast.svg
new file mode 100644
index 0000000000..61a45a7c9b
--- /dev/null
+++ b/toolkit/themes/shared/narrate/fast.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 id="Icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20.4">
+    <path fill="context-fill" d="M14.42 16.68a.77.77 0 0 0 .54.7l2.51.68a1.58 1.58 0 0 1 1.06 1.22l.05.39-3.89-.53a4.34 4.34 0 0 1-1.74-.72L7.2 14.03a5.79 5.79 0 0 1-5.34-4.88h-.82a1 1 0 0 1-1-1l2.9-3.24a6.16 6.16 0 0 1 4.7-2.39 5.88 5.88 0 0 1 .77.05 5 5 0 0 1 .87.15c3.75 1 6.5 5.84 6.5 5.84a2.27 2.27 0 0 0 1.14.85h.17a1.27 1.27 0 0 0 1.22-.4l.78-1-2.47-1.2c-3.38-1.46-2.46-5.71-2.46-5.71 0-.26.23-.32.42-.14l5.32 5-4.31-4.81a1.39 1.39 0 0 1 .81-1.22l4.17 6.65.33.31 2.19 1.54a2.44 2.44 0 0 1 .92 1.75v2.77l-.16.13a1.66 1.66 0 0 1-1.63.19l-.75-.36a2.57 2.57 0 0 0-2.55.32l-2.18 1.82a4.28 4.28 0 0 1-.89.55 10.18 10.18 0 0 0-4.62-8.46c-.27-.16-.66.31-.47.48a10.52 10.52 0 0 1 3.68 8.5v.48zm8.38-5.42a.49.49 0 1 0-.49-.49.49.49 0 0 0 .49.49zm-18 9.14v-.52a1.39 1.39 0 0 1 .93-1.25s2.7-.66 3.43-1.84l2.06 1.63a25.62 25.62 0 0 1-6.43 2z"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/forward.svg b/toolkit/themes/shared/narrate/forward.svg
new file mode 100644
index 0000000000..2a90ddd9c6
--- /dev/null
+++ b/toolkit/themes/shared/narrate/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 24 24">
+  <path fill="context-fill" d="m 19,0 c 0.554,0 1,0.446 1,1 l 0,22 c 0,0.554 -0.446,1 -1,1 l -2,0 c -0.554,0 -1,-0.446 -1,-1 l 0,-10.595703 c -0.04108,0.105 -0.109944,0.205828 -0.203125,0.298828 L 4.703125,23.775391 c -0.198384,0.197 -0.364738,0.264171 -0.5,0.201171 C 4.067863,23.915564 4,23.748516 4,23.478516 L 4,0.52148438 c 0,-0.26900001 0.06786,-0.43700001 0.203125,-0.5 0.135262,-0.062 0.301616,0.0070781 0.5,0.20507812 l 11.09375,11.0722655 c 0.09318,0.083 0.162045,0.182875 0.203125,0.296875 L 16,1 c 0,-0.554 0.446,-1 1,-1 l 2,0 z"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/headphone-active.svg b/toolkit/themes/shared/narrate/headphone-active.svg
new file mode 100644
index 0000000000..ecfcc4f133
--- /dev/null
+++ b/toolkit/themes/shared/narrate/headphone-active.svg
@@ -0,0 +1,22 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. 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" height="16" width="16" fill="context-fill">
+  <style>
+    @keyframes wavy {
+      from {
+        translate: 0;
+      }
+      to {
+        translate: -17.415px;
+      }
+    }
+  </style>
+  <clipPath id="clip">
+    <rect width="10" height="16" x="3" y="0"/>
+  </clipPath>
+  <path d="M14.486 8.65V7.56a6.487 6.487 0 00-12.972 0v1.093A2.076 2.076 0 000 10.643v2.206c0 1.147.93 2.077 2.076 2.077h1.41a.567.567 0 00.566-.567V9.133a.566.566 0 00-.566-.566h-.84V7.56a5.354 5.354 0 1110.708 0v1.007h-.84a.567.567 0 00-.568.566v5.226c0 .313.254.567.568.567h1.408c1.148 0 2.078-.93 2.078-2.077v-2.207a2.078 2.078 0 00-1.514-1.991z"/>
+  <g clip-path="url(#clip)">
+    <path style="animation: wavy 2s infinite linear" d="M13.193 8.818a1.35 1.35 0 00-.838.293 1.747 1.747 0 00-.47.641c-.216.464-.314.979-.426 1.46-.113.485-.24.931-.4 1.194-.161.263-.257.352-.582.352-.252 0-.315-.05-.434-.194-.12-.142-.244-.41-.38-.726-.139-.317-.29-.687-.59-1.014a1.83 1.83 0 00-1.346-.57c-.576 0-1.036.377-1.282.775-.246.4-.378.84-.517 1.246-.14.406-.285.774-.442.989-.157.215-.25.289-.523.289-.111 0-.138-.017-.192-.065a.885.885 0 01-.197-.324c-.136-.34-.226-.906-.32-1.5A9.493 9.493 0 004 10.447v3.815c.016.016.026.035.043.05.238.21.574.34.92.34.614 0 1.119-.338 1.414-.742.293-.403.449-.86.592-1.28.144-.417.276-.802.412-1.023.136-.22.174-.253.346-.253.304 0 .404.07.535.212.13.143.26.4.392.707.134.31.272.67.545.997.273.327.737.587 1.278.587.683 0 1.23-.403 1.52-.878.29-.476.417-1.014.534-1.516.116-.502.222-.973.35-1.248a.737.737 0 01.172-.252c.043-.035.054-.045.138-.045.307 0 .412.103.596.457.183.354.326.927.467 1.531.142.605.281 1.241.576 1.793.294.552.86 1.045 1.602 1.045.842 0 1.46-.54 1.74-1.13.268-.565.325-1.168.33-1.663a.55.55 0 000-.002.55.55 0 00.006-.076c0-.403.073-.96.258-1.342.185-.38.374-.582.873-.582.333 0 .416.093.576.424.16.331.27.88.361 1.463.092.582.171 1.194.385 1.734.108.27.251.533.488.742.238.21.574.34.92.34.614 0 1.121-.338 1.416-.742.294-.403.448-.86.592-1.28.143-.417.276-.802.412-1.023.136-.22.174-.254.346-.254.304 0 .404.071.535.213.132.143.26.4.393.707.134.31.271.67.544.996.273.327.737.588 1.278.588.666 0 1.2-.385 1.496-.845V9.596c-.03.052-.063.103-.088.156-.216.464-.312.979-.424 1.46-.113.485-.241.931-.402 1.194-.16.263-.257.352-.582.352-.252 0-.315-.05-.434-.194-.12-.142-.243-.41-.38-.726-.138-.317-.291-.687-.59-1.014a1.83 1.83 0 00-1.346-.57c-.576 0-1.036.377-1.281.775-.247.4-.38.84-.518 1.246-.14.406-.282.774-.44.989-.156.215-.253.289-.525.289-.112 0-.137-.017-.191-.065a.885.885 0 01-.198-.324c-.136-.34-.226-.906-.32-1.5-.095-.594-.19-1.218-.457-1.77-.267-.55-.83-1.044-1.566-1.044-.905 0-1.558.576-1.862 1.203-.29.597-.357 1.235-.363 1.738a.55.55 0 000 .004.55.55 0 00-.006.078c0 .41-.066.926-.228 1.268-.162.34-.307.504-.748.504-.327 0-.443-.11-.631-.463-.19-.353-.336-.924-.477-1.526-.14-.602-.276-1.237-.56-1.787-.285-.55-.839-1.05-1.57-1.05z"/>
+  </g>
+</svg>
diff --git a/toolkit/themes/shared/narrate/headphone.svg b/toolkit/themes/shared/narrate/headphone.svg
new file mode 100644
index 0000000000..d065061ab3
--- /dev/null
+++ b/toolkit/themes/shared/narrate/headphone.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" height="16" width="16" fill="context-fill">
+  <path d="M14.486 8.65V7.56a6.487 6.487 0 00-12.972 0v1.093A2.076 2.076 0 000 10.643v2.206c0 1.147.93 2.077 2.076 2.077h1.41a.567.567 0 00.566-.567V9.133a.566.566 0 00-.566-.566h-.84V7.56a5.354 5.354 0 1110.708 0v1.007h-.84a.567.567 0 00-.568.566v5.226c0 .313.254.567.568.567h1.408c1.148 0 2.078-.93 2.078-2.077v-2.207a2.078 2.078 0 00-1.514-1.991z"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/slow.svg b/toolkit/themes/shared/narrate/slow.svg
new file mode 100644
index 0000000000..1ef3c7b6b1
--- /dev/null
+++ b/toolkit/themes/shared/narrate/slow.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 24 24">
+    <g fill="context-fill">
+        <path d="M1.684,13.486c-0.209,0-0.404-0.132-0.474-0.341c-0.528-1.58-0.23-5.767,4.097-7.921 c1.315-0.656,2.589-0.988,3.787-0.988c3.237,0,5.096,2.341,5.99,3.465c0.158,0.199,0.181,0.533,0,0.713 c-0.793,0.794-1.852,1.542-3.231,2.286c-2.46,1.327-5.045,1.775-7.121,2.134c-1.123,0.194-2.093,0.361-2.89,0.627 C1.789,13.479,1.735,13.486,1.684,13.486L1.684,13.486z"/>
+        <path d="M23.185,5.465c-0.86-1.121-2.074-1.819-3.168-1.819c-0.641,0-1.556,0.23-2.273,1.328 c-0.374,0.571-0.577,1.161-0.773,1.73c-0.512,1.482-1.041,3.016-4.662,4.969c-2.316,1.249-4.707,1.664-6.815,2.03 c-2.524,0.438-4.704,0.814-5.455,2.622c-0.069,0.165-0.045,0.354,0.062,0.495c0.107,0.143,0.281,0.217,0.46,0.193 c0.667-0.081,1.533,0.041,2.434,0.217c-0.122,0.146-0.261,0.286-0.391,0.418c-0.38,0.385-0.774,0.783-0.657,1.292 c0.108,0.474,0.604,0.699,0.966,0.828c0.399,0.142,0.843,0.217,1.283,0.217c1.241,0,2.216-0.579,2.649-1.539 c1.704,0.287,3.487,0.313,5.043,0.313l1.639-0.006c0.066,0.056,0.178,0.166,0.264,0.25c0.504,0.506,1.348,1.351,2.721,1.351 c0.129,0,0.264-0.008,0.416-0.026c0.687-0.102,1.351-0.267,1.574-0.787c0.227-0.528-0.123-1.023-0.526-1.597 c-0.481-0.685-1.08-1.532-0.998-2.652c0.196-0.397,0.368-0.824,0.546-1.267c0.479-1.19,0.975-2.421,2.12-3.513 c0.431,0.343,1.022,0.549,1.63,0.549l0,0c0.439,0,0.876-0.102,1.295-0.3c0.624-0.293,1.104-0.967,1.316-1.847 C24.175,7.707,23.914,6.418,23.185,5.465L23.185,5.465z M20.397,7.757c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5 c0.275,0,0.5,0.224,0.5,0.5S20.674,7.757,20.397,7.757z"/>
+    </g>
+</svg>
diff --git a/toolkit/themes/shared/narrate/start.svg b/toolkit/themes/shared/narrate/start.svg
new file mode 100644
index 0000000000..0f6680e639
--- /dev/null
+++ b/toolkit/themes/shared/narrate/start.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 d="M21.64 12.44L2.827 22.895c-.217.123-.403.137-.56.042-.155-.094-.233-.264-.233-.51V1.572c0-.244.08-.414.233-.51.157-.093.343-.08.56.044L21.642 11.56c.217.124.326.27.326.44 0 .17-.11.316-.327.44z" fill="context-fill"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/stop.svg b/toolkit/themes/shared/narrate/stop.svg
new file mode 100644
index 0000000000..9a57603e84
--- /dev/null
+++ b/toolkit/themes/shared/narrate/stop.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">
+    <rect ry="1" rx="1" y="2" x="2" height="20" width="20" fill="context-fill"/>
+</svg>
diff --git a/toolkit/themes/shared/notification.css b/toolkit/themes/shared/notification.css
new file mode 100644
index 0000000000..b94918cce8
--- /dev/null
+++ b/toolkit/themes/shared/notification.css
@@ -0,0 +1,188 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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 "http://www.w3.org/1999/xhtml";
+
+.notificationbox-stack {
+  /* Prevent the animation from overlapping the navigation toolbar */
+  overflow: clip;
+}
+
+.notificationbox-stack[notificationside="top"] {
+  /* Create a stacking context for the box-shadow */
+  position: relative;
+  z-index: 1;
+}
+
+notification {
+  min-height: 40px;
+  padding-inline-start: 16px;
+  background: var(--notification-background);
+  color: var(--notification-text);
+  border-color: var(--notification-border);
+  border-style: solid;
+  border-width: 1px 0;
+  text-shadow: none;
+  font-size: 1.15em;
+
+  --notification-background: Window;
+  --notification-text: WindowText;
+  --notification-border: rgba(12, 12, 13, 0.2);
+  --notification-button-background: rgba(12,12,13,.1);
+  --notification-button-background-hover: rgba(12,12,13,0.2);
+  --notification-button-background-active: rgba(12,12,13,0.3);
+  --notification-button-text: inherit;
+  --notification-primary-button-background: #0060df;
+  --notification-primary-button-background-hover: #003eaa;
+  --notification-primary-button-background-active: #002275;
+  --notification-primary-button-text: rgb(249, 249, 250);
+}
+
+@media (prefers-color-scheme: dark) {
+  notification[type="info"]:-moz-lwtheme {
+    --notification-background: #38383d;
+    --notification-text: rgb(249, 249, 250);
+  }
+
+  notification[type="info"] {
+    --notification-button-background: rgba(249,249,250,.1);
+    --notification-button-background-hover: rgba(249,249,250,.2);
+    --notification-button-background-active: rgba(249,249,250,.3);
+  }
+}
+
+html|notification-message.animated,
+notification.animated {
+  transition: margin-top 300ms var(--animation-easing-function), opacity 300ms var(--animation-easing-function);
+}
+
+.notificationbox-stack[notificationside="top"] > notification {
+  border-top-style: none;
+}
+
+.notificationbox-stack[notificationside="bottom"] > notification {
+  border-bottom-style: none;
+}
+
+notification[type="warning"] {
+  --notification-background: #ffe900;
+  --notification-text: #0c0c0d;
+}
+
+notification[type="critical"] {
+  --notification-background: #d70022;
+  --notification-text: #fff;
+}
+
+notification[type="critical"] > .close-icon:hover {
+  background-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+
+notification[type="critical"] > .close-icon:hover:active {
+  background-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+.messageText {
+  margin-inline-start: 12px !important;
+  margin-block: 0;
+}
+
+.messageText > .text-link {
+  text-decoration: underline;
+  margin-block: 0;
+}
+
+.messageText > .text-link:not(.notification-link) {
+  color: inherit !important;
+  margin-inline: 0;
+}
+
+.messageImage {
+  width: 24px;
+  margin: 4px 0;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+notification[type="info"] > hbox > .messageImage {
+  list-style-image: url("chrome://global/skin/icons/help.svg");
+}
+
+notification[type="warning"] > hbox > .messageImage {
+  list-style-image: url("chrome://global/skin/icons/warning.svg");
+}
+
+notification[type="critical"] > hbox > .messageImage {
+  list-style-image: url("chrome://global/skin/icons/error.svg");
+}
+
+.messageCloseButton {
+  margin: 0;
+  padding: 0;
+}
+
+.messageCloseButton > .toolbarbutton-icon {
+  padding: 6px;
+  width: 32px;
+  /* Close button needs to be clickable from the edge of the window */
+  margin-inline-end: 8px;
+}
+
+.messageCloseButton:focus-visible {
+  /* Override the dotted outline from button.css */
+  outline: none;
+}
+
+.messageCloseButton:focus-visible > .toolbarbutton-icon {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-inset);
+  border-radius: var(--toolbarbutton-border-radius, 4px);
+}
+
+.notification-button {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background-color: var(--notification-button-background);
+  color: var(--notification-button-text);
+  padding: 0 6px;
+  margin: 4px 8px;
+  height: 24px;
+}
+
+.notification-button[disabled] {
+  opacity: 0.5;
+}
+
+.notification-button:not([disabled]):hover {
+  background-color: var(--notification-button-background-hover);
+}
+
+.notification-button:not([disabled]):hover:active {
+  background-color: var(--notification-button-background-active);
+}
+
+.notification-button:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.notification-button.primary {
+  background-color: var(--notification-primary-button-background);
+  color: var(--notification-primary-button-text);
+}
+
+.notification-button.primary:not([disabled]):hover {
+  background-color: var(--notification-primary-button-background-hover);
+}
+
+.notification-button.primary:not([disabled]):hover:active {
+  background-color: var(--notification-primary-button-background-active);
+}
+
+.notificationbox-stack {
+  background-color: var(--toolbar-bgcolor);
+  width: 100%;
+}
diff --git a/toolkit/themes/shared/numberinput.css b/toolkit/themes/shared/numberinput.css
new file mode 100644
index 0000000000..f152d79c3b
--- /dev/null
+++ b/toolkit/themes/shared/numberinput.css
@@ -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/. */
+
+/* ===== numberinput.css ================================================
+  == Styles used by the input[type="number"] element.
+  ======================================================================= */
+
+@namespace url("http://www.w3.org/1999/xhtml");
+
+input[type="number"] {
+  text-align: right;
+}
+
+input[type="number"][hidespinbuttons="true"] {
+  appearance: textfield !important;
+}
diff --git a/toolkit/themes/shared/offlineSupportPages.css b/toolkit/themes/shared/offlineSupportPages.css
new file mode 100644
index 0000000000..4e2c653c28
--- /dev/null
+++ b/toolkit/themes/shared/offlineSupportPages.css
@@ -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/. */
+
+@import url("chrome://global/skin/in-content/info-pages.css");
+
+#offlineSupportContainer {
+  width: 100%;
+  max-width: 700px;
+  font-size: 1.14em;
+  line-height: 1.6;
+}
+
+#offlineSupportContainer h1 {
+  margin-top: 1.4em;
+}
+
+#toc .tocnumber {
+  display: none;
+}
diff --git a/toolkit/themes/shared/pictureinpicture/player.css b/toolkit/themes/shared/pictureinpicture/player.css
new file mode 100644
index 0000000000..a2687f3771
--- /dev/null
+++ b/toolkit/themes/shared/pictureinpicture/player.css
@@ -0,0 +1,648 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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 {
+  --player-bg-color: #000;
+  --player-control-icon-fill: #fff;
+  --player-control-item-half-width: clamp(calc(16px / 2), calc(10vmax / 2), calc(32px / 2));
+  --player-control-item-height: clamp(16px, 10vmax, 32px);
+  --close-btn-fill-color: #000;
+  --controls-bottom-distance: 15px;
+  --controls-bottom-upper-height: 30px;
+  --scrubber-vertical-margin: 7px;
+  --resize-margin: 5px;
+
+  background-color: var(--player-bg-color);
+  overflow: hidden;
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
+body {
+  margin: 0;
+}
+
+body:fullscreen {
+  -moz-window-dragging: no-drag;
+}
+
+.player-holder {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+browser {
+  flex: 1;
+}
+
+#controls {
+  height: calc(100% - 2 * var(--resize-margin));
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: calc(100% - 2 * var(--resize-margin));
+  margin: var(--resize-margin);
+  -moz-window-dragging: drag;
+}
+
+#controls button {
+  appearance: none;
+  border: 0;
+  z-index: 1;
+}
+
+#controls button:focus-visible,
+#controls input:focus-visible,
+.switch > input:focus-visible + .slider {
+  outline: 3px solid #0060DF;
+  box-shadow: 1px 2px 5px #000;
+}
+
+/* Styling for background gradient.
+ * Opacity changes are handled separately under .control-item.
+ */
+#controls-bottom-gradient {
+  background: linear-gradient(0deg, #000000 -13.24%, rgba(0, 0, 0, 0) 90.44%);
+  position: absolute;
+  height: calc(var(--controls-bottom-distance) + 2 * var(--resize-margin) + var(--player-control-item-height) + var(--controls-bottom-upper-height) + var(--scrubber-vertical-margin));
+  bottom: 0;
+  width: 100vw;
+  margin: 0 calc(-1 * var(--resize-margin)) calc(-1 * var(--resize-margin)) calc(-1 * var(--resize-margin));
+  pointer-events: none;
+  -moz-window-dragging: drag;
+}
+
+#controls-bottom {
+  position: absolute;
+  bottom: var(--controls-bottom-distance);
+  width: 100%;
+}
+
+.controls-bottom-lower {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  margin: 0 24px;
+}
+
+.start-controls {
+  display: grid;
+  justify-self: start;
+}
+
+.center-controls {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-areas: "seekbackward playpause seekforward";
+  justify-self: center;
+  gap: 8px;
+}
+
+.end-controls {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-areas: "audio closedcaption fullscreen";
+  justify-self: end;
+  gap: 8px;
+}
+
+.control-item {
+  -moz-window-dragging: no-drag;
+  transition: opacity 160ms linear, fill-opacity 160ms linear;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.control-button {
+  background-color: transparent;
+  border-radius: 4px;
+  /**
+   * Make the button dimensions a square proportional to one
+   * dimension of the window - in this case, the width dimension,
+   * since we suspect most videos are wider than they are tall.
+   */
+  height: var(--player-control-item-height);
+  width: 10vmax;
+  max-width: 32px;
+  min-width: 16px;
+  -moz-context-properties: fill, fill-opacity;
+  fill: var(--player-control-icon-fill);
+  background-position: center;
+  background-size: 60%;
+  background-repeat: no-repeat;
+}
+
+.control-button:hover:enabled {
+  background-color: rgba(255, 255, 255, .25);
+}
+
+#controls:is([keying], [showing]) .control-button:disabled,
+/* Only change opacity on hover events for non-fullscreen mode.
+ * Fullscreen mode uses the `showing` attribute instead. */
+body:not(:fullscreen) #controls:hover .control-button:disabled {
+  /* Set `fill-opacity` to the desired opacity in addition to full `opacity`
+   * to allow having the button's tooltip in full opacity even if the button is disabled. */
+  fill-opacity: 0.4;
+  opacity: 1 !important;
+}
+
+.control-item:focus-visible::after,
+.control-item:hover::after {
+  content: attr(tooltip);
+  display: inline-block;
+  width: max-content;
+  position: relative;
+  padding: .4em .5em;
+  background: #000000;
+  color: #ffffff;
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+/* Since #controls is set to LTR, button tooltips would normally appear
+ * as LTR also for RTL locales. To fix this, set the .control-item's ::after
+ * to RTL based on the root directionality.
+ * Because of that, don't set logical properties for the next set of rules. */
+:root:dir(rtl) .control-item::after {
+  direction: rtl;
+}
+
+/* Set the tooltip position for different playback controls */
+
+.tooltip-under-controls:focus-visible::after,
+.tooltip-under-controls:hover::after {
+  bottom: -3em;
+}
+
+#close:focus-visible::after,
+#close:hover::after,
+#unpip[mac="true"]:focus-visible::after,
+#unpip[mac="true"]:hover::after {
+  float: right;
+  transform: translateX(1em);
+}
+
+#unpip:focus-visible::after,
+#unpip:hover::after,
+#close[mac="true"]:focus-visible::after,
+#close[mac="true"]:hover::after {
+  float: left;
+  transform: translateX(-1em);
+}
+
+.tooltip-over-controls:focus-visible::after,
+.tooltip-over-controls:hover::after {
+  bottom: 3em;
+}
+
+.inline-end-tooltip:focus-visible::after,
+.inline-end-tooltip:hover::after {
+  float: right;
+  right: -1em;
+}
+
+.inline-start-tooltip:focus-visible::after,
+.inline-start-tooltip:hover::after {
+  float: left;
+  left: -1em;
+}
+
+.center-tooltip:focus-visible::after,
+.center-tooltip:hover::after {
+  right: 0.8em;
+  translate: calc(-50% + var(--player-control-item-half-width));
+}
+
+/* Since the unpip button icon is reversed for RTL locales,
+ * re-position the tooltip so that the tooltip remains in the original placement */
+:root:dir(rtl) #unpip:focus-visible::after,
+:root:dir(rtl) #unpip:hover::after {
+  float: right;
+}
+
+:root:dir(rtl) #unpip[mac="true"]:focus-visible::after,
+:root:dir(rtl) #unpip[mac="true"]:hover::after {
+  float: left;
+}
+
+/* Since the unpip icon is reversed for RTL locales,
+ * flip its tooltip back */
+:root:dir(rtl) #unpip:focus-visible::after,
+:root:dir(rtl) #unpip:hover::after {
+  scale: -1 1;
+}
+
+/* Set opacity for buttons and scrubber when controls are visible on the pip window and are not hovered over.
+ * For fullscreen mode, only apply opacity if there is a showing attribute. */
+body:not(:fullscreen) #controls:hover .control-item:not(:hover),
+body:fullscreen #controls[showing]:hover .control-item:not(:hover),
+#controls[donthide] .control-item {
+  opacity: 0.8;
+}
+
+#controls[keying] .control-item,
+#controls[showing] .control-item,
+#controls:hover .control-item:hover {
+  opacity: 1;
+}
+
+/* Background gradient is the only control item with a fixed opacity value. */
+#controls[keying] .control-item#controls-bottom-gradient,
+#controls[showing] .control-item#controls-bottom-gradient,
+#controls:hover .control-item#controls-bottom-gradient:hover
+#controls[donthide] .control-item#controls-bottom-gradient {
+  opacity: 0.8;
+}
+
+/* For readability, timestamp should maintain full opacity when visible */
+body:not(:fullscreen) #controls:hover #timestamp,
+body:fullscreen #controls[showing]:hover {
+  opacity: 1;
+}
+
+#close,
+#unpip {
+  background-color: rgba(255, 255, 255, .8);
+  position: absolute;
+  fill: var(--close-btn-fill-color);
+}
+
+#close:is(:hover, :focus-visible),
+#unpip:is(:hover, :focus-visible) {
+  background-color: rgba(255, 255, 255, .9);
+}
+
+#close {
+  background-image: url("chrome://global/skin/icons/close.svg");
+  right: 10px;
+  top: 10px;
+}
+
+#close[mac="true"] {
+  right: auto;
+  left: 10px;
+}
+
+#unpip {
+  background-image: url("chrome://global/skin/media/picture-in-picture-closed.svg");
+  left: 10px;
+  top: 10px;
+}
+
+#unpip[mac="true"] {
+  right: 10px;
+  left: auto;
+}
+
+#playpause {
+  grid-area: playpause;
+}
+
+#audio {
+  grid-area: audio;
+}
+
+#fullscreen {
+  grid-area: fullscreen;
+}
+
+#controls.playing #playpause {
+  background-image: url("chrome://global/skin/media/pause-fill.svg");
+}
+
+#controls:not(.playing) #playpause {
+  background-image: url("chrome://global/skin/media/play-fill.svg");
+}
+
+#controls.muted #audio {
+  background-image: url("chrome://global/skin/media/audio-muted.svg");
+}
+
+#controls:not(.muted) #audio {
+  background-image: url("chrome://global/skin/media/audio.svg");
+}
+
+body:fullscreen #fullscreen {
+  background-image: url("chrome://global/skin/media/picture-in-picture-exit-fullscreen-button.svg");
+  background-size: auto;
+}
+
+body:not(:fullscreen) #fullscreen {
+  background-image: url("chrome://global/skin/media/picture-in-picture-enter-fullscreen-button.svg");
+  background-size: auto;
+}
+
+#seekBackward {
+  background-image: url("chrome://global/skin/media/picture-in-picture-seekBackward-button.svg");
+  background-size: auto;
+  grid-area: seekbackward;
+}
+
+#seekForward {
+  background-image: url("chrome://global/skin/media/picture-in-picture-seekForward-button.svg");
+  background-size: auto;
+  grid-area: seekforward;
+}
+
+:root:dir(rtl) #unpip {
+  transform: scaleX(-1);
+}
+
+#closed-caption {
+  background-image: url("chrome://global/skin/media/closed-caption-settings-button.svg");
+  color: white;
+  grid-area: closedcaption;
+}
+
+.box {
+  -moz-window-dragging: no-drag;
+  background-color: #2B2A33;
+  text-align: start;
+  font-size: 1em;
+  width: 186px;
+  padding: 0 8px;
+  margin: 0;
+  border-radius: 8px;
+}
+
+:root:dir(rtl) .box {
+  direction: rtl;
+}
+
+.a11y-only {
+  visibility: hidden;
+  position: absolute;
+}
+
+.hide {
+  display: none;
+}
+
+.bold {
+  font-weight: 590;
+}
+
+.box > input[type="radio"]{
+  background-color: red;
+  fill: currentColor;
+}
+
+.box label:not(.switch) {
+  color: white;
+  font-family: sans-serif;
+}
+
+#subtitles-toggle-label {
+  width: fit-content;
+  padding: 8px;
+}
+
+.panel {
+  position: absolute;
+  bottom: 40px;
+  user-select: none;
+  right: 24px;
+}
+
+.panel-fieldset {
+  border: none;
+  margin-top: 8px;
+  padding-inline-start: 0;
+}
+
+.panel-legend {
+  font-family: sans-serif;
+  color: white;
+  margin-top: 8px;
+  padding-inline-start: 0;
+}
+
+.arrow {
+  border: 10px solid transparent;
+  border-top-color: #2B2A33;
+  width: 0;
+  height: 0;
+  inset-inline-start: 136px;
+  position: relative;
+}
+
+.grey-line {
+  width: 100%;
+  height: 1px;
+  background: #8F8F9D;
+}
+
+.font-size-selection {
+  margin-inline-start: 8px;
+  padding-inline-start: 8px;
+}
+
+.font-size-selection-radio {
+  display: flex;
+  width: fit-content;
+  cursor: pointer;
+  padding-block: 8px;
+}
+
+.font-size-selection-radio label {
+  cursor: pointer;
+}
+
+.font-size-selection-radio > input[type="radio"] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #8f8f9d;
+  border-radius: 50%;
+  margin: 0;
+  margin-inline-end: 6px;
+}
+
+.font-size-selection-radio > input[type="radio"]:checked {
+  border: 4px solid #00ddff;
+}
+
+.subtitle-grid {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: auto 46px;
+  padding: 8px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 32px;
+  height: 16px;
+  grid-column: 2;
+  margin: 8px;
+  cursor: pointer;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  inset: 0;
+  transition: transform 250ms;
+  border-radius: 13px;
+  background-color: #55545f;
+}
+
+.slider::before {
+  position: absolute;
+  content: '';
+  height: 12px;
+  width: 12px;
+  inset-inline-start: 2px;
+  bottom: 2px;
+  background-color: #2B2A33;
+  transition: transform 250ms;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #00ddff;
+}
+
+input:checked + .slider::before {
+  transform: translateX(16px);
+}
+
+:root:dir(rtl) input:checked + .slider::before {
+  transform: translateX(-16px);
+}
+
+.font-size-overlay {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.controls-bottom-upper {
+  width: calc(100% - 38px);
+  height: var(--controls-bottom-upper-height);
+  margin: 0 19px;
+  display: grid;
+}
+
+.scrubber-no-drag {
+  -moz-window-dragging: no-drag;
+  height: 16px;
+  margin: var(--scrubber-vertical-margin) 0;
+  display: grid;
+  justify-items: center;
+  align-items: center;
+  width: 100%;
+}
+
+#scrubber {
+  width: 100%;
+  background-color: transparent;
+  padding: 6px;
+}
+
+#scrubber::-moz-range-thumb {
+  border-radius: 14px;
+  background-color: #BFBFC9;
+  position: relative;
+  width: 8px;
+  height: 8px;
+  border: 3px solid #FFFFFF;
+  bottom: 24px;
+  padding: 0;
+}
+
+#scrubber::-moz-range-track {
+  background-color: #969696;
+}
+
+#scrubber::-moz-range-progress {
+  background-color: #FFFFFF;
+}
+
+#scrubber,
+#scrubber::-moz-range-track,
+#scrubber::-moz-range-progress {
+  height: 4px;
+  border-radius: 10px;
+}
+
+#timestamp {
+  align-self: center;
+  color: #FFFFFF;
+  cursor: default;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Helvetica Neue", sans-serif;
+  font-size: 0.9em;
+  user-select: none;
+  width: 16ch;
+  grid-area: timestamp;
+}
+
+#timestamp::after {
+  background: unset;
+  content: unset;
+}
+
+@media (height <= 325px), (width <= 475px) {
+  #closed-caption {
+    display: none;
+  }
+
+  .end-controls {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-areas: "audio fullscreen";
+  }
+}
+
+@media (width <= 440px) {
+  #timestamp {
+    display: none;
+  }
+}
+
+@media (width <= 350px) {
+  #fullscreen {
+    display: none;
+  }
+
+  .end-controls {
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-areas: "audio";
+  }
+}
+
+@media (height <= 200px) {
+  .scrubber-no-drag {
+    display: none;
+  }
+}
+
+@media (width <= 300px) {
+  .scrubber-no-drag,
+  #seekForward,
+  #seekBackward,
+  .start-controls {
+    display: none;
+  }
+
+  .controls-bottom-lower {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .center-controls {
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-areas: "playpause";
+  }
+
+  .end-controls {
+    justify-self: center;
+  }
+}
diff --git a/toolkit/themes/shared/pictureinpicture/texttracks.css b/toolkit/themes/shared/pictureinpicture/texttracks.css
new file mode 100644
index 0000000000..ec7af4a7b4
--- /dev/null
+++ b/toolkit/themes/shared/pictureinpicture/texttracks.css
@@ -0,0 +1,74 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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 {
+    --min-font-size: 14px;
+    --max-font-size: 40px;
+    --font-scale: 0.06;
+    --texttracks-bottom: calc(var(--font-scale) * 100vh);
+
+    /*
+     * Move text tracks if they visually overlap with pip player controls
+     * New text tracks position is determined by adding together:
+     *  1) bottom distance of #controls
+     *  2) height of #controls-bottom,
+     *  3) border size of player controls buttons
+     *  4) hardcoded px value (to ensure consistent distance, regardless of pip window size)
+     * NOTE: if changing player.css values, change values here too.
+     */
+    --resize-margin: 5px;
+    --player-controls-height: calc(100vh - 2 * var(--resize-margin));
+    --player-controls-bottom-distance: calc(100vh - var(--player-controls-height));
+    --player-controls-button-height: 10vmax;
+    --player-controls-button-max-height: 32px;
+    --player-controls-button-min-height: 16px;
+    --player-controls-button-outline-width: 2px;
+    --player-controls-scrubber-height: 0px;
+    --player-bottom-controls-height: calc(var(--player-controls-scrubber-height) + clamp(var(--player-controls-button-min-height), var(--player-controls-button-height), var(--player-controls-button-max-height)));
+    --distance-from-player-controls: 20px;
+    --texttracks-bottom-overlapped: calc(var(--player-controls-button-outline-width) + var(--player-controls-bottom-distance) + var(--player-bottom-controls-height) + var(--distance-from-player-controls));
+}
+
+#texttracks {
+    background-color: black;
+    opacity: 80%;
+    position: absolute;
+    text-align: center;
+    box-sizing: border-box;
+    color: white;
+    margin: 0;
+    display: block;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 8px;
+    max-width: calc(0.88 * 100vw);
+    bottom: var(--texttracks-bottom);
+    font-size: clamp(var(--min-font-size), calc(var(--font-scale) * 100vh), var(--max-font-size));
+    line-height: clamp(14.4px, calc(var(--font-scale) * 1.2 * 100vh), 48px);
+    white-space: pre-line;
+    width: max-content;
+    font-family: sans-serif;
+    transition: bottom 0.3s;
+    transition-delay: 0.1s;
+}
+
+#texttracks[overlap-video-controls] {
+    bottom: var(--texttracks-bottom-overlapped)
+}
+
+#texttracks:empty {
+    visibility: hidden;
+}
+
+@media (prefers-reduced-motion) {
+    #texttracks {
+        transition: none;
+    }
+}
+
+@media screen and (max-width: 319px) {
+    #texttracks {
+        display: none;
+    }
+}
diff --git a/toolkit/themes/shared/popupnotification.css b/toolkit/themes/shared/popupnotification.css
new file mode 100644
index 0000000000..8b90efeace
--- /dev/null
+++ b/toolkit/themes/shared/popupnotification.css
@@ -0,0 +1,158 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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");
+
+.popup-notification-panel::part(content) {
+  /* To keep the rounded borders of the panel, we use overflow: hidden; from the
+   * panel-no-padding class to ensure the contents are clipped to the border box.
+   * That causes us to override the "display" property so that the height of the
+   * contents is computed correctly. */
+  display: flex;
+  /* Make multiple popupnotifications stack vertically. */
+  flex-direction: column;
+}
+
+.popup-notification-panel > popupnotification:not([hidden]) {
+  /* Since the anonymous parent (::part(content)) has display: flex, sizing
+   * computations work better with display: block; than with the XUL default
+   * display: flex;
+   * TODO(emilio): we can probably remove this. */
+  display: block;
+}
+
+popupnotification {
+  font: caption;
+}
+
+popupnotificationcontent {
+  margin-top: .5em;
+}
+
+.popup-notification-header-container,
+.popup-notification-footer-container {
+  display: flex;
+  /** Padding + Icon width + border-radius + popup-notification-body-width **/
+  max-width: calc(2 * var(--arrowpanel-padding) + 32px + 4px + var(--popup-notification-body-width));
+}
+
+.popup-notification-body-container {
+  padding: var(--arrowpanel-padding);
+}
+
+.popup-notification-icon {
+  width: 32px;
+  height: 32px;
+  margin-inline-end: var(--arrowpanel-padding);
+}
+
+.popup-notification-body {
+  width: var(--popup-notification-body-width);
+  flex: 1 auto;
+}
+
+.popup-notification-closebutton {
+  margin-inline-end: -8px;
+  margin-top: -8px;
+}
+
+.popup-notification-origin:not([value]),
+.popup-notification-learnmore-link:not([href]) {
+  display: none;
+}
+
+.popup-notification-origin {
+  margin-bottom: .3em !important;
+}
+
+.popup-notification-hint-text {
+  margin-top: .5em !important;
+}
+
+.popup-notification-hint-text:empty {
+  display: none;
+}
+
+@media (-moz-platform: windows) {
+  /* Swap the primary and secondary action, because Windows
+   * platform conventions put the primary action on the left. */
+  .panel-footer > .popup-notification-primary-button:not([default]) {
+    order: -1;
+  }
+}
+
+.popup-notification-secondary-button:not([dropmarkerhidden="true"]) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+/**
+ * The focus ring is an outline thicker than 1px, meaning that for split buttons,
+ * if the main button part of the split button has :focus-visible, the ring will
+ * be partially hidden behind the dropmarker button. We work around this by
+ * temporarily boosting the z-index of the main button while showing its focus
+ * ring.
+ */
+.popup-notification-secondary-button:not([dropmarkerhidden="true"]):focus-visible {
+  z-index: 2;
+}
+
+.popup-notification-dropmarker {
+  border-start-start-radius: 0 !important;
+  border-end-start-radius: 0 !important;
+  margin-inline-start: 1px !important;
+  padding: 8px !important;
+  max-width: 32px;
+}
+
+.popup-notification-dropmarker > .button-box > hbox {
+  display: none;
+}
+
+.popup-notification-dropmarker > .button-box > .button-menu-dropmarker {
+  /* This is to override the linux !important */
+  appearance: none !important;
+  display: flex;
+  padding: 0;
+  margin: 0;
+}
+
+@media (-moz-platform: windows) {
+  /* Override default icon size which is too small for this dropdown */
+  .popup-notification-dropmarker > .button-box > .button-menu-dropmarker {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.popup-notification-dropmarker > .button-box > .button-menu-dropmarker::part(icon) {
+  width: 16px;
+  height: 16px;
+  list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.popup-notification-warning {
+  color: #d74345;
+}
+
+.popup-notification-icon:not([hasicon]) {
+  display: none;
+}
+
+.popup-notification-icon {
+  height: 16px;
+  width: 16px;
+  margin-inline-end: 6px;
+}
+
+.popup-notification-checkbox > .checkbox-label-box > .checkbox-label {
+  opacity: 0.7;
+}
+
+.popup-notification-learnmore-link {
+  text-decoration: underline;
+  margin-block: 4px 0;
+}
diff --git a/toolkit/themes/shared/profileDowngrade.css b/toolkit/themes/shared/profileDowngrade.css
new file mode 100644
index 0000000000..4cf641e417
--- /dev/null
+++ b/toolkit/themes/shared/profileDowngrade.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/. */
+
+dialog::part(button-spacer) {
+  display: none;
+}
+
+#info {
+  list-style-image: url("chrome://global/skin/icons/info.svg");
+  width: 32px;
+  height: 32px;
+}
diff --git a/toolkit/themes/shared/profileSelection.css b/toolkit/themes/shared/profileSelection.css
new file mode 100644
index 0000000000..375896afda
--- /dev/null
+++ b/toolkit/themes/shared/profileSelection.css
@@ -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/. */
+
+@import url("chrome://global/skin/global.css");
+
+#managebuttons {
+  padding-top: 1em;
+}
+
+#profilesContainer {
+  flex: 1;
+  min-width: 0;
+}
+
+#profiles {
+  height: 12em;
+}
diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg
new file mode 100644
index 0000000000..6bd81a95e4
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg
@@ -0,0 +1,16 @@
+<?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="42"
+     height="16"
+     viewBox="0 0 42 16"
+     fill="context-fill">
+
+  <path d="M14.5,7 L8.75,1.25 L10,-1.91791433e-15 L18,8 L17.375,8.625 L10,16 L8.75,14.75 L14.5,9 L1.13686838e-13,9 L1.13686838e-13,7 L14.5,7 Z"/>
+  <path d="M38.5,7 L32.75,1.25 L34,6.58831647e-15 L42,8 L41.375,8.625 L34,16 L32.75,14.75 L38.5,9 L24,9 L24,7 L38.5,7 Z" transform="translate(33.000000, 8.000000) scale(-1, 1) translate(-33.000000, -8.000000)"/>
+
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg
new file mode 100644
index 0000000000..eb82e386b7
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg
@@ -0,0 +1,16 @@
+<?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="44"
+     height="16"
+     viewBox="0 0 44 16"
+     fill="context-fill">
+
+  <path d="M14.5,7 L8.75,1.25 L10,-1.91791433e-15 L18,8 L17.375,8.625 L10,16 L8.75,14.75 L14.5,9 L1.13686838e-13,9 L1.13686838e-13,7 L14.5,7 Z" transform="translate(9.000000, 8.000000) scale(-1, 1) translate(-9.000000, -8.000000)"/>
+  <path d="M40.5,7 L34.75,1.25 L36,-5.17110888e-16 L44,8 L43.375,8.625 L36,16 L34.75,14.75 L40.5,9 L26,9 L26,7 L40.5,7 Z"/>
+
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg
new file mode 100644
index 0000000000..0f9e4d90e4
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg
@@ -0,0 +1,18 @@
+<?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="38"
+     height="14"
+     viewBox="0 0 38 14"
+     fill="context-fill">
+
+  <rect x="0" y="0" width="28" height="2"/>
+  <rect x="0" y="6" width="38" height="2"/>
+  <rect x="0" y="12" width="18" height="2"/>
+
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg
new file mode 100644
index 0000000000..17fb534ced
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg
@@ -0,0 +1,17 @@
+<?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="38"
+     height="24"
+     viewBox="0 0 38 24"
+     fill="context-fill">
+
+  <rect x="0" y="0" width="28" height="2"/>
+  <rect x="0" y="11" width="38" height="2"/>
+  <rect x="0" y="22" width="18" height="2"/>
+
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Minus-24x24.svg b/toolkit/themes/shared/reader/RM-Minus-24x24.svg
new file mode 100644
index 0000000000..27f0367223
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Minus-24x24.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="M0,13.5v-3h24v3H0z"/>

+</svg>

diff --git a/toolkit/themes/shared/reader/RM-Plus-24x24.svg b/toolkit/themes/shared/reader/RM-Plus-24x24.svg
new file mode 100644
index 0000000000..a8517b5e8d
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Plus-24x24.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="M24,13.5H13.5V24h-3V13.5H0v-3h10.5V0h3v10.5H24V13.5z"/>

+</svg>

diff --git a/toolkit/themes/shared/reader/RM-Pocket-Glyph-Dark.svg b/toolkit/themes/shared/reader/RM-Pocket-Glyph-Dark.svg
new file mode 100644
index 0000000000..1315b3eddc
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Pocket-Glyph-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="54" height="48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M33.5 8A20 20 0 0 0 17 16.74l.16.08.19.1.16.09.21.13.42.28c.55.36 1.15.77 1.95 1.28 1.45.75 2.53 1.21 3.52 1.72a9.942 9.942 0 0 1 2.88 2.14s.18.17.4.42c.45-.75.937-1.479 1.46-2.18l1-1.36.71-1c.24-.34.49-.68.74-1a.379.379 0 0 1 .12-.32 6.93 6.93 0 0 1 1.26-1.79 10.838 10.838 0 0 1 1.77-1.51A18.292 18.292 0 0 1 36 12.65c.7-.35 1.41-.67 2.12-1 .26-.1.55-.17.86-.27a4.47 4.47 0 0 1 1.21-.12 3.591 3.591 0 0 1 1.48.37 2.84 2.84 0 0 1 1.15 1.08c.072.114.132.234.18.36.061.117.108.242.14.37.083.26.137.528.16.8.035.504-.03 1.01-.19 1.49l-.12.31c0 .1-.1.2-.12.25-.02.05-.14.25-.21.36a5.015 5.015 0 0 1-.42.61 29.475 29.475 0 0 1-1.79 3.65l-.36.23a1 1 0 0 1-.21.6c0-.2-.13 0-.24 0l-.08.4c-.3-.05-.12 1.08-.42 1h-.26c-1.12 1.23-2.11 2.68-3.19 4.13a26.834 26.834 0 0 1-3.53 4.11c-.384.216-.79.39-1.21.52l-.33.1-.38.1a5.064 5.064 0 0 1-.81.15v.28c-.44.09-.5 0-.54-.08-.04-.08-.11-.18-.5-.33.073.145.16.282.26.41a3.111 3.111 0 0 1-.44-.08l-.41-.13c-.23-.08-.43-.17-.6-.24h.2c-.38-.18-.83-.32-.91-.15 0-.18.15-.24-.32-.49-.2.36-.91 0-1.58-.28 0 0-.19-.21 0-.18a3.6 3.6 0 0 1-1.78-1 3.87 3.87 0 0 0-1.74-1c-.86-.91-1.52-.81-2.49-1.8l-.08.21a7.832 7.832 0 0 0-1.7-1.16h.2l-.4-.28h.05c-.21-.08-.52-.41-.91-.57h.05a1.39 1.39 0 0 0-.7-.51l-.12-.34a3.378 3.378 0 0 1-1-.72A20 20 0 1 0 33.5 8Z" fill="#FF6682"/><path d="M27.44 24.64a1.93 1.93 0 0 1-1.07.38c-.21 0-.24-.28-.15-.63-.55-.19-1.3-.48-2.3-.87a3.45 3.45 0 0 0-1.66-1.22v.27a3.88 3.88 0 0 0-1.3-.76c-.33 0 .19.41-.37.28l-1.31-.77c.12-.08.57.22.53 0-.12 0-.79-.34-.81-.1l.09-.22c-.2 0-.24-.25-.47-.38-.23-.13-.26 0 0 .2-.5-.19-1.26-.33-1.53-.66-.44-.22-.2-.35-.25-.57-.14-.05-.39-.05-.43 0v-.05H16.18a.58.58 0 0 0-.45-.25 1.521 1.521 0 0 0-.33.05.68.68 0 0 1-.4-.1h.16c.05 0 .08 0 0-.17a.75.75 0 0 0-.33.1.202.202 0 0 0 .06-.09.364.364 0 0 0 0-.1.312.312 0 0 0-.11-.25.67.67 0 0 0-.35.27.999.999 0 0 0-.13.43c-.02.305.065.609.24.86-.1 0-.14 0-.15.05a.24.24 0 0 0 .06.13c.08.09.18.19.15.32a.09.09 0 0 1 .08-.06c0-.08 0-.11.18 0a.29.29 0 0 0 .16 0c0 .14-.06.17-.14.13.09.08.2.16 0 .18.02.037.048.071.08.1H15.08a.73.73 0 0 0 .26.09c.168.003.334.037.49.1a6 6 0 0 0 .66.61c.22.18.46.38.86.66h-.13c.18.2.1.45.54.75.43-.2.69 0 1 .33.325.41.73.75 1.19 1 0-.3.45.13.53-.07.76.86 1.77.94 2.7 1.79h-.07a1.76 1.76 0 0 0 1.31.65c-.25.08.23.45-.05.48.36-.09 1.24.56 1.24.56.06.32.88.51 1.23.92h.74l-.31.09c.32.14.3.32.14.33.12.11.22.08.45.15l-.18.11c.35.26.71-.05.38-.17.5 0 .59.08.64.19a.399.399 0 0 0 .1.15c.07 0 .1 0 .17-.05.042-.123.069-.25.08-.38v.13c0 .04 0 0 .07.12s.09.2.12 0l.09.16v-.07c0-.06 0-.11-.07-.18.11-.06.24-.15.4-.26.16-.11.34-.24.52-.36l1-.68c.32-.41-.25 0-.19-.25.19-.58.54-.48.94-.78h-.23l.73-.68v.21l.46-.49c0-.22-.14 0-.33.12.226-.26.405-.559.53-.88a1.51 1.51 0 0 1 .68-.76l.08.18s-.1 0-.12.11c-.23.74.47-.3.59-.25-.05-.3.49-.7.41-1.11 1.1-.77 1.19-1.93 1.91-2.6 0 .29.28-.2.39-.09.34-.3 0-.4.22-.7l.4-.17c.16-1 .61-.36.92-1.19a1.42 1.42 0 0 1 .45-.86c.265-.303.441-.674.51-1.07l.17.06c.15-.65.62-.8.74-1.33.23 0 0 .16.26.25.08-.56.29.29.26-.13.118-.15.191-.33.21-.52.005-.18-.037-.36-.12-.52-.16-.32-.41-.45-.43-.63-.18-.12-.17-.29-.23-.47s-.15-.28-.28-.07a.58.58 0 0 1 .15.11 1 1 0 0 0-.48-.1v-.17c-.18.07-1.21 0-1.56.43h-.07a1.491 1.491 0 0 1-.49.23.729.729 0 0 0-.38.34v-.08c-.15.197-.322.378-.51.54-.2.2-.45.39-.69.62-.52.442-1.001.927-1.44 1.45-.21-.14-.62.48-.92.94.11-.14 0-.22 0-.27-.24.76-1.22 1.09-1.42 1.94a2.117 2.117 0 0 0-.43.64c-.15.26-.33.49-.54.42a5.8 5.8 0 0 1-1.8 2.6v-.08c-.85.61-1.49 1-2 1.33a.283.283 0 0 1-.09.08Z" fill="#FBFBFE"/><path d="m27.58 24.55-.14.09a.28.28 0 0 0 .14-.09Z" fill="#424242"/><path d="m16.56 19.79-.14-.16s.01.08.14.16ZM12.61 22.69l-.09-.06.09.06ZM21.59 5.46h-.38s.11.03.38 0Z" fill="#202020"/><path d="M25.81 2.2c-5.07.6-6.46.39-11.68 1.29-2.5.31-5.15.78-7.59 1.17l-.46.15-.26.06-.35.13a7.77 7.77 0 0 0-1.56.53 5.55 5.55 0 0 0-1.42 1 4.42 4.42 0 0 0-.93 1.25c-.18.18-.35.37-.51.57a19.05 19.05 0 0 0-.5 2.08l-.05-.14c0 .26 0 .52.06.77s0 .25 0 .37a1.28 1.28 0 0 1 0 .17v.13c.03.267.08.53.15.79H.65l.15.85-.1-.14a22 22 0 0 1 .59 3.61l.2-.12c.1 2.42.66 3.24.68 5.43.218.6.376 1.22.47 1.85.08.58.1 1.11.16 1.71.036.606.12 1.207.25 1.8.09.3.18.62.3.94.126.344.277.678.45 1-.18-.34 0 .18-.11.17.52 1.25 1.19 2.58 1.59 2.38.44.89.25.79.17 1 .08 0 .24.11.44.36s.2.28.3.44c.1.16.23.32.33.48L6.27 34c.21.31.41.63.63.93.22.3.45.6.68.89v-.56c.62 1-.16.49.6 1.33l.21-.19c.233.292.45.595.65.91.187.28.367.56.54.84.36.61.774 1.186 1.24 1.72A20 20 0 0 0 15 42.74a23.79 23.79 0 0 0 4.77 1.82 32.648 32.648 0 0 0 9.72.91l.3.18c.08.16.49 0 .91-.22.42-.22.84-.4 1-.29l.67-.29c.21 0 .64-.06.31.11a3.13 3.13 0 0 0 1.08-.45h.74a14.5 14.5 0 0 0 3.5-1.6c1.06-.65 2.07-1.38 3.19-2.19.398-.236.78-.5 1.14-.79.426-.305.83-.639 1.21-1a17.999 17.999 0 0 0 2.32-2.69 21.998 21.998 0 0 0 1.83-3.09c.445-.937.83-1.903 1.15-2.89.34-1.22.71-2.46 1-3.76a28.83 28.83 0 0 0 .72-4 19.755 19.755 0 0 0 0-4.14 27.762 27.762 0 0 0-.64-3.72 1.071 1.071 0 0 0-.17-.55l-.58-4.45s-.18-1.34-.46-3.1c-.07-.44-.14-.91-.22-1.39v-.4a2.659 2.659 0 0 0-.11-.47c0-.15-.09-.3-.15-.45l-.23-.5A5.15 5.15 0 0 0 45.41.9a4.15 4.15 0 0 0-2.47-.28 1.41 1.41 0 0 0-.57.24c-.1.08-.1.17 0 .24.1.07.76.26 1.61.71.49.278.921.648 1.27 1.09.215.269.387.569.51.89.143.347.224.715.24 1.09l-.09-.06c.06.37.09 1 .15 1.52s.11 1 .18 1.43c.123.851.327 1.688.61 2.5-.38.32.24 2 .18 2.59.53 1.44.16 3.09.65 4.48 0-.05-.16-.06-.21-.39.1.52.22 1.13.29 1.62.07.49.06.84-.06.89.163 1.283.2 2.58.11 3.87 0 .65-.1 1.28-.14 1.84-.04.56-.07 1.05-.08 1.44v-.12a2.68 2.68 0 0 1-.12 1 8.917 8.917 0 0 0-.29 1.05c-.05 0-.08.1-.1.08a5.28 5.28 0 0 1-.54 1.77l-.42.87c-.122.22-.229.446-.32.68h-.17c-.29.55-.6 1.11-.94 1.64l.41-.58c.13.22-.13.49-.48.86-.206.195-.4.402-.58.62-.221.248-.41.524-.56.82a8.069 8.069 0 0 0-1 1.76 5.315 5.315 0 0 1-.53.9 2.57 2.57 0 0 1-.75.72c-.36.59.21-.64-.42.12-.18-.16.24-.41-.07-.39a4.23 4.23 0 0 1-1 .75c-.18.1-.37.2-.57.33-.2.13-.39.28-.62.47l-.14-.13a3.9 3.9 0 0 1-.88.66 5.43 5.43 0 0 1-.92.43c-.558.17-1.085.43-1.56.77a2 2 0 0 1-1.27.29 1.45 1.45 0 0 0-.49 0 2.803 2.803 0 0 0-.33.12l-.47.22-.66-.08c-.67.1-.41.41-1.18.44 0-.16-1 0-.55-.19a11.21 11.21 0 0 0-1.29.11l-1.34.17a7.8 7.8 0 0 1-3-.21c-.341.099-.7.12-1.05.06a2.452 2.452 0 0 0-1 0 5.365 5.365 0 0 0-1-.32 1.23 1.23 0 0 1-.37-.16c0-.05.09-.05.42-.05.11 0 .3.05.27.1l.19-.14a5.361 5.361 0 0 0-1.7-.52l-.86-.16a4.618 4.618 0 0 1-.86-.3c.32.2.79.37.43.36-.36-.01-.72-.3-1.07-.48h.28c-.25-.13-.52-.26-.77-.41l-.81-.54.12.28a6.417 6.417 0 0 1-.78-.68 2.31 2.31 0 0 0-1-.53c-.45-.12.55.65-.25.21a32.525 32.525 0 0 1-3.08-3c-.06.25-.32 0-.63-.3l.1-.16c-.61-.49-.62-.67-.63-.84-.01-.17 0-.36-.56-.89h.19L9.51 34c-.55-.46-.59-.67-.63-.89a.82.82 0 0 0-.15-.36 3.151 3.151 0 0 0-.57-.6c.33.51-.2.46-.51-.25l.25.1a2.84 2.84 0 0 1-.46-.7c.2.18.29 0 0-.53l.39.26c-.13-.14-.28-.29-.4-.44L7 30.1a2.58 2.58 0 0 0-.09-.35l-.12-.37c-.09-.25-.2-.5-.28-.74a2.37 2.37 0 0 1-.23-1.12l-.07-.3c0-.18-.11-.42-.16-.68a7.598 7.598 0 0 0-.21-.76 1.72 1.72 0 0 0-.23-.52c.23.35.12-.7.36-.43a4.999 4.999 0 0 1-.4-1.26 4.31 4.31 0 0 1-.12-1.4v.11c-.11-2.33-.84-3.9-.87-6-.2.12-.24-1-.47-.68a13.65 13.65 0 0 1-.33-2.86 5.35 5.35 0 0 0-.14-1.07 1.62 1.62 0 0 0-.18-.4l-.06-.09h-.06L3.25 11a1.41 1.41 0 0 1 0-.46c.025-.1.062-.198.11-.29.1-.15.18-.25.27-.41a.999.999 0 0 0 0 .17 2.74 2.74 0 0 1 .64-1.25c.28-.301.62-.54 1-.7a1 1 0 0 0 .25-.21l.23-.23a1.15 1.15 0 0 1 .35-.19c.232-.062.47-.1.71-.11-.37.21.13.11.58.05-.29.06-.37.13.24.16a1.19 1.19 0 0 1 .32-.15c.75-.16.61-.19.26-.16l-.14-.08c.82.09 2.19-.32 2.32-.07 2.27-.37 3.86-.87 5.73-1.24.23.1-.19.29-.73.42l1.33-.24c0 .2-.75.22-1.16.31 1.64.1 3.25-.77 5.17-.74l.36-.21h.12c0-.08.39-.25.66-.32.29.13 0 .4 1 .25a12.2 12.2 0 0 0 3-.6c-.52.05-.36-.07-.15-.16.46-.07.76.06 1.1-.06l.08.22c-.21-.19 1.18-.4 1.34-.52.29.13-.7.25-.8.39l2.79-.42c1-.31-.21-.19.23-.46a14 14 0 0 1 2.73-.45l-.35-.16a12.53 12.53 0 0 1 3.75-.45C48.6-.68 38.83.07 38.83.07 34 .29 31.54 1.23 25.81 2.2Z" fill="#FBFBFE"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.5)" d="M0 0h53v48H0z"/></clipPath></defs></svg>
diff --git a/toolkit/themes/shared/reader/RM-Pocket-Glyph-Sepia.svg b/toolkit/themes/shared/reader/RM-Pocket-Glyph-Sepia.svg
new file mode 100644
index 0000000000..869b2d77b1
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Pocket-Glyph-Sepia.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="54" height="48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M33.5 48c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20Z" fill="#FF6682"/><path d="M28.962 32.748 12.756 21.771l1.706-4.773 11.515 7.16 9.809-10.978 5.97-1.431v4.295L28.962 32.748Z" fill="#FBFBFE"/><path d="m16.56 19.791-.138-.166c-.015.036.013.09.138.166ZM38.261 14.01c-.01.01-.026.018-.034.03.027-.015.035-.023.035-.03ZM12.614 22.688l-.016-.015a2.801 2.801 0 0 1-.091-.064l.107.079Z" fill="#202020"/><path d="M20.063 18.701c-.804-.507-1.401-.916-1.955-1.284a60.078 60.078 0 0 0-.419-.275l-.21-.131a3.615 3.615 0 0 0-.163-.092l-.19-.102a12.829 12.829 0 0 0-1.625-.728c-.282-.086-.574-.17-.858-.193a3.212 3.212 0 0 0-.84.02 3.26 3.26 0 0 0-1.758.858c-.843.683-1.33 1.856-1.219 2.935.026.267.072.531.165.777.023.064.036.125.069.188l.13.188.256.376c.17.246.338.493.503.736l.06.092c.023.03.056.058.082.089l.167.175c.115.117.216.233.338.348a4.807 4.807 0 0 1 .53.386l.07.05a8.516 8.516 0 0 1 .645.569c.345.338.71.668 1.094.83l.114.335c.266.107.548.262.698.51l-.046.029c.394.16.704.497.904.569l-.046.03.4.284-.113.006c.645.314 1.224.74 1.704 1.16l.081-.203c.965.985 1.628.89 2.489 1.797l-.044.033c.803.18 1.262.587 1.74.988.472.406.962.813 1.787.973-.205-.039.02.137-.018.175.67.31 1.387.645 1.59.276.467.254.327.315.315.493.081-.165.53-.025.911.15l-.205-.023c.177.079.375.163.606.246.105.038.265.092.407.127.144.038.292.066.439.084a2.844 2.844 0 0 1-.262-.409c.396.15.455.236.5.328.049.079.102.17.549.078l-.048-.284c.294-.028.556-.079.812-.142.125-.03.257-.069.379-.107l.33-.099a5.8 5.8 0 0 0 1.213-.518c1.318-1.193 2.463-2.653 3.532-4.105 1.074-1.455 2.07-2.905 3.192-4.134l.259-.003c.3.117.111-1.015.416-.964l.081-.402c.105-.06.277-.223.236-.022.198-.295.16-.328.209-.597l.363-.229c.845-1.137 1.081-2.366 1.795-3.65.142-.178.28-.384.416-.613.069-.114.137-.233.206-.358.028-.048.081-.152.124-.251s.084-.203.12-.307c.14-.399.233-.968.188-1.498a3.365 3.365 0 0 0-.155-.792 2.263 2.263 0 0 0-.142-.379 2.394 2.394 0 0 0-.186-.358 2.86 2.86 0 0 0-1.148-1.079 3.514 3.514 0 0 0-1.48-.37 4.291 4.291 0 0 0-1.208.126c-.31.092-.602.165-.858.264-.714.303-1.417.623-2.123.97-.709.348-1.392.757-2.044 1.207-.653.449-1.26.957-1.777 1.508-.52.55-.955 1.145-1.257 1.787-.09.046-.147.295-.117.315-.251.338-.5.675-.744 1.013-.241.335-.47.645-.71.965 0 0-.43.586-.991 1.356-.564.774-1.272 1.78-1.712 2.63-.441.85-.616 1.521-.233 1.592.391.074 1.305-.447 3.2-1.805l.017.089c.955-.95 1.526-1.628 1.798-2.6.215.063.39-.16.545-.427.158-.269.28-.55.427-.642l.013.043c.198-.853 1.175-1.175 1.414-1.935.008.044.089.13-.015.267.294-.462.71-1.082.921-.945.399-.492.937-1.01 1.435-1.45.246-.228.492-.418.696-.619.213-.175.38-.376.508-.538l-.016.084c.13-.211.254-.29.389-.343.14-.046.284-.082.487-.234.036.023.074.03.071.043.35-.414 1.374-.363 1.554-.429l-.005.165c.163 0 .335.023.483.107a.76.76 0 0 0-.153-.117c.132-.2.229-.084.282.079.056.178.046.348.229.47.017.172.266.31.429.624.078.16.127.348.116.526a.893.893 0 0 1-.213.52c.036.42-.175-.434-.259.125-.22-.084-.025-.292-.254-.247-.122.531-.591.673-.739 1.326l-.175-.061c-.045.452-.29.777-.513 1.069-.23.29-.447.54-.447.866-.31.832-.759.23-.919 1.19l-.396.168c-.238.305.114.399-.22.696-.117-.107-.402.383-.39.094-.723.67-.814 1.828-1.911 2.605.074.403-.457.805-.411 1.104-.125-.053-.823.993-.594.249.02-.064.09-.145.126-.107l-.086-.18c-.355.178-.53.457-.678.76-.145.304-.269.631-.528.88.185-.119.36-.343.33-.119l-.46.485-.022-.206c-.239.231-.485.452-.732.676l.232.028c-.402.294-.747.198-.935.774-.066.282.503-.155.188.254l-.972.673c-.176.122-.363.266-.518.368a5.479 5.479 0 0 1-.402.254c.082.07.094.124.074.177-.01.029-.028.049-.046.072l-.03.033c-.003.005 0 .01-.005.02l-.092-.16c-.03.16-.099.066-.121-.04-.036-.105-.036-.216-.074-.12a1.748 1.748 0 0 1-.066.249c-.066.076-.097.089-.165.048-.053-.035-.076-.091-.104-.147-.051-.11-.137-.221-.637-.193.322.127-.034.434-.381.172l.177-.109c-.228-.07-.332-.04-.454-.147.167-.018.183-.193-.137-.33l.307-.089-.731-.018c-.356-.408-1.178-.591-1.234-.916 0 0-.884-.653-1.237-.556.277-.03-.205-.401.046-.48-.343.023-1.137-.297-1.31-.65l.066.015c-.922-.848-1.935-.932-2.692-1.79-.083.203-.492-.234-.535.069-.544-.236-.886-.663-1.186-.98-.3-.32-.566-.526-.995-.328-.434-.302-.353-.551-.534-.754l.125.046c-.404-.282-.643-.485-.863-.663a7.846 7.846 0 0 1-.658-.604c-.16-.094-.317-.08-.485-.104a.655.655 0 0 1-.261-.094c-.023-.013-.046-.03-.07-.046a1.053 1.053 0 0 0-.055-.046.322.322 0 0 1-.073-.096c.197-.02.083-.094-.003-.183.081.048.134.018.134-.127-.058.01-.109 0-.154-.015.012-.005.017-.013.035-.018-.18-.117-.22-.089-.178-.008a.112.112 0 0 0-.078.059c.028-.122-.071-.224-.15-.32-.036-.049-.064-.097-.059-.13.01-.035.051-.056.145-.05a1.414 1.414 0 0 1-.236-.861.977.977 0 0 1 .135-.43.637.637 0 0 1 .345-.266.319.319 0 0 1 .112.246.273.273 0 0 1-.026.104.284.284 0 0 1-.053.094.689.689 0 0 1 .322-.101c.056.127.026.162-.025.17-.05.015-.132.008-.162.05.21.1.307.102.406.095.096-.013.195-.049.33-.044a.553.553 0 0 1 .442.244c.017-.02.073-.023.111-.033l.127-.025.041.05c.033-.076.284-.076.427-.03.045.221-.193.346.25.572.27.332 1.03.472 1.53.657-.232-.168-.105-.203.032-.195.224.121.262.342.468.378l-.097.213c.026-.238.69.135.818.104.035.221-.414-.076-.534.003.882.505.442.249 1.316.764.553.137.033-.239.36-.274.43.216.914.332 1.3.754l-.033-.267c.846.363 1.282.696 1.656 1.216 1.607.638 2.549.996 3.097 1.12.549.114.673-.081.63-.38a2.007 2.007 0 0 0-.246-.549 4.94 4.94 0 0 0-.402-.559c-.279-.34-.538-.591-.538-.591-.99-1.054-1.889-1.615-2.877-2.136-.992-.507-2.076-.97-3.519-1.719Z" fill="#5B4636"/><path d="m21.594 5.463-.388-.033c.012.04.111.06.388.033ZM46.997 28.586c.003-.028.01-.061.01-.086-.015.058-.015.078-.01.086ZM6.522 4.658c.008 0 .016-.003.02-.003.031-.013.07-.023.095-.035l-.115.038Z" fill="#202020"/><path d="M25.812 2.195c-5.068.605-6.465.396-11.68 1.29-2.503.318-5.157.782-7.592 1.17-.14.06-.294.11-.46.156a6.44 6.44 0 0 1-.258.063l-.35.079a7.22 7.22 0 0 0-1.562.528 5.544 5.544 0 0 0-1.417.957c-.416.378-.723.83-.934 1.257-.17.18-.363.358-.513.569-.218.65-.36 1.411-.5 2.077L.5 10.295c.018.254.03.515.056.767l.046.37.02.17.02.127c.051.33.089.617.147.79l-.055-.023.142.856-.094-.137c.312 1.21.5 2.478.591 3.605l.198-.122c.097 2.425.658 3.238.68 5.434l-.055-.023c.236.663.366 1.267.447 1.843.081.577.099 1.112.155 1.712.035.586.127 1.173.256 1.792.082.308.175.62.292.945.112.325.28.647.457.985-.18-.335-.053.188-.111.178.518 1.302 1.19 2.635 1.584 2.458.444.89.251.787.173.977.078-.046.243.112.436.363.097.124.2.274.305.434.112.155.226.32.333.483l-.254-.264c.213.307.411.622.635.921.225.297.441.602.677.889 0-.183.01-.37.02-.556.62.993-.162.495.6 1.336l.213-.194c.254.315.46.615.645.907.196.284.368.561.538.845.353.554.701 1.12 1.247 1.722a20.155 20.155 0 0 0 4.195 2.859 24.014 24.014 0 0 0 4.775 1.815c3.286.874 6.617 1.039 9.715.912l.3.183c.08.157.495-.03.914-.221.421-.183.838-.407.985-.29l.67-.297c.208.003.637-.053.307.112.648-.17.655-.208 1.084-.45l.744-.038c1.277-.368 2.39-.921 3.453-1.559 1.06-.655 2.075-1.386 3.197-2.196.358-.216.75-.47 1.14-.782.404-.297.8-.657 1.211-1.038a19.414 19.414 0 0 0 2.321-2.692c.706-1 1.323-2.067 1.828-3.097.49-1.039.876-2.032 1.148-2.887.342-1.216.71-2.46 1.03-3.758.323-1.295.574-2.643.717-4.017.14-1.373.154-2.777.005-4.141-.145-1.277-.343-2.529-.645-3.725.023-.165-.135-.558-.17-.55L49.19 9.58s-.18-1.345-.457-3.105c-.07-.44-.147-.904-.223-1.381l-.03-.18-.046-.226c-.036-.155-.059-.313-.112-.465-.05-.152-.097-.305-.152-.454l-.196-.44c-.576-1.158-1.58-2.026-2.57-2.43-.99-.416-1.914-.413-2.465-.281-.28.058-.47.16-.571.238-.1.084-.097.17-.018.247.17.175.76.256 1.612.71.417.234.892.572 1.288 1.087.203.252.375.551.505.886.13.333.22.699.233 1.092l-.088-.06c.063.372.094 1.022.15 1.518.05.515.106.987.175 1.434.14.894.327 1.686.617 2.499-.384.322.236 2.003.18 2.59l-.04-.049c.53 1.437.157 3.093.647 4.482-.04-.051-.16-.066-.214-.394.1.518.221 1.127.293 1.625.066.492.058.833-.056.889.162 1.163.182 2.572.106 3.872-.03.65-.096 1.272-.134 1.83a14.989 14.989 0 0 0-.084 1.445l-.043-.117c.025.452-.023.734-.12 1.013-.096.28-.182.574-.286 1.054-.049.04-.087.099-.097.084-.023.495-.27 1.152-.548 1.767-.148.305-.285.604-.422.868a5.705 5.705 0 0 0-.315.68l-.167-.032c-.295.556-.605 1.11-.945 1.643l.414-.577c.124.221-.132.49-.48.86-.183.179-.39.382-.586.62-.193.242-.402.498-.554.818-.429.48-.678 1.125-.998 1.757-.15.323-.33.627-.535.907a2.539 2.539 0 0 1-.752.71c-.36.592.213-.637-.422.125-.172-.16.25-.409-.06-.391-.32.355-.678.533-1.031.749-.183.101-.374.2-.57.33-.195.13-.398.284-.624.47l-.14-.13a3.703 3.703 0 0 1-.878.663 6.385 6.385 0 0 1-.921.431c-.602.25-1.16.412-1.557.765-.698.345-.988.327-1.277.297a1.367 1.367 0 0 0-.483.035 2.194 2.194 0 0 0-.337.125 5.361 5.361 0 0 0-.467.218c-.224-.025-.442-.048-.66-.079-.673.102-.41.412-1.181.435.015-.163-.962.033-.551-.186-.427.02-.853.04-1.285.11-.434.055-.878.114-1.34.172-.925.089-1.943.11-3.032-.216-.257.122-.663.092-1.051.061-.389-.045-.757-.109-.96-.03-.018-.061-.571-.203-.955-.323-.193-.056-.34-.122-.36-.16-.018-.043.086-.045.414-.045.111.002.297.05.271.099l.188-.14c-.576-.305-1.127-.427-1.701-.516-.282-.055-.569-.101-.86-.165a5.479 5.479 0 0 1-.861-.294c.322.193.792.368.436.358a16.317 16.317 0 0 1-1.074-.485l.285-.036c-.257-.137-.518-.266-.772-.408l-.752-.44.125.277c-.364-.233-.551-.487-.783-.683a2.493 2.493 0 0 0-.96-.53c-.451-.115.547.652-.25.208-.894-.75-2.12-1.96-3.083-3.042-.056.246-.32-.043-.632-.307l.101-.158c-.612-.487-.62-.67-.632-.843-.013-.172-.002-.353-.55-.886l.182.028c-.183-.028-.37-.053-.549-.091-.545-.46-.583-.668-.624-.886a.902.902 0 0 0-.15-.364c-.099-.147-.277-.327-.571-.601.327.515-.203.46-.516-.247l.252.082c-.244-.343-.366-.44-.46-.704.198.18.29 0-.015-.53l.383.266c-.132-.147-.274-.29-.4-.442l-.384-.462a2.873 2.873 0 0 0-.097-.347 6.182 6.182 0 0 0-.119-.371c-.084-.252-.196-.5-.28-.741-.16-.486-.31-.907-.228-1.12l-.066-.297c-.038-.183-.112-.424-.167-.683a8.426 8.426 0 0 0-.206-.76c-.079-.23-.145-.424-.234-.52.231.348.122-.698.369-.432-.138-.208-.295-.741-.407-1.261-.112-.529-.175-1.075-.12-1.4l.042.115c-.115-2.334-.836-3.9-.874-6.003-.198.125-.236-.985-.467-.678-.282-1.05-.282-2.046-.328-2.859-.023-.406-.058-.769-.144-1.068a1.498 1.498 0 0 0-.239-.49 1.149 1.149 0 0 0-.208-.157c-.038-.184-.008-.33.002-.453.028-.12.071-.21.11-.29.099-.152.18-.256.264-.41-.003.055-.01.109-.008.165.15-.605.391-.968.642-1.25.26-.277.534-.492.98-.695.104-.066.183-.138.252-.216.073-.074.142-.145.23-.224.087-.081.199-.132.346-.19.165-.053.414-.092.716-.112-.37.208.122.112.574.048-.287.064-.368.135.241.155.076-.058.203-.106.32-.147.008.013.03.018.023.036.749-.16.61-.19.256-.163.016-.025-.02-.05-.134-.079.812.09 2.186-.32 2.318-.068 2.265-.379 3.854-.879 5.73-1.247.232.107-.192.29-.736.419l1.336-.239c.015.198-.757.221-1.163.318 1.643.091 3.252-.777 5.167-.75l.368-.207.114.01c-.018-.082.389-.252.663-.318.29.132.035.396.962.254.757.061 2.075-.373 3.022-.599-.523.043-.368-.074-.153-.165.462-.071.755.06 1.102-.061l.076.223c-.213-.19 1.181-.403 1.339-.52.287.132-.701.246-.798.391l2.786-.422c.97-.312-.211-.192.236-.46.87-.167 1.703-.446 2.73-.449l-.349-.16c1.625-.388 2.613-.502 3.75-.451C48.6-.676 38.833.07 38.833.07c-4.883.22-7.292 1.162-13.02 2.124Z" fill="#5B4636"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.5)" d="M0 0h53v48H0z"/></clipPath></defs></svg>
diff --git a/toolkit/themes/shared/reader/RM-Pocket-Glyph.svg b/toolkit/themes/shared/reader/RM-Pocket-Glyph.svg
new file mode 100644
index 0000000000..79bffb2f60
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Pocket-Glyph.svg
@@ -0,0 +1,22 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. 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="54" height="48" viewBox="0 0 54 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M33.5 48C44.5457 48 53.5 39.0457 53.5 28C53.5 16.9543 44.5457 8 33.5 8C22.4543 8 13.5 16.9543 13.5 28C13.5 39.0457 22.4543 48 33.5 48Z" fill="#FF6682"/>
+<path d="M28.9622 32.7483L12.7563 21.771L14.4622 16.9983L25.9769 24.1574L35.7858 13.1801L41.7563 11.7483V16.0437L28.9622 32.7483Z" fill="white"/>
+<path d="M16.5597 19.7911L16.4222 19.6256C16.407 19.6613 16.435 19.7147 16.5597 19.7911Z" fill="#202020"/>
+<path d="M38.2615 14.0093C38.251 14.0198 38.2354 14.0276 38.2275 14.0407C38.2536 14.025 38.2615 14.0172 38.2615 14.0093Z" fill="#202020"/>
+<path d="M12.6137 22.688C12.6086 22.6829 12.6036 22.6778 12.5985 22.6727C12.5679 22.6524 12.5348 22.6294 12.5068 22.6091L12.6137 22.688Z" fill="#202020"/>
+<path d="M20.0634 18.7016C19.2585 18.1938 18.6619 17.785 18.1084 17.4168C17.9662 17.3229 17.8265 17.2315 17.6894 17.1426L17.4787 17.0106C17.4558 16.9954 17.3771 16.9522 17.3162 16.9192L17.1257 16.8176C16.6154 16.546 16.0771 16.2997 15.5008 16.0889C15.2189 16.0026 14.9269 15.9188 14.6426 15.896C14.3556 15.8604 14.089 15.8782 13.8021 15.9163C13.241 16.0051 12.5986 16.2463 12.0451 16.7745C11.2021 17.4575 10.7147 18.6305 10.8264 19.7096C10.8518 19.9762 10.8975 20.2402 10.9914 20.4865C11.0143 20.55 11.027 20.6109 11.06 20.6744L11.1895 20.8623L11.4459 21.2381C11.616 21.4844 11.7836 21.7307 11.9486 21.9744L12.0096 22.0658C12.0324 22.0963 12.0654 22.1242 12.0908 22.1547L12.2584 22.3299C12.3727 22.4467 12.4742 22.5635 12.5961 22.6777C12.7383 22.7666 12.8779 22.8656 13.0201 22.9774C13.0557 23.0053 13.0912 23.0332 13.1267 23.0637L13.1953 23.1145C13.2385 23.1475 13.2791 23.1805 13.3223 23.216C13.4924 23.3557 13.6676 23.5156 13.8402 23.6832C14.1855 24.0209 14.5512 24.351 14.9345 24.5135L15.0488 24.8486C15.3154 24.9553 15.5972 25.1102 15.747 25.359L15.7013 25.3869C16.0949 25.5469 16.4047 25.8846 16.6052 25.9557L16.5595 25.9861L16.9582 26.2705L16.8464 26.2756C17.4914 26.5904 18.0703 27.017 18.5501 27.4359L18.6314 27.2328C19.5962 28.2179 20.2589 28.124 21.1197 29.0304L21.0765 29.0634C21.8788 29.2437 22.3384 29.65 22.8157 30.0511C23.288 30.4574 23.778 30.8636 24.6032 31.0236C24.3976 30.9855 24.6235 31.1607 24.5855 31.1988C25.2558 31.5085 25.9718 31.8437 26.1749 31.4755C26.6421 31.7294 26.5024 31.7904 26.4897 31.9681C26.571 31.8031 27.0204 31.9427 27.4013 32.1179L27.1956 32.0951C27.3733 32.1738 27.5714 32.2576 27.8024 32.3414C27.9065 32.3794 28.0665 32.4328 28.2087 32.4683C28.3534 32.5064 28.5007 32.5343 28.6479 32.5521C28.5464 32.4201 28.46 32.283 28.3864 32.1433C28.7825 32.2931 28.8409 32.3794 28.8866 32.4708C28.9348 32.5496 28.9882 32.6409 29.435 32.5495L29.3868 32.2652C29.6813 32.2372 29.9428 32.1865 30.1993 32.123C30.3237 32.0925 30.4557 32.0544 30.5776 32.0164C30.6893 31.9833 30.7985 31.9503 30.9077 31.9173C31.3342 31.7828 31.7481 31.6203 32.1213 31.3994C33.4391 30.206 34.5842 28.7461 35.6532 27.2937C36.7272 25.8389 37.7225 24.3891 38.8447 23.1602L39.1037 23.1576C39.4033 23.2744 39.2154 22.142 39.5201 22.1928L39.6014 21.7916C39.7055 21.7307 39.8781 21.5682 39.8375 21.7688C40.0355 21.4742 39.9975 21.4412 40.0457 21.1721L40.4088 20.9436C41.2543 19.8061 41.4904 18.5772 42.2039 17.2924C42.3461 17.1147 42.4832 16.909 42.6203 16.6805C42.6888 16.5663 42.7574 16.4469 42.826 16.3225C42.8539 16.2743 42.9072 16.1702 42.9504 16.0711C42.9935 15.9721 43.0342 15.868 43.0697 15.7639C43.2094 15.3653 43.3033 14.7965 43.2576 14.2659C43.2398 13.9967 43.184 13.7301 43.1027 13.4737C43.0672 13.3442 43.0189 13.2173 42.9605 13.0954C42.9097 12.971 42.8463 12.8517 42.7752 12.7374C42.4984 12.2778 42.0972 11.8944 41.6275 11.6583C41.1603 11.4171 40.6424 11.3054 40.1473 11.2876C39.609 11.2698 39.2815 11.3384 38.9387 11.4145C38.6289 11.5059 38.3369 11.5796 38.0805 11.6786C37.367 11.9808 36.6637 12.3007 35.9578 12.6485C35.2494 12.9964 34.5664 13.4051 33.9139 13.8546C33.2614 14.304 32.6545 14.8118 32.1366 15.3628C31.6161 15.9137 31.1819 16.5078 30.8798 17.1502C30.7909 17.1959 30.7325 17.4448 30.763 17.4651C30.5116 17.8028 30.2628 18.1405 30.019 18.4782C29.7778 18.8133 29.5493 19.1231 29.3081 19.443C29.3081 19.443 28.879 20.0295 28.3179 20.7989C27.7542 21.5733 27.0458 22.5787 26.6065 23.4293C26.1647 24.2799 25.9896 24.9502 26.3729 25.0213C26.764 25.0949 27.678 24.5744 29.5721 23.216L29.5899 23.3049C30.5446 22.3553 31.1159 21.6773 31.3876 20.7049C31.6034 20.7684 31.7786 20.5449 31.9335 20.2783C32.0909 20.0092 32.2127 19.7274 32.36 19.636L32.3727 19.6791C32.5708 18.826 33.5483 18.5036 33.787 17.7444C33.7946 17.7876 33.8758 17.8739 33.7717 18.011C34.0663 17.5489 34.4827 16.9293 34.6934 17.0665C35.092 16.5739 35.6303 16.0559 36.128 15.6167C36.3742 15.3882 36.6205 15.1977 36.8237 14.9971C37.0369 14.8219 37.2045 14.6213 37.3315 14.4588L37.3162 14.5427C37.4457 14.3319 37.5701 14.2532 37.7047 14.1999C37.8443 14.1542 37.9891 14.1186 38.1922 13.9663C38.2277 13.9891 38.2658 13.9967 38.2633 14.0094C38.6137 13.5956 39.6369 13.6464 39.8172 13.5803L39.8121 13.7454C39.9746 13.7454 40.1473 13.7682 40.2945 13.852C40.2488 13.8063 40.198 13.7682 40.1422 13.7352C40.2742 13.5346 40.3707 13.6515 40.424 13.8139C40.4799 13.9917 40.4697 14.1618 40.6525 14.2837C40.6703 14.4563 40.9191 14.5934 41.0816 14.9083C41.1603 15.0682 41.2086 15.2561 41.1984 15.4339C41.1832 15.6192 41.1146 15.8096 40.9851 15.9543C41.0207 16.3733 40.81 15.5202 40.7262 16.0788C40.5053 15.995 40.7008 15.7868 40.4723 15.8325C40.3504 16.3631 39.8807 16.5053 39.7334 17.1579L39.5582 17.0969C39.5125 17.5489 39.2688 17.8739 39.0453 18.1658C38.8143 18.4553 38.5984 18.7067 38.5984 19.0317C38.2887 19.8645 37.8393 19.2627 37.6793 20.2225L37.2832 20.3901C37.0446 20.6947 37.3975 20.7887 37.0623 21.0857C36.9455 20.9791 36.6612 21.4692 36.6739 21.1797C35.9502 21.85 35.8588 23.0078 34.7619 23.7848C34.8356 24.1885 34.3049 24.5897 34.3506 24.8893C34.2262 24.8359 33.528 25.882 33.7565 25.1381C33.7768 25.0746 33.8479 24.9933 33.8834 25.0314L33.7971 24.8512C33.4416 25.0289 33.2665 25.3082 33.1192 25.6103C32.9745 25.915 32.85 26.2426 32.5911 26.4914C32.7764 26.3721 32.9516 26.1486 32.9211 26.3721L32.4616 26.857L32.4387 26.6513C32.2001 26.8824 31.9538 27.1033 31.7075 27.3267L31.9385 27.3547C31.5374 27.6492 31.1921 27.5527 31.0042 28.1291C30.9381 28.4109 31.5069 27.9742 31.1921 28.383C30.9204 28.5709 30.5776 28.807 30.2196 29.0558C30.0444 29.1777 29.8565 29.3224 29.7016 29.424C29.5442 29.5306 29.4071 29.6195 29.3005 29.6779C29.3817 29.749 29.3944 29.8023 29.3741 29.8556C29.3639 29.8836 29.3462 29.9039 29.3284 29.9267C29.3182 29.9369 29.3081 29.9496 29.2979 29.9597C29.2954 29.9648 29.2979 29.9699 29.2928 29.98L29.2014 29.8201C29.171 29.98 29.1024 29.8861 29.0796 29.7795C29.044 29.6754 29.044 29.5636 29.0059 29.6601C29.0136 29.6169 29.0186 29.5763 29.0237 29.5332C29.011 29.6601 28.9805 29.7871 28.9399 29.9089C28.8739 29.9851 28.8434 29.9978 28.7749 29.9572C28.7216 29.9216 28.6987 29.8658 28.6708 29.8099C28.62 29.7008 28.5337 29.589 28.0335 29.617C28.3559 29.7439 28.0005 30.0511 27.6526 29.7896L27.8304 29.6804C27.6018 29.6093 27.4977 29.6398 27.3759 29.5332C27.5434 29.5154 27.5587 29.3402 27.2388 29.2031L27.546 29.1142L26.8147 29.0964C26.4593 28.6877 25.6366 28.5049 25.5808 28.1799C25.5808 28.1799 24.6972 27.5273 24.3442 27.6238C24.621 27.5933 24.1386 27.2226 24.3899 27.1439C24.0472 27.1668 23.2525 26.8469 23.0798 26.4939L23.1458 26.5092C22.2241 25.6611 21.2111 25.5773 20.4544 24.7191C20.3706 24.9223 19.9619 24.4855 19.9187 24.7877C19.3753 24.5516 19.0326 24.125 18.733 23.8076C18.4334 23.4877 18.1667 23.282 17.7377 23.4801C17.3035 23.1779 17.3847 22.9291 17.2045 22.726L17.3289 22.7717C16.9252 22.4898 16.6865 22.2867 16.4656 22.109C16.2447 21.9313 16.0619 21.7586 15.808 21.5047C15.648 21.4108 15.4906 21.426 15.323 21.4006C15.2367 21.3879 15.1504 21.3625 15.0615 21.3067C15.0386 21.294 15.0158 21.2762 14.9929 21.261C14.9752 21.2457 14.9574 21.2305 14.9371 21.2152C14.9092 21.1899 14.8838 21.1594 14.8635 21.1188C15.0615 21.0984 14.9472 21.0248 14.8609 20.936C14.9422 20.9842 14.9955 20.9537 14.9955 20.809C14.9371 20.8192 14.8863 20.809 14.8406 20.7938C14.8533 20.7887 14.8584 20.7811 14.8761 20.776C14.6959 20.6592 14.6553 20.6871 14.6984 20.7684C14.6705 20.7734 14.6426 20.7887 14.6197 20.8268C14.6476 20.7049 14.5486 20.6034 14.4699 20.5069C14.4344 20.4586 14.4064 20.4104 14.4115 20.3774C14.4217 20.3418 14.4623 20.3215 14.5562 20.3266C14.3937 20.0879 14.3023 19.7756 14.3201 19.4659C14.3353 19.3161 14.3734 19.1637 14.4547 19.0368C14.5359 18.9174 14.6527 18.8108 14.8 18.7701C14.8888 18.8539 14.9142 18.9428 14.9117 19.0165C14.9092 19.0545 14.9015 19.0901 14.8863 19.1205C14.8736 19.1561 14.8558 19.1891 14.833 19.2145C14.9295 19.151 15.0412 19.1231 15.1554 19.1129C15.2113 19.2399 15.1808 19.2754 15.1301 19.283C15.0793 19.2983 14.998 19.2907 14.9676 19.3338C15.1783 19.4329 15.2748 19.4354 15.3738 19.4278C15.4703 19.4151 15.5693 19.3795 15.7039 19.3846C15.8486 19.3897 16.0365 19.4582 16.1457 19.6283C16.1634 19.608 16.2193 19.6055 16.2574 19.5953L16.3843 19.5699L16.425 19.6207C16.458 19.5446 16.7093 19.5446 16.8515 19.5903C16.8972 19.8112 16.6586 19.9356 17.1029 20.1616C17.372 20.4942 18.1312 20.6338 18.6314 20.8192C18.4003 20.6516 18.5273 20.616 18.6644 20.6237C18.8878 20.7455 18.9259 20.9664 19.1316 21.002L19.0351 21.2152C19.0605 20.9766 19.7257 21.3498 19.8527 21.3194C19.8882 21.5402 19.4388 21.2432 19.3195 21.3219C20.2005 21.8272 19.7613 21.5707 20.6347 22.0861C21.1882 22.2233 20.6677 21.8475 20.9952 21.8119C21.4243 22.0278 21.9093 22.1445 22.2952 22.566L22.2622 22.2994C23.1077 22.6625 23.5444 22.9951 23.9177 23.5156C25.5249 24.1529 26.4669 24.5109 27.0153 24.6354C27.5638 24.7496 27.6882 24.5541 27.645 24.2545C27.6095 24.0971 27.5181 23.9041 27.3987 23.7061C27.2819 23.508 27.1372 23.3227 26.9975 23.1475C26.7183 22.8073 26.4593 22.5559 26.4593 22.5559C25.469 21.5022 24.5702 20.941 23.5825 20.4205C22.5898 19.9127 21.5056 19.4506 20.0634 18.7016Z" fill="#202020"/>
+<path d="M21.594 5.46294L21.2056 5.42993C21.2183 5.47056 21.3173 5.49087 21.594 5.46294Z" fill="#202020"/>
+<path d="M46.9972 28.5862C46.9997 28.5582 47.0074 28.5251 47.0074 28.4997C46.9921 28.5582 46.9921 28.5786 46.9972 28.5862Z" fill="#202020"/>
+<path d="M6.52246 4.6579C6.53006 4.6579 6.53766 4.65536 6.54276 4.65536C6.57316 4.64267 6.61126 4.63251 6.63666 4.61981L6.52246 4.6579Z" fill="#202020"/>
+<path d="M25.8117 2.19534C20.7438 2.79963 19.3473 2.59142 14.1321 3.48516C11.6286 3.80254 8.9753 4.26718 6.5404 4.65566C6.4007 4.71406 6.2459 4.76483 6.0808 4.81054C5.997 4.83339 5.9107 4.8537 5.8218 4.87401C5.7076 4.8994 5.5908 4.92735 5.4714 4.95274C4.9662 5.05938 4.4279 5.2371 3.9099 5.48085C3.3894 5.71952 2.9045 6.05975 2.49315 6.43807C2.07675 6.81639 1.76952 7.26833 1.55878 7.69489C1.38867 7.87516 1.1957 8.05289 1.04589 8.26363C0.82754 8.91363 0.68535 9.67535 0.5457 10.3406L0.5 10.2949C0.51777 10.5488 0.53047 10.8103 0.55586 11.0617C0.57109 11.1861 0.58633 11.3105 0.60156 11.4324C0.60918 11.4882 0.6168 11.5644 0.62187 11.6025C0.62949 11.6456 0.63457 11.6863 0.64219 11.7294C0.69297 12.0595 0.73105 12.3464 0.78945 12.5191L0.73359 12.4962L0.87578 13.3519L0.78183 13.2148C1.09414 14.4259 1.28203 15.6929 1.37343 16.8202L1.57148 16.6984C1.66796 19.1231 2.22909 19.9356 2.25194 22.1319L2.19608 22.1091C2.43221 22.7717 2.5617 23.376 2.643 23.9524C2.7242 24.5288 2.742 25.0645 2.7978 25.6637C2.8334 26.2502 2.9248 26.8368 3.0543 27.4563C3.1355 27.7635 3.2295 28.0758 3.3463 28.4008C3.458 28.7258 3.6256 29.0483 3.8033 29.386C3.623 29.0508 3.75 29.5738 3.6916 29.5637C4.2095 30.8662 4.8824 32.1992 5.2759 32.0215C5.7203 32.9127 5.5273 32.8086 5.4486 32.999C5.5273 32.9533 5.6923 33.1107 5.8853 33.3621C5.9818 33.4865 6.0859 33.6363 6.19 33.7963C6.3017 33.9512 6.416 34.1162 6.5226 34.2787L6.2687 34.0146C6.482 34.3219 6.68 34.6367 6.9035 34.9363C7.1294 35.2334 7.3453 35.5381 7.5814 35.825C7.5814 35.6422 7.5916 35.4543 7.6017 35.2689C8.2212 36.2617 7.4392 35.7641 8.2009 36.6045L8.4142 36.4115C8.6681 36.7264 8.8738 37.0259 9.0591 37.3179C9.2546 37.6023 9.4273 37.8791 9.5974 38.1634C9.9503 38.7169 10.2982 39.2832 10.8441 39.8849C12.0933 40.997 13.5177 41.9644 15.0386 42.7439C16.562 43.5234 18.1768 44.1251 19.8145 44.5593C23.1 45.4327 26.4313 45.5978 29.5289 45.4708L29.8285 45.6536C29.9098 45.811 30.3236 45.6231 30.7426 45.4327C31.164 45.2499 31.5805 45.0265 31.7277 45.1433L32.398 44.8462C32.6062 44.8488 33.0353 44.7929 32.7052 44.9579C33.3527 44.7878 33.3603 44.7497 33.7894 44.5085L34.5334 44.4704C35.8105 44.1023 36.9226 43.5488 37.9865 42.9115C39.0452 42.2564 40.0609 41.5251 41.1831 40.7152C41.5411 40.4994 41.9321 40.2455 42.3231 39.9332C42.7269 39.6361 43.1229 39.2755 43.5343 38.8947C44.3391 38.1177 45.1466 37.2011 45.855 36.2033C46.5608 35.2029 47.1778 34.1365 47.6831 33.1057C48.1731 32.0672 48.559 31.0744 48.8307 30.2188C49.1735 29.0026 49.5417 27.7584 49.8616 26.461C50.184 25.1661 50.4354 23.8178 50.5776 22.4442C50.7172 21.0706 50.7325 19.6665 50.5827 18.303C50.4379 17.0259 50.2399 15.7742 49.9377 14.5783C49.9606 14.4132 49.8032 14.0197 49.7676 14.0273L49.1913 9.58141C49.1913 9.58141 49.011 8.23572 48.7342 6.47616C48.6631 6.03691 48.587 5.57225 48.5108 5.09491L48.4803 4.91464L48.4346 4.68867C48.3991 4.53378 48.3762 4.37637 48.3229 4.22403C48.2721 4.07169 48.2264 3.91934 48.1706 3.76953L47.9751 3.33028C47.3987 2.17248 46.3958 1.30411 45.4055 0.9004C44.4153 0.483997 43.4911 0.48654 42.9401 0.61857C42.6608 0.676968 42.4704 0.778546 42.3689 0.857256C42.2698 0.941045 42.2724 1.02736 42.3511 1.10354C42.5212 1.27873 43.1103 1.35999 43.9634 1.81448C44.3798 2.04807 44.8546 2.38574 45.2507 2.90117C45.4538 3.15253 45.6264 3.45217 45.7559 3.78732C45.8854 4.11994 45.9768 4.48554 45.9895 4.87909L45.9007 4.81816C45.9641 5.1914 45.9946 5.84139 46.0505 6.3365C46.1012 6.85193 46.1571 7.3242 46.2257 7.77107C46.3653 8.66481 46.5532 9.45699 46.8426 10.2695C46.4593 10.5919 47.0788 12.2728 47.0229 12.8593L46.9823 12.8111C47.513 14.2482 47.1397 15.9036 47.6298 17.2925C47.5891 17.2417 47.4698 17.2265 47.4165 16.8989C47.5155 17.4169 47.6374 18.0263 47.7085 18.5239C47.7745 19.0165 47.7669 19.3567 47.6526 19.4126C47.8151 20.5755 47.8354 21.9846 47.7592 23.2846C47.7288 23.9346 47.6628 24.5567 47.6247 25.1153C47.5637 25.6714 47.546 26.169 47.5409 26.56L47.4977 26.4432C47.5231 26.8952 47.4749 27.177 47.3784 27.4563C47.2819 27.7356 47.1956 28.0301 47.0915 28.51C47.0432 28.5506 47.0051 28.609 46.995 28.5938C46.9721 29.0889 46.7259 29.7465 46.4466 30.3609C46.2993 30.6656 46.1622 30.9653 46.0251 31.2293C45.888 31.4908 45.7762 31.7244 45.7102 31.9098L45.5427 31.8767C45.2481 32.4328 44.9384 32.9863 44.5981 33.5195L45.012 32.9432C45.1364 33.1641 44.88 33.4332 44.5321 33.8039C44.3493 33.9816 44.1411 34.1847 43.9456 34.4234C43.7526 34.6646 43.5444 34.9211 43.3921 35.241C42.963 35.7209 42.7142 36.3658 42.3942 36.998C42.2444 37.3205 42.0642 37.6252 41.8585 37.9045C41.6554 38.1914 41.4066 38.4326 41.1069 38.6154C40.7464 39.207 41.3202 37.9781 40.6855 38.7398C40.5128 38.5798 40.9343 38.331 40.6245 38.3488C40.3046 38.7043 39.9466 38.882 39.5937 39.0978C39.4109 39.1994 39.2204 39.2984 39.0249 39.4279C38.8294 39.5574 38.6263 39.7123 38.4003 39.8976L38.2607 39.7681C37.989 40.0423 37.6945 40.2632 37.3822 40.4308C37.0749 40.606 36.7652 40.7482 36.4605 40.8624C35.8587 41.1113 35.3001 41.2738 34.9041 41.6267C34.2058 41.972 33.9164 41.9542 33.6269 41.9238C33.4822 41.9136 33.34 41.9085 33.1445 41.9593C33.048 41.9847 32.9363 42.0253 32.8068 42.0837C32.6748 42.137 32.5199 42.2081 32.3396 42.3021C32.1162 42.2767 31.8978 42.2538 31.6795 42.2234C31.0066 42.3249 31.2707 42.6347 30.4988 42.6576C30.5141 42.4951 29.5365 42.6906 29.9478 42.4722C29.5213 42.4925 29.0947 42.5128 28.6631 42.5814C28.2289 42.6372 27.7846 42.6956 27.3225 42.754C26.3983 42.8429 25.3801 42.8632 24.2908 42.5382C24.0344 42.6601 23.6282 42.6296 23.2397 42.5992C22.8512 42.5535 22.4831 42.49 22.2799 42.5687C22.2622 42.5078 21.7086 42.3656 21.3252 42.2462C21.1323 42.1904 20.985 42.1244 20.9647 42.0863C20.9469 42.0431 21.051 42.0406 21.3786 42.0406C21.4903 42.0431 21.6756 42.0913 21.6502 42.1396L21.8381 42C21.2618 41.6953 20.7108 41.5734 20.137 41.4845C19.8551 41.4287 19.5682 41.3829 19.2762 41.3195C18.9893 41.2458 18.7024 41.1519 18.4155 41.0249C18.738 41.2179 19.2077 41.3931 18.8522 41.3829C18.4891 41.2306 18.1286 41.0757 17.7782 40.898L18.0626 40.8624C17.8061 40.7253 17.5446 40.5958 17.2907 40.4537L16.5391 40.0144L16.6636 40.2911C16.3005 40.0576 16.1126 39.8037 15.8815 39.6082C15.6479 39.4127 15.3991 39.2248 14.9218 39.0775C14.4698 38.9632 15.4677 39.73 14.6704 39.2857C13.7767 38.5367 12.5503 37.3256 11.588 36.2439C11.5322 36.4902 11.2681 36.2008 10.9558 35.9367L11.0573 35.7793C10.4454 35.2918 10.4378 35.109 10.4251 34.9363C10.4124 34.7637 10.4226 34.5834 9.8742 34.0502L10.057 34.0781C9.8742 34.0502 9.6863 34.0248 9.5085 33.9867C8.9626 33.5271 8.9246 33.3189 8.8839 33.1006C8.8611 32.9914 8.8331 32.8822 8.7341 32.7375C8.6351 32.5902 8.4574 32.41 8.1628 32.1357C8.4904 32.6512 7.9597 32.5953 7.6474 31.8895L7.8988 31.9707C7.655 31.628 7.5332 31.5315 7.4392 31.2674C7.6373 31.4477 7.7287 31.2674 7.424 30.7367L7.8074 31.0033C7.6753 30.8561 7.5332 30.7139 7.4062 30.5615L7.0228 30.0994C7 29.9877 6.9669 29.8709 6.9263 29.7516C6.8908 29.6322 6.8527 29.5053 6.807 29.3809C6.7232 29.1295 6.6115 28.8807 6.5277 28.6395C6.3677 28.1545 6.2179 27.733 6.2992 27.5198C6.2992 27.5198 6.2738 27.403 6.2332 27.2227C6.1951 27.0399 6.1214 26.7987 6.0656 26.5397C6.0072 26.2807 5.9361 26.0116 5.8599 25.7805C5.7812 25.5495 5.7152 25.3565 5.6263 25.26C5.8574 25.6079 5.7482 24.5618 5.9945 24.8284C5.8574 24.6202 5.7 24.087 5.5882 23.5665C5.4765 23.0383 5.4131 22.4924 5.4689 22.1674L5.5095 22.2817C5.3953 19.9483 4.6742 18.3817 4.6361 16.2794C4.4381 16.4038 4.4 15.2943 4.1689 15.6015C3.8871 14.5503 3.8871 13.555 3.8414 12.7425C3.8185 12.3363 3.783 11.9732 3.6967 11.6736C3.6535 11.5238 3.5951 11.3867 3.5189 11.2699C3.5012 11.2394 3.4808 11.2115 3.458 11.1835C3.4377 11.1607 3.4199 11.1455 3.3971 11.1277C3.3539 11.0921 3.3056 11.0591 3.2498 11.0261C3.2117 10.8433 3.2422 10.6961 3.2523 10.5742C3.2803 10.4549 3.3234 10.3634 3.3615 10.2847C3.4605 10.1324 3.5418 10.0283 3.6256 9.87341C3.623 9.92927 3.6154 9.98259 3.6179 10.0385C3.7678 9.43416 4.009 9.07106 4.2603 8.78923C4.5193 8.51247 4.7935 8.29666 5.2404 8.09353C5.3445 8.02752 5.4232 7.95643 5.4918 7.87772C5.5654 7.80409 5.6339 7.73299 5.7228 7.65428C5.8091 7.57303 5.9209 7.52225 6.0681 7.46386C6.2332 7.41054 6.482 7.37243 6.7841 7.35212C6.4134 7.56032 6.906 7.46386 7.358 7.40038C7.071 7.46386 6.9898 7.53495 7.5992 7.55526C7.6753 7.49686 7.8023 7.4486 7.9191 7.40797C7.9267 7.42067 7.9496 7.42575 7.9419 7.44352C8.691 7.28356 8.5513 7.25309 8.1984 7.28102C8.2136 7.25563 8.1781 7.23026 8.0638 7.20233C8.8763 7.29119 10.2499 6.8824 10.382 7.13377C12.6468 6.75545 14.2362 6.25525 16.1126 5.88709C16.3436 5.99373 15.9196 6.17655 15.3763 6.30604L16.7118 6.06738C16.727 6.26543 15.9552 6.28828 15.5489 6.38476C17.1917 6.47617 18.8014 5.6078 20.7159 5.63573L21.084 5.42754L21.1983 5.4377C21.1805 5.35645 21.5868 5.18634 21.861 5.12032C22.1504 5.25235 21.8965 5.51641 22.8233 5.37423C23.5799 5.43516 24.8977 5.00096 25.8447 4.77498C25.3217 4.81815 25.4766 4.70138 25.6924 4.60997C26.1545 4.53888 26.4465 4.67091 26.7943 4.54904L26.8705 4.77244C26.6572 4.58202 28.0512 4.36875 28.2086 4.25196C28.4955 4.38399 27.5078 4.49826 27.4113 4.64298C29.2699 4.36115 28.3406 4.50332 30.1967 4.22149C31.1666 3.90919 29.9859 4.02851 30.4328 3.76191C31.3037 3.59433 32.1365 3.31503 33.1623 3.31249L32.8144 3.15256C34.4394 2.76409 35.4271 2.64982 36.5646 2.70061C48.5997 -0.676324 38.832 0.0701583 38.832 0.0701583C33.9494 0.291055 31.5398 1.23304 25.8117 2.19534Z" fill="#202020"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="53" height="48" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Sans-Serif.svg b/toolkit/themes/shared/reader/RM-Sans-Serif.svg
new file mode 100644
index 0000000000..051855d14a
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Sans-Serif.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
+   xmlns="http://www.w3.org/2000/svg"
+   width="21"
+   height="13"
+   fill="context-fill">
+  <path d="M 7.276027,7.16854 5.432216,1.80247 3.47265,7.16854 Z M 4.572322,0 H 6.43267 l 4.406957,12.146004 H 9.037157 L 7.805193,8.507991 H 3.001361 L 1.686716,12.146004 H 0 Z"/>
+  <path
+     d="m 13.295286,9.789564 q 0,0.64492 0.471288,1.01699 0.471288,0.372069 1.116209,0.372069 0.78548,0 1.521351,-0.363801 1.240232,-0.603579 1.240232,-1.976103 V 7.639828 Q 17.371515,7.813461 16.941568,7.929216 16.511621,8.044971 16.09821,8.09458 L 15.196975,8.210335 Q 14.38669,8.317822 13.981548,8.549332 13.295286,8.937938 13.295286,9.789564 Z m 3.604941,-3.00963 q 0.512629,-0.06614 0.686262,-0.429947 0.09922,-0.198437 0.09922,-0.570507 0,-0.760675 -0.545702,-1.099672 -0.537434,-0.347265 -1.546156,-0.347265 -1.165818,0 -1.653642,0.628384 -0.272851,0.347265 -0.355533,1.033527 h -1.38906 q 0.04134,-1.637106 1.058331,-2.273759 1.025259,-0.64492 2.372977,-0.64492 1.562693,0 2.538342,0.595311 0.967381,0.595311 0.967381,1.85208 v 5.101487 q 0,0.23151 0.09095,0.37207 0.09922,0.140559 0.405142,0.140559 0.09922,0 0.223242,-0.0083 0.124023,-0.01654 0.264583,-0.04134 v 1.099672 q -0.347265,0.09922 -0.529166,0.124024 -0.1819,0.0248 -0.496093,0.0248 -0.768943,0 -1.116208,-0.545702 -0.181901,-0.289387 -0.256315,-0.818553 -0.454752,0.595311 -1.306378,1.033527 -0.851625,0.438215 -1.876884,0.438215 -1.231964,0 -2.017444,-0.744139 -0.777212,-0.752407 -0.777212,-1.876884 0,-1.231964 0.768944,-1.909958 0.768944,-0.677993 2.017444,-0.835089 z M 15.668263,3.075775 Z"
+  />
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Serif.svg b/toolkit/themes/shared/reader/RM-Serif.svg
new file mode 100644
index 0000000000..8cb7fcc715
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Serif.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="21" height="13" fill="context-fill">
+  <path
+     d="M 12.088127,11.897958 H 7.2016131 v -0.587043 q 0.6449206,-0.04134 1.0665998,-0.165364 0.4299469,-0.124023 0.4299469,-0.305924 0,-0.07441 -0.01654,-0.181901 -0.01654,-0.107486 -0.04961,-0.190168 L 7.656365,7.838266 H 3.547063 Q 3.315553,8.417041 3.166726,8.846988 3.026166,9.276935 2.910411,9.640736 2.802924,9.996269 2.761583,10.219511 q -0.04134,0.223242 -0.04134,0.363802 0,0.330728 0.520897,0.512629 0.520898,0.1819 1.174087,0.214973 v 0.587043 H 0 v -0.587043 q 0.214974,-0.01654 0.53743401,-0.09095 0.32246003,-0.08268 0.52916499,-0.214974 0.330729,-0.223241 0.51263,-0.46302 0.1819,-0.248046 0.355533,-0.677993 Q 2.819461,7.656365 3.88606,4.90305 4.95266,2.149735 5.787749,0 h 0.661457 l 3.910865,10.120293 q 0.124023,0.32246 0.281119,0.520897 0.157096,0.198437 0.438215,0.388606 0.190169,0.115755 0.496093,0.198437 0.305924,0.07441 0.512629,0.08268 z M 7.3587101,7.102395 5.5810441,2.554878 3.836451,7.102395 Z"
+     />
+  <path
+     d="m 20.03388,11.749131 q -0.388606,0.140559 -0.686262,0.223241 -0.289387,0.09095 -0.661457,0.09095 -0.64492,0 -1.033526,-0.297656 -0.380338,-0.305924 -0.487825,-0.884699 H 17.1152 q -0.537434,0.595312 -1.15755,0.909504 -0.611848,0.314192 -1.48001,0.314192 -0.917772,0 -1.513083,-0.562239 -0.587043,-0.562238 -0.587043,-1.471742 0,-0.471288 0.132291,-0.843357 0.132291,-0.37207 0.396874,-0.669726 0.206706,-0.248046 0.545702,-0.438215 0.338997,-0.198437 0.636653,-0.314192 0.372069,-0.14056 1.504814,-0.520897 1.141014,-0.380338 1.537888,-0.595312 V 5.87043 q 0,-0.107487 -0.04961,-0.41341 -0.04134,-0.305924 -0.190169,-0.578775 -0.165364,-0.305924 -0.471288,-0.529166 -0.297656,-0.23151 -0.851626,-0.23151 -0.380338,0 -0.711066,0.132291 -0.322461,0.124024 -0.454752,0.264583 0,0.165365 0.07441,0.487825 0.08268,0.32246 0.08268,0.595311 0,0.289388 -0.264583,0.529166 -0.256315,0.239778 -0.719334,0.239778 -0.413411,0 -0.611848,-0.289387 -0.190169,-0.297656 -0.190169,-0.661458 0,-0.380337 0.264583,-0.727602 0.272851,-0.347265 0.702798,-0.620116 0.372069,-0.23151 0.901235,-0.388606 0.529166,-0.165364 1.033527,-0.165364 0.69453,0 1.207159,0.09922 0.520897,0.09095 0.942576,0.405143 0.421679,0.305923 0.636652,0.835089 0.223242,0.520897 0.223242,1.347719 0,1.182354 -0.02481,2.100126 -0.0248,0.909503 -0.0248,1.992639 0,0.32246 0.107487,0.512629 0.115755,0.190169 0.347265,0.322461 0.124023,0.07441 0.388607,0.08268 0.27285,0.0083 0.553969,0.0083 z M 17.148274,7.383514 q -0.702799,0.206705 -1.231964,0.405143 -0.529166,0.198437 -0.983918,0.496092 -0.41341,0.28112 -0.653188,0.669726 -0.239779,0.380337 -0.239779,0.909503 0,0.686262 0.355534,1.008722 0.363801,0.32246 0.917771,0.32246 0.587043,0 1.033527,-0.281119 0.446483,-0.289387 0.752407,-0.677993 z"
+     />
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg b/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg
new file mode 100644
index 0000000000..26807e8468
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg
@@ -0,0 +1,7 @@
+<?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="24" height="24" viewBox="0 0 24 24">

+  <path fill="context-fill" d="M10.87,18.989h2.144L8.3,3.991H5.724l-4.739,15H3.044l1.115-4.171h5.6ZM4.652,12.91L6.968,5.69l2.294,7.22H4.652ZM22.1,16.515v-5.06c0-2.31-.984-3.713-3.65-3.713a10.236,10.236,0,0,0-3.7.756L15.116,9.9A9.9,9.9,0,0,1,18.1,9.317c1.533,0,1.958.627,1.958,2.223v0.975h-1.35c-3.086,0-4.871,1.125-4.871,3.5a3.217,3.217,0,0,0,3.527,3.338,3.205,3.205,0,0,0,2.945-1.659,2.573,2.573,0,0,0,2.436,1.659l0.441-1.344A1.408,1.408,0,0,1,22.1,16.515ZM17.8,17.9a1.744,1.744,0,0,1-1.911-1.995c0-1.512,1.029-2.111,3.065-2.111h1.1V16.18C19.426,17.334,18.938,17.9,17.8,17.9Z"/>

+</svg>

diff --git a/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg
new file mode 100644
index 0000000000..235f186376
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg
@@ -0,0 +1,7 @@
+<?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 16 24">
+  <polygon points="16.58 0.01 16.57 0 4.58 12 16.57 24 16.58 23.98" fill="context-fill" stroke="context-stroke"/>
+</svg>
diff --git a/toolkit/themes/shared/search-textbox.css b/toolkit/themes/shared/search-textbox.css
new file mode 100644
index 0000000000..7b23d9b338
--- /dev/null
+++ b/toolkit/themes/shared/search-textbox.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/. */
+
+:host {
+  appearance: auto;
+  -moz-default-appearance: textfield;
+  cursor: text;
+  margin: 2px 4px; /* matches <input> global.css margin */
+  padding: 2px 2px 3px;
+  padding-inline-start: 4px;
+  background-color: Field;
+  color: FieldText;
+  min-width: 0;
+}
+
+@media (-moz-platform: macos) {
+  :host {
+    -moz-default-appearance: searchfield;
+    /* TODO: These are a bit dubious, see bug 1815264 */
+    font-size: 12px;
+    margin: 4px; /* matches <input> global.css margin */
+    padding: 1px;
+  }
+}
+
+input {
+  border: none;
+  padding: 0 1px;
+  background-color: transparent;
+  outline: none;
+  color: inherit;
+  font: inherit;
+  text-shadow: inherit;
+  box-sizing: border-box;
+  flex: 1;
+  text-align: inherit;
+  min-width: 0;
+}
+
+:host([readonly="true"]) {
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+}
+
+:host([disabled="true"]) {
+  cursor: default;
+  background-color: -moz-Dialog;
+  color: GrayText;
+}
+
+.textbox-search-icons {
+  align-items: center;
+  justify-items: center;
+}
+
+.textbox-search-icon,
+.textbox-search-sign,
+.textbox-search-clear {
+  /* Search icon is 12px, but we expand to the clear button size so they
+   * overlap. That doesn't make the icon noticeably less crisp */
+  width: 14px;
+}
+
+.textbox-search-sign,
+.textbox-search-icon {
+  list-style-image: url(chrome://global/skin/icons/search-textbox.svg);
+}
+
+.textbox-search-sign:-moz-locale-dir(rtl),
+.textbox-search-icon:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.textbox-search-sign {
+  margin-inline-end: 5px;
+}
+
+.textbox-search-clear {
+  list-style-image: url(resource://content-accessible/searchfield-cancel.svg);
+}
+
+.textbox-search-icon:not([disabled]) {
+  cursor: pointer;
+}
+
+.textbox-search-clear:not([disabled]) {
+  cursor: default;
+}
+
+/* searchbutton disables the icon to the left.
+ * Otherwise we don't show the search icon, only the clear icon, see
+ * bug 1385902 */
+:host([searchbutton]) .textbox-search-sign,
+:host(:not([searchbutton])) .textbox-search-icons:not([selectedIndex="1"]) {
+  display: none;
+}
+
+/* On macOS -moz-default-appearance: searchbox provides the search icon too, so
+ * disable those there unconditionally */
+@media (-moz-platform: macos) {
+  .textbox-search-sign,
+  .textbox-search-icons:not([selectedIndex="1"]) {
+    display: none;
+  }
+
+  .textbox-search-clear {
+    margin-bottom: 1px;
+  }
+}
diff --git a/toolkit/themes/shared/tree.css b/toolkit/themes/shared/tree.css
new file mode 100644
index 0000000000..33a52cacae
--- /dev/null
+++ b/toolkit/themes/shared/tree.css
@@ -0,0 +1,316 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* ===== tree.css ===================================================
+  == Styles used by the XUL tree element.
+  ======================================================================= */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* ::::: tree ::::: */
+
+tree {
+  margin: 0 4px;
+  background-color: Field;
+  color: FieldText;
+  appearance: auto;
+  -moz-default-appearance: listbox;
+}
+
+/* ::::: tree rows ::::: */
+
+treechildren::-moz-tree-row {
+  border: 1px solid transparent;
+}
+
+treechildren::-moz-tree-row,
+treecol:not([hideheader="true"]),
+.tree-columnpicker-button {
+  min-height: max(24px, 1.3em);
+}
+
+treechildren::-moz-tree-row(multicol, odd) {
+  background-color: -moz-oddtreerow;
+}
+
+@media (-moz-windows-default-theme) {
+  treechildren::-moz-tree-row(hover) {
+    background-color: hsla(0,0%,50%,.15);
+  }
+}
+
+treechildren::-moz-tree-row(selected) {
+  background-color: -moz-cellhighlight;
+}
+
+treechildren::-moz-tree-row(selected, focus) {
+  background-color: SelectedItem;
+}
+
+treechildren::-moz-tree-row(current, focus) {
+  outline: var(--default-focusring);
+  outline-color: SelectedItem;
+  outline-offset: calc(-1 * var(--default-focusring-width));
+}
+
+treechildren::-moz-tree-row(selected, current, focus) {
+  outline-color: #F3D982;
+}
+
+/* ::::: tree cells ::::: */
+
+treechildren::-moz-tree-cell {
+  padding: 0 2px;
+}
+
+treechildren::-moz-tree-cell-text {
+  color: inherit;
+}
+
+treechildren::-moz-tree-image(selected),
+treechildren::-moz-tree-twisty(selected),
+treechildren::-moz-tree-cell-text(selected) {
+  color: -moz-cellhighlighttext;
+}
+
+treechildren::-moz-tree-image(selected, focus),
+treechildren::-moz-tree-twisty(selected, focus),
+treechildren::-moz-tree-cell-text(selected, focus) {
+  color: SelectedItemText;
+}
+
+
+/* ::::: lines connecting cells ::::: */
+
+treechildren::-moz-tree-line {
+  border: 1px dotted ThreeDShadow;
+}
+
+treechildren::-moz-tree-line(selected, focus) {
+  border: 1px dotted SelectedItemText;
+}
+
+
+/* ::::: tree separator ::::: */
+
+treechildren::-moz-tree-separator {
+  border-top: 1px solid ThreeDShadow;
+  border-bottom: 1px solid ThreeDHighlight;
+}
+
+
+/* ::::: drop feedback ::::: */
+
+treechildren::-moz-tree-cell-text(primary, dropOn) {
+  background-color: SelectedItem;
+  color: SelectedItemText;
+}
+
+treechildren::-moz-tree-drop-feedback {
+  background-color: SelectedItem;
+  width: 50px;
+  height: 2px;
+  margin-inline-start: 5px;
+}
+
+/* ::::: tree columns ::::: */
+
+treecol,
+.tree-columnpicker-button {
+  appearance: auto;
+  -moz-default-appearance: treeheadercell;
+  align-items: center;
+  justify-content: center;
+  color: -moz-ColHeaderText;
+  padding: 0 4px;
+  margin: 0;
+}
+
+treecol:where(:hover),
+.tree-columnpicker-button:where(:hover) {
+  color: -moz-ColHeaderHoverText;
+}
+
+.treecol-text {
+  margin: 0 !important;
+}
+
+treecol[hideheader="true"] {
+  appearance: none;
+}
+
+/* ::::: column drag and drop styles ::::: */
+
+treecol[dragging="true"] {
+  color: Graytext;
+}
+
+treechildren::-moz-tree-column(insertbefore) {
+  border-inline-start: 1px solid ThreeDShadow;
+}
+
+treechildren::-moz-tree-column(insertafter) {
+  border-inline-end: 1px solid ThreeDShadow;
+}
+
+/* ::::: column picker :::::  */
+
+.tree-columnpicker-button {
+  list-style-image: url("chrome://global/skin/icons/columnpicker.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+  min-width: 0;
+  padding: 1px 0;
+}
+
+.tree-columnpicker-button .button-text {
+  display: none;
+}
+
+/* ::::: tree icons ::::: */
+
+treechildren::-moz-tree-image {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* ::::: twisty :::::  */
+
+treechildren::-moz-tree-twisty {
+  padding-top: 1px;
+  padding-inline: 4px;
+  width: 12px; /* The image's width is 12 pixels */
+  list-style-image: url("chrome://global/skin/icons/arrow-right-12.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) {
+  list-style-image: url("chrome://global/skin/icons/arrow-left-12.svg");
+}
+
+treechildren::-moz-tree-twisty(open) {
+  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+}
+
+treechildren::-moz-tree-indentation {
+  width: 16px;
+}
+
+/* ::::: editable tree ::::: */
+
+treechildren::-moz-tree-row(selected, editing) {
+  background-color: transparent;
+  border: none;
+}
+
+treechildren::-moz-tree-cell-text(selected, editing),
+treechildren::-moz-tree-image(selected, editing) {
+  color: inherit;
+}
+
+html|input.tree-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  appearance: none;
+  flex: 1;
+  border: 0;
+  border-radius: 2px;
+  outline: var(--focus-outline);
+  margin-block: -1px 0;
+  margin-inline: -2px 0;
+  padding: 1px;
+  font: inherit;
+}
+
+.scrollbar-topmost {
+  position: relative;
+  z-index: 2147483647;
+}
+
+@media (-moz-platform: windows) {
+  /* ::::: sort direction indicator :::::  */
+
+  .treecol-sortdirection {
+    list-style-image: none;
+    -moz-context-properties: fill;
+    fill: currentColor;
+  }
+
+  treecol[sortDirection="ascending"]:not([hideheader="true"]) > .treecol-sortdirection {
+    list-style-image: url("chrome://global/skin/tree/sort-asc.svg");
+  }
+
+  treecol[sortDirection="descending"]:not([hideheader="true"]) > .treecol-sortdirection {
+    list-style-image: url("chrome://global/skin/tree/sort-dsc.svg");
+  }
+
+  @media (prefers-color-scheme: dark) {
+    treecol,
+    .tree-columnpicker-button {
+      appearance: none;
+      background-color: ButtonFace;
+      color: ButtonText;
+      border-inline-start: 1px solid ThreeDLightShadow;
+      box-shadow: inset 0 -1px ThreeDLightShadow;
+    }
+    treecol:where([ordinal="1"]) {
+      border-inline-start: none;
+    }
+    treecol:where(:hover),
+    .tree-columnpicker-button:where(:hover) {
+      background-color: -moz-ButtonHoverFace;
+      color: -moz-ButtonHoverText;
+    }
+    treecol:where(:hover:active),
+    .tree-columnpicker-button:where(:hover:active) {
+      background-color: -moz-ButtonActiveFace;
+      color: -moz-ButtonActiveText;
+    }
+  }
+
+  @media (-moz-windows-classic) {
+    treecol,
+    .tree-columnpicker-button {
+      border: 1px solid;
+      border-top-color: ThreeDHighlight;
+      border-inline-end-color: ThreeDShadow;
+      border-bottom-color: ThreeDShadow;
+      border-inline-start-color: ThreeDHighlight;
+      box-shadow: none;
+      background-color: -moz-Dialog;
+    }
+
+    treecol:where(:hover:active),
+    .tree-columnpicker-button:where(:hover:active) {
+      border-top-color: ThreeDShadow;
+      border-inline-end-color: ThreeDHighlight;
+      border-bottom-color: ThreeDHighlight;
+      border-inline-start-color: ThreeDShadow;
+    }
+  }
+}
+
+/* Stylelint doesn't cope with the Level 4 media query here.
+ * Filed as https://github.com/stylelint/stylelint/issues/6834 */
+/* stylelint-disable-next-line media-feature-name-no-unknown */
+@media (-moz-platform: macos) and (not (prefers-contrast)) {
+    /* We show a `SelectedItem` background on selected rows, so we do not need the
+       dotted outline in that case. For users who have Full Keyboard Access
+       enabled, macOS draws a blue highlight above the row highlight, so keyboard-
+       only users can still discern the currently-selected row when multiple rows
+       are selected. */
+  treechildren::-moz-tree-row(selected, current, focus) {
+    outline: none;
+  }
+}
+
+@media (-moz-platform: linux) {
+  .treecol-sortdirection {
+    appearance: auto;
+    -moz-default-appearance: treeheadersortarrow;
+  }
+}