Adding upstream version 124.0.1.upstream/124.0.1

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

184 files changed, 10947 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..6581b089dc
--- /dev/null
+++ b/toolkit/themes/shared/aboutNetError.css
@@ -0,0 +1,212 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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;
+}
+
+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");
+  fill: 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;
+}
+
+/* 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..6e4206e293
--- /dev/null
+++ b/toolkit/themes/shared/aboutReader.css
@@ -0,0 +1,914 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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);
+  }
+
+  .moz-reader-block-img {
+    filter: brightness(0.8) contrast(1.2);
+  }
+}
+
+.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 calc(8px + var(--line-height) * 0.4);
+  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/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..b2fb5ed9b6
--- /dev/null
+++ b/toolkit/themes/shared/aboutSupport.css
@@ -0,0 +1,176 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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;
+}
+
+/* Codec support table w/ zebra striping */
+:root {
+  --codec-bg-header: #bfbfc9;
+  --codec-bg-supported-even: #b3ffe3;
+  --codec-bg-supported-odd: #54ffbd;
+  --codec-bg-unsupported-even: #ffdfe7;
+  --codec-bg-unsupported-odd: #ffbdc5;
+  --codec-text-name-even: var(--in-content-box-background);
+  --codec-text-name-odd: var(--in-content-box-background-odd);
+  --codec-text-other: var(--in-content-text-color);
+  --codec-text-supported: #15141a;
+  --codec-text-unsupported: #15141a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --codec-bg-header: #42414d;
+  }
+}
+
+#codec-table {
+  text-align: center;
+  white-space: nowrap;
+  width: auto;
+}
+
+#codec-table tr {
+  color: var(--codec-text-other);
+}
+
+#codec-table th {
+  color: var(--codec-text-other);
+  background-color: var(--codec-bg-header);
+}
+
+#codec-table td:first-child {
+  text-align: start;
+  unicode-bidi: normal;
+  font-weight: 600;
+}
+
+#codec-table tr:nth-child(even) {
+  background-color: var(--codec-text-name-even);
+}
+
+#codec-table tr:nth-child(odd) {
+  background-color: var(--codec-text-name-odd);
+}
+
+#codec-table tr > td.unsupported {
+  color: var(--codec-text-unsupported);
+}
+
+#codec-table tr > td.supported {
+  color: var(--codec-text-supported);
+}
+
+#codec-table tr > td.lack-of-extension {
+  font-weight: var(--font-weight-bold);
+}
+
+#codec-table tr:nth-child(even) > td.unsupported {
+  background-color: var(--codec-bg-unsupported-even);
+}
+
+#codec-table tr:nth-child(odd) > td.unsupported {
+  background-color: var(--codec-bg-unsupported-odd);
+}
+
+#codec-table tr:nth-child(even) > td.supported {
+  background-color: var(--codec-bg-supported-even);
+}
+
+#codec-table tr:nth-child(odd) > td.supported {
+  background-color: var(--codec-bg-supported-odd);
+}
+
+#codec-table tr:nth-child(even) > td.lack-of-extension {
+  background-color: var(--in-content-box-background-even);
+}
+
+#codec-table tr:nth-child(odd) > td.lack-of-extension {
+  background-color: var(--in-content-box-background-odd);
+}
+
+#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..0196baac47
--- /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 (not (prefers-contrast)) 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..dc0c88a4a7
--- /dev/null
+++ b/toolkit/themes/shared/checkbox.css
@@ -0,0 +1,108 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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 {
+  align-items: center;
+  margin: 4px 2px;
+
+  &[disabled="true"][native] {
+    color: GrayText;
+  }
+
+  &[disabled="true"]:not([native]) > .checkbox-label-box {
+    opacity: 0.4;
+  }
+}
+
+.checkbox-icon {
+  margin-inline-end: 2px;
+
+  &:not([src]) {
+    display: none;
+  }
+}
+
+.checkbox-label {
+  margin: 1px 0;
+}
+
+/* ::::: checkmark image ::::: */
+
+.checkbox-check {
+  appearance: auto;
+  -moz-default-appearance: checkbox;
+  margin-inline-end: var(--checkbox-margin-inline);
+
+  &:not([native]) {
+    -moz-theme: non-native;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+  }
+
+  checkbox:focus-visible > & {
+    outline-style: auto;
+  }
+}
+
+.checkbox-label[native] {
+  margin: 0;
+}
+
+.checkbox-check[native] {
+  align-items: center;
+
+  @media (-moz-platform: windows) {
+    width: 13px;
+    height: 13px;
+    margin-inline-end: 5px;
+  }
+
+  @media (-moz-platform: linux) {
+    margin: 2px;
+    margin-inline-end: 4px;
+  }
+
+  @media (-moz-platform: macos) {
+    width: 1.3em;
+    height: 1.3em;
+    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;
+  }
+}
+
+@media (-moz-platform: windows) or (-moz-platform: linux) {
+  checkbox[native]:focus-visible > .checkbox-label-box {
+    outline: var(--focus-outline);
+  }
+}
+
+@media (-moz-platform: windows) {
+  checkbox:where([native]) {
+    margin: 2px 4px;
+    padding-block: 1px;
+    padding-inline: 4px 2px;
+  }
+}
+
+@media (-moz-platform: macos) {
+  checkbox:where([native]) {
+    margin: 4px 2px;
+  }
+
+  .checkbox-label[native] {
+    margin: 1px 0;
+  }
+}
+
+@media (-moz-platform: linux) {
+  checkbox:where([native]) {
+    margin: 2px 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-system/README.design-tokens.stories.md b/toolkit/themes/shared/design-system/README.design-tokens.stories.md
new file mode 100644
index 0000000000..6afe185d87
--- /dev/null
+++ b/toolkit/themes/shared/design-system/README.design-tokens.stories.md
@@ -0,0 +1,759 @@
+# Design tokens
+
+## What are design tokens?
+
+Design tokens capture raw values that represent user interface design styling decisions, such as color or font size, with variables under a consistent naming structure that conveys purpose and intent.
+
+Design tokens are language-agnostic, and can be translated to any environment. On Firefox for desktop, variables are represented in CSS.
+
+For example, [moz-toggle](https://searchfox.org/mozilla-central/source/toolkit/content/widgets/moz-toggle) uses several design tokens. Here are a few:
+
+<table>
+  <tr>
+    <th>Component token</th>
+    <th>Alias of token</th>
+    <th>Value</th>
+  </tr>
+  <tr>
+    <td><code>--toggle-width</code></td>
+    <td><code>--size-item-large</code></td>
+    <td><code>32px</code></td>
+  </tr>
+  <tr>
+    <td><code>--toggle-background-color-pressed</code></td>
+    <td><code>--color-accent-primary</code></td>
+    <td><code>--color-blue-50</code>(<code>#0060df</code>)</td>
+  </tr>
+  <tr>
+    <td><code>--toggle-border-radius</code></td>
+    <td><code>--border-radius-circle</code></td>
+    <td><code>9999px</code></td>
+  </tr>
+</table>
+
+Although the design tokens methodology is industry-wide, there is no one-size-fits-all approach. Therefore, our design tokens are defined and implemented for the purposes of serving Firefox UI. This document should capture everything you need to know about [our design system's](https://acorn.firefox.com/) design tokens.
+
+The goal is for all of us who work on Firefox to share a common and maintainable system for how we refer to and consume UI styles, and for Firefox UI to be styled consistently.
+
+## Taxonomy
+
+_The following documentation borrows from Nathan Curtis' essay on [Naming Design Tokens](https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676)._
+
+Design tokens' variable names follow a taxonomy with distinct classification levels and sublevels, forming a prescriptive vocabulary of descriptive terms which are classified by category.
+
+<div class="box container-width-large">
+<div class="box">
+  <div class="box vertical">
+    <b>Ecosystem</b>
+    <div class="post-it"><b>Domain</b></div>
+  </div>
+  <div class="box vertical">
+    <b>Object</b>
+    <div class="box">
+      <div class="post-it green"><b>Pattern</b></div>
+      <div class="post-it green"><b>Component</b></div>
+      <div class="post-it green"><b>Element</b></div>
+    </div>
+  </div>
+  <div class="box vertical">
+    <b>Category</b>
+    <div class="box">
+      <div class="post-it orange"><b>Type</b></div>
+      <div class="post-it orange"><b>Concept</b></div>
+      <div class="post-it orange"><b>Property</b></div>
+    </div>
+  </div>
+  <div class="box vertical">
+    <b>Modifier</b>
+    <div class="box">
+      <div class="post-it blue"><b>Variant</b></div>
+      <div class="post-it blue"><b>State</b></div>
+      <div class="post-it blue"><b>Scale</b></div>
+    </div>
+  </div>
+</div>
+
+<div class="box">
+  <div class="box vertical">
+    <div class="post-it disabled"></div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it green disabled"></div>
+      <div class="post-it green disabled"></div>
+      <div class="post-it green disabled"></div>
+    </div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it orange">Color</div>
+      <div class="post-it orange disabled"></div>
+      <div class="post-it orange disabled"></div>
+    </div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it blue">Blue</div>
+      <div class="post-it blue disabled"></div>
+      <div class="post-it blue">50</div>
+    </div>
+  </div>
+</div>
+
+<div class="box">
+  <div class="box vertical">
+    <div class="post-it disabled"></div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it green disabled"></div>
+      <div class="post-it green disabled"></div>
+      <div class="post-it green disabled"></div>
+    </div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it orange">Size</div>
+      <div class="post-it orange">Item</div>
+      <div class="post-it orange disabled"></div>
+    </div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it blue disabled"></div>
+      <div class="post-it blue disabled"></div>
+      <div class="post-it blue">Small</div>
+    </div>
+  </div>
+</div>
+
+<div class="box">
+  <div class="box vertical">
+    <div class="post-it disabled"></div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it green disabled"></div>
+      <div class="post-it green">Link</div>
+      <div class="post-it green disabled"></div>
+    </div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it orange disabled"></div>
+      <div class="post-it orange disabled"></div>
+      <div class="post-it orange">Color</div>
+    </div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it blue disabled"></div>
+      <div class="post-it blue disabled"></div>
+      <div class="post-it blue disabled"></div>
+    </div>
+  </div>
+</div>
+
+<div class="box">
+  <div class="box vertical">
+    <div class="post-it disabled"></div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it green disabled"></div>
+      <div class="post-it green">Link</div>
+      <div class="post-it green">Focus Outline</div>
+    </div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it orange disabled"></div>
+      <div class="post-it orange disabled"></div>
+      <div class="post-it orange">Color</div>
+    </div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it blue disabled"></div>
+      <div class="post-it blue disabled"></div>
+      <div class="post-it blue disabled"></div>
+    </div>
+  </div>
+</div>
+
+<div class="box">
+  <div class="box vertical">
+    <div class="post-it">Shopping</div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it green disabled"></div>
+      <div class="post-it green">Card</div>
+      <div class="post-it green disabled"></div>
+    </div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it orange disabled"></div>
+      <div class="post-it orange disbaled"></div>
+      <div class="post-it orange">Border Color</div>
+    </div>
+  </div>
+  <div class="box vertical">
+    <div class="box">
+      <div class="post-it blue disabled"></div>
+      <div class="post-it blue disabled"></div>
+      <div class="post-it blue disabled"></div>
+    </div>
+  </div>
+</div>
+</div>
+
+### Ecosystem
+The ecosystem level helps describe the context that a token is scoped to.
+
+#### Domain
+A token is only prefixed with a domain when there is a need to specify its context.
+
+For example, if a token is specific to a certain feature, you can use the domain level to specify the name of the feature that it belongs to. Don't forget to keep domain-specific tokens within the feature's CSS so that they can only be reused within its domain.
+
+Example from [browser/components/shopping/content/shopping-container.css](https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/browser/components/shopping/content/shopping-container.css#7):
+
+<div class="box">
+  <div class="post-it big">
+    <strong>shopping</strong>
+  </div>
+  <div class="post-it blue big">
+    header
+  </div>
+  <div class="post-it blue big">
+    font-size
+  </div>
+</div>
+
+### Objects
+The object level helps define the object (or objects) that the token applies to.
+
+#### Pattern
+A design pattern that is composed of, or represents, multiple related components.
+
+<div class="box">
+  <div class="post-it big">
+   <strong>input</strong>
+  </div>
+  <div class="post-it blue big">
+    text
+  </div>
+  <div class="post-it blue big">
+    min-height
+  </div>
+</div>
+
+#### Component
+The component name.
+
+<div class="box">
+  <div class="post-it big">
+    <strong>toggle</strong>
+  </div>
+  <div class="post-it blue big">
+    background-color
+  </div>
+</div>
+
+#### Nested element
+Any element that may be nested within a component (e.g. an icon).
+
+<div class="box">
+  <div class="post-it blue big">
+    message-bar
+  </div>
+  <div class="post-it big">
+    <strong>icon</strong>
+  </div>
+  <div class="post-it blue big">
+    color
+  </div>
+</div>
+
+### Categories
+The category level helps define the visual style that apply to the token.
+
+#### Type
+The type of style category a design token belongs to.
+
+<div class="box">
+  <div class="post-it big">
+    <strong>color</strong>
+  </div>
+  <div class="post-it blue big">
+    blue
+  </div>
+  <div class="post-it blue big">
+    50
+  </div>
+</div>
+
+#### Concept
+A concept further describes user interface styles. They are either industry-wide patterns, or they are terms determined by our team based on specific user interface style needs. For example, "accent" is a common design industry term used for deliniating a brand's or product's accent color(s) that we happen to use for our color tokens.
+
+<div class="box">
+  <div class="post-it blue big">
+    color
+  </div>
+  <div class="post-it big">
+    <strong>accent</strong>
+  </div>
+  <div class="post-it blue big">
+    primary
+  </div>
+</div>
+
+To further illustrate this taxonomy level, here are detailed explanations and definitions of existing concepts:
+
+##### Accent
+We use the "accent" color concept for referring to our brand and the operating system (platform) accent colors. The brand and platform accent colors are used as the primary color for accentuating and characterizing several Firefox UI elements' (e.g. buttons, focus outlines, links, icons, and more).
+
+##### Interactive
+We use the "interactive" concept to describe design tokens that pertain to interactive elements. For example, `--border-interactive-color` is used on [moz-toggle](https://searchfox.org/mozilla-central/rev/956e25260926097a4d54d5aeb0e06347841616bf/toolkit/content/widgets/moz-toggle/moz-toggle.css#40) since interactive elements such as toggles, radios, and checkboxes share the same border color pattern that is different from our default border color.
+
+```css
+/* moz-toggle.css */
+--toggle-border-color: var(--border-interactive-color);
+```
+
+##### Item
+We use the "item" concept as a modifier on top of the "size" type tokens group to refer to different interface items, or elements, that often rely on the same standard width and height dimensions. The word item should imply that this is a small sizing scale dedicated for dimensions that get applied to smaller UI pieces such as icons, logos, and avatars, as opposed to large compositions or areas such as the width set for onboarding illustrations, or the width of a sidebar or main column within a page's template.
+
+```css
+/* tokens-shared.css */
+--size-item-small: 16px;
+--size-item-large: 32px;
+```
+
+#### Property
+A property (e.g. size, width, color, fill) further describes a design tokens' style, although this is not to be confused with the categorical type of token mentioned above, albeit they often use similar terms. Note that sometimes properties are double-worded, and that's totally fine (e.g. min-width, background-color)
+
+<div class="box">
+  <div class="post-it big">
+    <strong>border-radius</strong>
+  </div>
+  <div class="post-it blue big">
+    circle
+  </div>
+</div>
+
+### Modifiers
+The modifier level helps further classify a design token's characteristic with further specification.
+
+#### Variant
+A variant specifies a token from a group of tokens related by a common meaning but that have varying purpose.
+
+<div class="box vertical">
+<div class="box">
+  <div class="post-it blue big">
+    icon
+  </div>
+  <div class="post-it blue big">
+    color
+  </div>
+  <div class="post-it big">
+    <strong>success</strong>
+  </div>
+</div>
+
+<div class="box">
+  <div class="post-it blue big">
+    icon
+  </div>
+  <div class="post-it blue big">
+    color
+  </div>
+  <div class="post-it big">
+    <strong>critical</strong>
+  </div>
+</div>
+</div>
+
+#### State
+A state defines possible intereactive states of a design token.
+(e.g. hover, active, focus, disabled)
+
+<div class="box">
+  <div class="post-it blue big">
+    button
+  </div>
+  <div class="post-it blue big">
+    background-color
+  </div>
+  <div class="post-it big">
+   <strong>hover</strong>
+  </div>
+</div>
+
+#### Scale
+A scale defines a collection of tokens that relate to one another's but vary by their type, such as a collection of size units, or any other relationship that requires differentiating tokens by a determined scale.
+
+<div class="box vertical">
+<div class="box">
+  <div class="post-it blue big">
+    font-size
+  </div>
+  <div class="post-it big">
+   <strong>small</strong>
+  </div>
+</div>
+</div>
+
+Today we have scales based off a sequence of numbers or t-shirt sizing.
+
+We use a sequence numbers for collections that have attributes that change as the number goes up, such as colors getting darker.
+
+Number-based scale grows by 10:
+ * 10
+ * 20
+ * 30
+ * 40
+ * 50
+ * 60
+ * and so on...
+
+For collections that do have sizing relationships, we use t-shirt sizing names:
+
+ * xsmall
+ * small
+ * medium
+ * large
+ * xlarge
+ * xxlarge
+ * and so on...
+
+These are some of our font sizes as an example:
+
+```css
+/* tokens-brand.css */
+--font-size-root: 15px;
+--font-size-small: 0.867rem;  /* 13px */
+--font-size-large: 1.133rem;  /* 17px */
+--font-size-xlarge: 1.467rem; /* 22px */
+```
+
+You will see that the font size scale is missing what would be a logical "medium" size in between "small" and "large", and that it has a `--font-size-root` within it too; that's because we use more specific words within scales that contain tokens that serve a specific purpose within that scale.
+
+The `--font-size-root` token was created for specific use under the document's `:root` in order to set the default font size for our relative typography scale. We label our default font size token as `root` in order to be specific **and** intentional.
+
+<div class="box">
+  <div class="post-it blue big">
+    font-size
+  </div>
+  <div class="post-it big">
+   <strong>root</strong>
+  </div>
+</div>
+
+Just like the specific HTML term 'root', we tend to include the term 'default' on scales in order to identify values that are used as a default, or at the global level (`:root` or `body` tag):
+
+<div class="box">
+  <div class="post-it blue big">
+    font-weight
+  </div>
+  <div class="post-it big">
+   <strong>default</strong>
+  </div>
+</div>
+
+It's okay to include intentional terms within scales that better represent the meaning of a value and when to use it. For example, our border radius collection, which uses t-shirt sizing, also mixes the 'circle' option within its scale in order to describe a border radius that will create a circular effect:
+
+<div class="box">
+  <div class="post-it blue big">
+    border-radius
+  </div>
+  <div class="post-it big">
+    <strong>circle</strong>
+  </div>
+</div>
+
+
+## Naming guidelines
+The goal of design tokens naming is modularity and legibility.
+
+<div class="box container-width-large">
+  <div class="box vertical">
+    <b>Ecosystem</b>
+      Domain
+    <div class="post-it big green">brand</div>
+  </div>
+  <div class="box">
+    <div class="box vertical">
+      <b>Category</b>
+      <div class="box">
+        <div class="box vertical">
+           Type
+          <div class="post-it big orange">color</div>
+        </div>
+        <div class="box vertical">
+          Concept
+        <div class="post-it big orange">accent</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+Meanings and the relationship between meanings can be complex, therefore taxonomy levels are chained to provide clarity. (see example above)
+
+The example above also helps illustrate that not all levels are required when naming a token. A name just needs enough levels to imply the token's use and define its meaning. Different combinations of different levels helps us arrive at meaningful names.
+
+Names shouldn't be redundant and should be kept simple. They should only include enough levels to describe and communicate the token's intent and purpose.
+
+## How it works
+The desktop tokens system serves our browser's two different ecosystems, the chrome and in-content (about:) pages, since they don't always share the same styling decisions, and consequently, values.
+
+The chrome of the browser is styled to look and feel like it belongs to the user's operating system, and to also support theming. Therefore typography and color rules are different from the rest of our application features that load within in-content pages.
+
+### Token files
+Token files are stored in the [design-system](https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system) folder within `toolkit/themes/shared`.
+
+Tokens are split between three stylesheets: brand, platform, and shared.
+
+```sh
+└── toolkit
+    └── themes
+        └── shared
+            └── design-system
+                ├── tokens-brand.css
+                ├── tokens-platform.css
+                └── tokens-shared.css
+```
+
+A token's context is the key to understanding the relationship between these stylesheets. If a token isn't set at the shared level, that means that it has different values between brand and platform contexts.
+
+Shared tokens ([tokens-shared.css](https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-shared.css)) are imported into brand tokens ([tokens-brand.css](https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-brand.css)) and platform tokens ([tokens-platform.css](https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-platform.css)).
+
+[common-shared.css](https://searchfox.org/mozilla-central/source/toolkit/themes/shared/in-content/common-shared.css) imports `tokens-brand.css` so that in-content/about: pages can make use of our brand values, while [global-shared.css](https://searchfox.org/mozilla-central/source/toolkit/themes/shared/global-shared.css), which styles the chrome, imports `tokens-platform.css` so that the chrome can access operating system and themeable values.
+
+<div class="box">
+  <div class="box vertical">
+    <div class="box vertical align-center">
+      <div class="post-it big">
+        <a title="tokens-shared.css" href="https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-shared.css">tokens-shared.css</a>
+      </div>
+    </div>
+    <div class="box justify-center">
+      ↙ ↘
+    </div>
+    <div class="box justify-center">
+      <div class="box vertical">
+        <div class="post-it big">
+          <a title="tokens-brand.css" href="https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-brand.css">tokens-brand.css</a>
+        </div>
+        <div class="box justify-center">
+            ↓
+        </div>
+      </div>
+      <div class="box vertical">
+        <div class="post-it big">
+          <a title="tokens-platform.css" href="https://searchfox.org/mozilla-central/source/toolkit/themes/shared/design-system/tokens-platform.css">tokens-platform.css</a>
+        </div>
+        <div class="box justify-center">
+            ↓
+        </div>
+      </div>
+    </div>
+    <div class="box justify-center">
+      <div class="box vertical">
+        <div class="post-it orange big">
+          <a title="common-shared.css" href="https://searchfox.org/mozilla-central/source/toolkit/themes/shared/in-content/common-shared.css">common-shared.css</a>
+        </div>
+        <div class="box justify-center">
+          ↓
+        </div>
+      </div>
+      <div class="box vertical">
+        <div class="post-it orange big">
+          <a title="global-shared.css" href="https://searchfox.org/mozilla-central/source/toolkit/themes/shared/global-shared.css">global-shared.css</a>
+        </div>
+        <div class="box justify-center">
+          ↓
+        </div>
+      </div>
+    </div>
+    <div class="box justify-center">
+      <div class="post-it blue big">
+        Styles in-content (about:) pages
+      </div>
+      <div class="post-it blue big">
+        Styles the chrome
+      </div>
+    </div>
+  </div>
+</div>
+
+#### Brand
+Tokens specific to the brand, such as colors, and typographical styles. Used within domains that rely on brand values.
+
+For example, we use the brand's accent color under brand contexts (in-content/about: pages):
+```css
+/* tokens-brand.css */
+--color-accent-primary: var(--brand-color-accent);
+--brand-color-accent: light-dark(var(--color-blue-50), var(--color-cyan-50));
+```
+
+#### Platform
+Tokens used within the browser chrome that come from the user’s operating system, such as colors and fonts.
+
+For example, we use the system's accent color under platform contexts (chrome):
+```css
+/* tokens-platform.css */
+--color-accent-primary: var(--platform-color-accent);
+--platform-color-accent: AccentColor;
+```
+
+#### Shared
+Tokens used and shared between brand and platform contexts.
+
+For example, both the chrome and in-content pages make use of the same border-radius patterns:
+```css
+/* tokens-shared.css */
+--border-radius-small: 4px;
+```
+
+### Tiers
+#### Base
+Base design tokens act as the foundation for the design tokens collection. This tier defines our collection of raw styles that are used to form our semantic design token names. These tokens should not be used directly for styling UI as they don’t carry any meaning and just serve as a base for the design tokens structure.
+
+```css
+/* tokens-shared.css */
+--color-blue-50: #0060df;
+--color-blue-60: #0250bb;
+--color-blue-70: #054096;
+```
+
+#### Application
+Application design tokens represent the collection of semantic design tokens that actually give proper meaning to style choices. This tier relies on the agreement of the name and meaning behind these styles and their values.
+
+```css
+/* tokens-brand.css */
+--brand-color-accent: var(--color-blue-50);
+```
+
+#### Component
+Component is the final tier. This tier is used in order to give meaning to identified style choices made within user interface components. While the "Application" tier can handle most if not all styling use cases, tier 3 helps encapsulate style decisions at the component level.
+
+Component-level tokens should live at the component-level file (e.g. [moz-toggle.css](https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/toolkit/content/widgets/moz-toggle/moz-toggle.css#34-50)), so that they can't be used outside of that specific component's domain.
+
+```css
+/* moz-toggle.css */
+--toggle-background-color-pressed: var(--brand-color-accent);
+```
+
+### File structure
+Design token files are structured for organization and consumption purposes.
+
+Token groups should be listed by alphabetical order:
+Border, Color, Font Weight...
+
+A comment heading should be added above each token group with its name:
+```css
+/** Color **/
+--color-white: #ffffff;
+--color-blue-05: #deeafc;
+--color-blue-30: #73a7f3;
+...
+```
+
+Design tokens should be listed by alphabetical order:
+```css
+/** 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;
+```
+
+Scale groups should be listed from the beginning to the end of the scale (i.e. smallest to largest value).
+Any semantic tokens within a scale, such as the `--font-size-root` example below, can be listed above it:
+
+```css
+/** Font size **/
+--font-size-root: 15px;
+--font-size-small: 0.867rem;  /* 13px */
+--font-size-large: 1.133rem;  /* 17px */
+--font-size-xlarge: 1.467rem; /* 22px */
+--font-size-xxlarge: 2.2rem;  /* 33px */
+```
+
+[Base](#base) tokens should be listed at the top of the file, with a heading indicating that they are Base:
+```css
+/* Base tokens */
+/* Do not use base tokens directly. Their names don't carry any specific meaning, and they are simply used to set foundations. Refer to Application tokens below. */
+/** Color **/
+--color-white: #ffffff;
+--color-blue-05: #deeafc;
+--color-blue-30: #73a7f3;
+...
+```
+
+[Application](#application) tokens should be added after Base tokens, accompanied by its own heading as well:
+```css
+/* Application tokens */
+/** Border **/
+--border-radius-circle: 9999px;
+--border-radius-small: 4px;
+--border-width: 1px;
+...
+```
+
+## Theming
+
+For certain components, their high-contrast mode design will need styles that other modes do not (e.g. HCM relies on borders that do not exist in non-HCM). In those instances, we just add tokens under the high contrast mode media query rules. On the other hand, if something such as a color, does not apply to HCM contexts, then we add those design tokens under a "@media not (prefers-contrast)" query.
+
+### Light and dark
+We rely on the [light-dark()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)  CSS function to set light and dark mode colors at the token assignment level.
+
+
+```css
+/* tokens-shared.css */
+--icon-color: light-dark(var(--color-gray-70), var(--color-gray-05));
+```
+
+### High contrast mode
+We rely on two queries for assigning HCM counterpart variables, @media (prefers-contrast) and @media (forced-colors). They are found at the bottom of [tokens-shared.css](https://searchfox.org/mozilla-central/rev/6eb2ebcafb1b4a8576eb513e6cd2c61e3f3ae6dc/toolkit/themes/shared/design-system/tokens-shared.css#109).
+
+<!-- This part of the documentation will link to Bug 1863436 once it lands -->
+
+## Help and support
+If you have any questions, concerns, or feedback, and if this document has not answered something specific, please reach out to Desktop Theme Reviewers or Reusable Components Reviewers.
+
+The Reusable Components team can be found on Matrix at [#reusable-components](https://matrix.to/#/#reusable-components:mozilla.org), and theme reviewers can be found at [#fx-theme-reviewers](https://matrix.to/#/#fx-desktop-theme:mozilla.org). You're also welcome to request info from any of us on Bugzilla.
+
+Tag us on your Phabricator patch via **#desktop-theme-reviewers** and **#reusable-components-reviewers**.
+
+Internal only: we are also on Mozilla's internal Slack at [#acorn-design-tokens](https://app.slack.com/client/T027LFU12/C046F5U05M1). This channel is dedicated to our design token working group. We also host weekly open-discussion sessions on Zoom; please reach out if you'd like an invite to the meeting.
+
+## Contributing
+For proposing contributions to [design token files](#token-files), please [file a bug under the Theme component](https://bugzilla.mozilla.org/enter_bug.cgi?product=Toolkit&component=Themes).
+
+If any feature work may require a change or addition to token files, filing a follow-up bug is recommended.
+
+Token file changes or additions should be handled with their own bug and patch. Please add a detailed commit message following this changelog format:
+
+```markdown
+Added
+* ...
+
+Changed
+* ...
+
+Deprecated
+* ...
+
+Removed
+* ...
+
+Fixed
+* ...
+```
+
+Teams that generate component and feature specific tokens are welcome to [reach out to theme and reusable components reviewers for support](#help-and-support).
diff --git a/toolkit/themes/shared/design-system/text-and-typography.css b/toolkit/themes/shared/design-system/text-and-typography.css
new file mode 100644
index 0000000000..123847fe8b
--- /dev/null
+++ b/toolkit/themes/shared/design-system/text-and-typography.css
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Typography scale */
+:root {
+  font: message-box;
+}
+
+h1,
+.heading-xlarge {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-xxlarge);
+}
+
+h2,
+.heading-large {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-xlarge);
+}
+
+h3,
+.heading-medium {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-large);
+}
+
+/* Text helpers */
+.text-deemphasized {
+  font-size: var(--font-size-small);
+  color: var(--text-color-deemphasized);
+}
+
+.text-error {
+  color: var(--text-color-error);
+  font-weight: var(--font-weight-bold);
+}
+
+.text-truncated-ellipsis {
+  /* Will not work on `display: flex` items
+    unless you wrap its contents with another element that has this class. */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/toolkit/themes/shared/design-system/tokens-brand.css b/toolkit/themes/shared/design-system/tokens-brand.css
new file mode 100644
index 0000000000..ac105d9767
--- /dev/null
+++ b/toolkit/themes/shared/design-system/tokens-brand.css
@@ -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/. */
+
+@import url("chrome://global/skin/design-system/tokens-shared.css");
+
+:root,
+:host(.anonymous-content-host) {
+  /** Font size **/
+  --font-size-root: 15px;       /* Set at the `:root`. Do not use */
+  --font-size-small: 0.867rem;  /* 13px */
+  --font-size-large: 1.133rem;  /* 17px */
+  --font-size-xlarge: 1.467rem; /* 22px */
+  --font-size-xxlarge: 1.6rem;  /* 24px */
+}
+
+@media not (prefers-contrast) {
+  :root,
+  :host(.anonymous-content-host) {
+    /** Border **/
+    --border-interactive-color: light-dark(var(--color-gray-60), var(--color-gray-50));
+
+    /** 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);
+
+    /** Link **/
+    --link-color: var(--brand-color-accent);
+    --link-color-hover: var(--brand-color-accent-hover);
+    --link-color-active: var(--brand-color-accent-active);
+    --link-color-visited: var(--link-color);
+
+    /** 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: light-dark(var(--color-blue-50), var(--color-cyan-50));
+    --brand-color-accent-hover: light-dark(var(--color-blue-60), var(--color-cyan-30));
+    --brand-color-accent-active: light-dark(var(--color-blue-70), var(--color-cyan-20));
+    --color-canvas: light-dark(var(--color-white), var(--color-gray-90));
+
+    /** Text **/
+    --text-color: light-dark(var(--color-gray-100), var(--color-gray-05));
+    --text-color-deemphasized: light-dark(
+      color-mix(in srgb, currentColor 69%, transparent),
+      color-mix(in srgb, currentColor 75%, transparent)
+    );
+  }
+}
diff --git a/toolkit/themes/shared/design-system/tokens-platform.css b/toolkit/themes/shared/design-system/tokens-platform.css
new file mode 100644
index 0000000000..e7897d11b0
--- /dev/null
+++ b/toolkit/themes/shared/design-system/tokens-platform.css
@@ -0,0 +1,43 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://global/skin/design-system/tokens-shared.css");
+
+@media not (prefers-contrast) {
+  :root,
+  :host(.anonymous-content-host) {
+    /** 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(--platform-color-accent);
+    --color-accent-primary-hover: var(--platform-color-accent-hover);
+    --color-accent-primary-active: var(--platform-color-accent-active);
+    --platform-color-accent: var(--button-primary-bgcolor, AccentColor);
+    --platform-color-accent-hover: var(--button-primary-hover-bgcolor);
+    --platform-color-accent-active: var(--button-primary-active-bgcolor);
+    --color-canvas: Canvas;
+
+    /** Font size **/
+    --font-size-root: unset;
+    --font-size-small: unset;
+    --font-size-large: unset;
+    --font-size-xlarge: unset;
+    --font-size-xxlarge: unset;
+
+    /** Link **/
+    --link-color: LinkText;
+    --link-color-hover: LinkText;
+    --link-color-active: ActiveText;
+    --link-color-visited: var(--link-color);
+
+    /** Text **/
+    --text-color: currentColor;
+  }
+}
diff --git a/toolkit/themes/shared/design-system/tokens-shared.css b/toolkit/themes/shared/design-system/tokens-shared.css
new file mode 100644
index 0000000000..5d62fb8bbe
--- /dev/null
+++ b/toolkit/themes/shared/design-system/tokens-shared.css
@@ -0,0 +1,190 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:root,
+:host(.anonymous-content-host) {
+  /* Base tokens */
+  /* Do not use base tokens directly as they don't carry any meaning and are used to set our base. Refer to Application tokens below. */
+  /** Color **/
+  --color-white: #ffffff;
+  --color-black-a10: rgba(0, 0, 0, 0.1);
+  --color-blue-05: #deeafc;
+  --color-blue-30: #73a7f3;
+  --color-blue-50: #0060df;
+  --color-blue-60: #0250bb;
+  --color-blue-70: #054096;
+  --color-blue-80: #003070;
+  --color-cyan-20: #aaf2ff;
+  --color-cyan-30: #80ebff;
+  --color-cyan-50: #00ddff;
+  --color-gray-05: #fbfbfe;
+  --color-gray-50: #bfbfc9;
+  --color-gray-60: #8f8f9d;
+  --color-gray-70: #5b5b66;
+  --color-gray-80: #23222b;
+  --color-gray-90: #1c1b22;
+  --color-gray-100: #15141a;
+  --color-green-05: #d8eedc;
+  --color-green-30: #4dbc87;
+  --color-green-50: #017a40;
+  --color-green-80: #004725;
+  --color-red-05: #ffe8e8;
+  --color-red-20: #ff9aa2;
+  --color-red-30: #f37f98;
+  --color-red-50: #d7264c;
+  --color-red-80: #690f22;
+  --color-yellow-05: #ffebcd;
+  --color-yellow-30: #e49c49;
+  --color-yellow-50: #cd411e;
+  --color-yellow-80: #5a3100;
+
+  /* Application tokens */
+  /** Border **/
+  --border-radius-circle: 9999px;
+  --border-radius-small: 4px;
+  --border-radius-medium: 8px;
+  --border-width: 1px;
+
+  /** Box **/
+  --box-background-color: light-dark(var(--color-white), var(--color-gray-80));
+  --box-shadow-10: 0 1px 4px var(--color-black-a10);
+
+  /** Font weight **/
+  --font-weight-default: normal;
+  --font-weight-bold: 600;
+
+  /** 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;
+
+  /** Input **/
+  /*** Button ***/
+  --button-border-radius: var(--border-radius-small);
+  --button-font-weight: var(--font-weight-bold);
+  --button-line-height: var(--line-height-small);
+  --button-min-height: var(--size-item-large);
+
+  /*** Checkbox ***/
+  --checkbox-margin-inline: var(--space-small);
+  /* TODO Bug 1876537: Make this em-based, probably? */
+  --checkbox-size: var(--size-item-small);
+
+  /*** Text ***/
+  --input-text-line-height: var(--button-line-height);
+  --input-text-min-height: var(--button-min-height);
+
+  /** Link **/
+  /* Not using --focus-outline-offset for links because that's intended for
+    elements with a background, and we only want a slight offset here while not
+    overlapping adjacent text. */
+  --link-focus-outline-offset: 1px;
+
+  /** Text **/
+  --text-color-deemphasized: color-mix(in srgb, currentColor 60%, transparent);
+
+  /** Size **/
+  --size-item-small: 16px;
+  --size-item-medium: 28px;
+  --size-item-large: 32px;
+
+  /** Space **/
+  --space-xxsmall: calc(0.5 * var(--space-xsmall));
+  --space-xsmall: 0.267rem;
+  --space-small: calc(2 * var(--space-xsmall));
+  --space-xlarge: calc(8 * var(--space-xsmall));
+}
+
+@media not (prefers-contrast) {
+  :root,
+  :host(.anonymous-content-host) {
+    /** Color **/
+    --color-background-information: light-dark(var(--color-blue-05), var(--color-blue-80));
+    --color-background-success: light-dark(var(--color-green-05), var(--color-green-80));
+    --color-background-warning: light-dark(var(--color-yellow-05), var(--color-yellow-80));
+    --color-background-critical: light-dark(var(--color-red-05), var(--color-red-80));
+    --color-error-outline: light-dark(var(--color-red-50), var(--color-red-20));
+
+    /** Icon **/
+    --icon-color: light-dark(var(--color-gray-70), var(--color-gray-05));
+    --icon-color-information: light-dark(var(--color-blue-50), var(--color-blue-30));
+    --icon-color-success: light-dark(var(--color-green-50), var(--color-green-30));
+    --icon-color-warning: light-dark(var(--color-yellow-50), var(--color-yellow-30));
+    --icon-color-critical: light-dark(var(--color-red-50), var(--color-red-30));
+
+    /** Text **/
+    --text-color-error: light-dark(var(--color-red-50), var(--color-red-20));
+  }
+}
+
+@media (prefers-contrast) {
+  :root,
+  :host(.anonymous-content-host) {
+    /* Border */
+    --border-color: var(--text-color);
+    --border-interactive-color: AccentColor;
+    --border-interactive-color-hover: ButtonText;
+    --border-interactive-color-active: AccentColor;
+    --border-interactive-color-disabled: GrayText;
+
+    /** Box **/
+    --box-background-color: var(--color-canvas);
+
+    /* Button */
+    --button-background-color: ButtonFace;
+    --button-background-color-hover: ButtonFace;
+    --button-background-color-active: ButtonFace;
+    --button-background-color-disabled: GrayText;
+
+    /** Link **/
+    --link-color: LinkText;
+    --link-color-hover: LinkText;
+    --link-color-active: ActiveText;
+    --link-color-visited: var(--link-color);
+
+    /** Color **/
+    --color-canvas: Canvas;
+    --color-background-information: var(--color-canvas);
+    --color-background-success: var(--color-canvas);
+    --color-background-warning: var(--color-canvas);
+    --color-background-critical: var(--color-canvas);
+    --color-accent-primary: AccentColor;
+    /* FIXME(emilio): These seem rather sketchy */
+    --color-accent-primary-hover: ButtonText;
+    --color-accent-primary-active: ButtonText;
+    --color-error-outline: var(--border-color);
+
+    /** Icon **/
+    --icon-color: var(--text-color);
+    --icon-color-information: var(--icon-color);
+    --icon-color-success: var(--icon-color);
+    --icon-color-warning: var(--icon-color);
+    --icon-color-critical: var(--icon-color);
+
+    /** Text **/
+    --text-color: CanvasText;
+    --text-color-error: inherit;
+    --text-color-deemphasized: inherit;
+  }
+
+  @media (forced-colors) {
+    /* Applies to Windows HCM only, by default.
+       TODO(emilio): These seem rather sketchy */
+    :root,
+    :host(.anonymous-content-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;
+    }
+  }
+}
diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn
new file mode 100644
index 0000000000..6f504132c2
--- /dev/null
+++ b/toolkit/themes/shared/desktop-jar.inc.mn
@@ -0,0 +1,153 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.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/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/radio.css                            (../../shared/radio.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-system/text-and-typography.css(../../shared/design-system/text-and-typography.css)
+  skin/classic/global/design-system/tokens-brand.css       (../../shared/design-system/tokens-brand.css)
+  skin/classic/global/design-system/tokens-shared.css      (../../shared/design-system/tokens-shared.css)
+  skin/classic/global/design-system/tokens-platform.css    (../../shared/design-system/tokens-platform.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-shared.css                      (../../shared/menu-shared.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/popup.css                            (../../shared/popup.css)
+  skin/classic/global/popupnotification.css                (../../shared/popupnotification.css)
+  skin/classic/global/splitter.css                         (../../shared/splitter.css)
+  skin/classic/global/toolbarbutton.css                    (../../shared/toolbarbutton.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-filled.svg               (../../shared/icons/check-filled.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/clipboard.svg                  (../../shared/icons/clipboard.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/mdn.svg                        (../../shared/icons/mdn.svg)
+  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/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/pocket-favicon.ico             (../../shared/icons/pocket-favicon.ico)
+  skin/classic/global/icons/print.svg                      (../../shared/icons/print.svg)
+  skin/classic/global/icons/undo.svg                       (../../shared/icons/undo.svg)
+  skin/classic/global/icons/rating-star.svg                (../../shared/icons/rating-star.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/sort-arrow.svg                 (../../shared/icons/sort-arrow.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-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..072678face
--- /dev/null
+++ b/toolkit/themes/shared/desktop-non-mac.jar.inc.mn
@@ -0,0 +1,27 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+# 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)
+
+  skin/classic/global/tree/sort-asc.svg                    (../../windows/global/tree/sort-asc.svg)
+  skin/classic/global/tree/sort-dsc.svg                    (../../windows/global/tree/sort-dsc.svg)
+
+% 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/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..714324929e
--- /dev/null
+++ b/toolkit/themes/shared/findbar.css
@@ -0,0 +1,191 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  findbar,
+  findbar[hidden] {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+
+findbar[noanim],
+findbar[noanim] > .findbar-container,
+findbar[noanim] > .findbar-closebutton {
+  transition-duration: 0s;
+  transition-delay: 0s;
+}
+
+.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;
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-inset);
+  }
+}
+
+.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..c478b2745e
--- /dev/null
+++ b/toolkit/themes/shared/global-shared.css
@@ -0,0 +1,352 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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-system/tokens-platform.css");
+@import url("chrome://global/skin/design-system/text-and-typography.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-separator-color: color-mix(in srgb, currentColor 25%, 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;
+  --toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent);
+
+  --toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white);
+  --toolbar-non-lwt-textcolor: -moz-dialogtext;
+  --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
+  --toolbar-color: var(--toolbar-non-lwt-textcolor);
+
+  &:-moz-lwtheme {
+    --toolbar-bgcolor: rgba(255,255,255,.4);
+    --toolbar-color: var(--lwt-text-color, inherit);
+  }
+
+  /* This color scheme should match --toolbar-color. However, note that
+   * individual toolbars might override this (see ToolbarIconColor and the
+   * brighttext attribute). */
+  --toolbar-color-scheme: light dark;
+  &[lwt-toolbar="light"] {
+    --toolbar-color-scheme: light;
+  }
+  &[lwt-toolbar="dark"] {
+    --toolbar-color-scheme: dark;
+  }
+
+  @media (prefers-contrast) {
+    /* Reduce the opacity of disabled toolbar buttons in order to increase
+       contrast with the enabled state. */
+    --toolbarbutton-disabled-opacity: 0.3;
+
+    --panel-separator-color: currentColor;
+    --toolbar-field-focus-border-color: var(--focus-outline-color);
+
+    &:not(:-moz-lwtheme) {
+      --panel-disabled-color: GrayText;
+    }
+  }
+
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+  font: message-box;
+
+  &[dialogroot] {
+    font: menu;
+  }
+}
+
+:is(menupopup, panel):where([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:-moz-lwtheme {
+  toolbar,
+  &[lwt-popup="light"] panel {
+    color-scheme: light;
+  }
+  toolbar[brighttext],
+  &[lwt-popup="dark"] panel {
+    color-scheme: dark;
+  }
+}
+
+: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: var(--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: var(--link-color);
+  cursor: pointer;
+  text-decoration: underline;
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--link-focus-outline-offset);
+    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 {
+  margin: 8px 16px 16px;
+}
+
+.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: .45em 1em;
+  min-height: var(--size-item-large);
+  font-weight: 600;
+  min-width: 0;
+  margin-inline: 8px 0;
+  margin-bottom: 0;
+
+  &.small-button {
+    margin: 0;
+    min-height: var(--size-item-medium);
+    font-size: var(--font-size-small);
+    align-items: center;
+  }
+
+  &[disabled] {
+    opacity: 0.4;
+  }
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+
+  &:not([disabled]) {
+    &:hover {
+      background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent));
+    }
+    &:hover:active {
+      background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
+    }
+    &[default],
+    &.primary {
+      color: var(--button-primary-color);
+      background-color: var(--button-primary-bgcolor);
+
+      &:hover {
+        background-color: var(--button-primary-hover-bgcolor);
+      }
+      &:hover:active {
+        background-color: var(--button-primary-active-bgcolor);
+      }
+    }
+  }
+
+  &[type=menu] > .button-box > .button-menu-dropmarker {
+    appearance: none;
+    display: flex;
+    content: url("chrome://global/skin/icons/arrow-down-12.svg");
+    -moz-context-properties: fill;
+    fill: currentColor;
+  }
+}
+
+/* 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;
+}
+
+/* Full width separator in select */
+#ContentSelectDropdown menuseparator {
+  padding-inline: 0;
+}
+
+/* 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-filled.svg b/toolkit/themes/shared/icons/check-filled.svg
new file mode 100644
index 0000000000..acc5704656
--- /dev/null
+++ b/toolkit/themes/shared/icons/check-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" width="16" height="16" fill="none">
+  <path d="M8 .5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15ZM6.825 11 4.183 8.357a.625.625 0 0 1 .885-.883l2.071 2.072 3.794-3.795a.626.626 0 0 1 .885.885L7.453 11h-.628Z" fill="context-fill"/>
+</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/clipboard.svg b/toolkit/themes/shared/icons/clipboard.svg
new file mode 100644
index 0000000000..6681b4c6ab
--- /dev/null
+++ b/toolkit/themes/shared/icons/clipboard.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.-->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+  <path fill="context-fill" fill-rule="evenodd" d="M8.75 10.25h6.5V12h-6.5v-1.75ZM8.75 14.25h3.97V16H8.75v-1.75Z"/>
+  <path fill="context-fill" fill-rule="evenodd" d="M17 3h-1.54a4 4 0 0 0-6.92 0H7a2.5 2.5 0 0 0-2.5 2.5v14A2.5 2.5 0 0 0 7 22h10a2.5 2.5 0 0 0 2.5-2.5v-14A2.5 2.5 0 0 0 17 3ZM9.5 8A1.5 1.5 0 0 1 8 6.5V4.75H7a.75.75 0 0 0-.75.75v14c0 .41.34.75.75.75h10c.41 0 .75-.34.75-.75v-14a.75.75 0 0 0-.75-.75h-1V6.5c0 .83-.67 1.5-1.5 1.5h-5ZM11 5.5v-2h2v2h-2Z"/>
+</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..ed047aa5c9
--- /dev/null
+++ b/toolkit/themes/shared/icons/edit-copy.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.035 1.25c-1 0-1.812.812-1.812 1.813h1.5c0-.173.14-.313.312-.313h5.95c.172 0 .313.14.313.313v7.65c0 .172-.14.312-.313.312v1.5c1 0 1.813-.812 1.813-1.813v-7.65c0-1-.812-1.812-1.813-1.812h-5.95z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.063 4.225c-1.001 0-1.813.812-1.813 1.813v7.65c0 1 .812 1.812 1.813 1.812h5.95c1 0 1.812-.812 1.812-1.812v-7.65c0-1.001-.812-1.813-1.813-1.813h-5.95zM2.75 6.038c0-.173.14-.313.313-.313h5.95c.172 0 .312.14.312.313v7.65c0 .172-.14.312-.313.312h-5.95a.313.313 0 0 1-.312-.312v-7.65z"/>
+</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/mdn.svg b/toolkit/themes/shared/icons/mdn.svg
new file mode 100644
index 0000000000..52dd9d923f
--- /dev/null
+++ b/toolkit/themes/shared/icons/mdn.svg
@@ -0,0 +1,10 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48 0H0V48H48V0Z" fill="#15141A"/>
+<path d="M19.2174 10.7458L11.0167 37.2165H7.64514L15.8467 10.7419L19.2174 10.7458Z" fill="white"/>
+<path d="M22.2067 10.746V37.2166H19.2241V10.746H22.2067Z" fill="white"/>
+<path d="M33.8051 10.7458L25.6044 37.2165H22.2299L30.4306 10.7419L33.8051 10.7458Z" fill="white"/>
+<path d="M36.7878 10.746V37.2166H33.8052V10.746H36.7878Z" fill="white"/>
+</svg>
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.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-favicon.ico b/toolkit/themes/shared/icons/pocket-favicon.ico
new file mode 100644
index 0000000000..c0d1e7a74b
--- /dev/null
+++ b/toolkit/themes/shared/icons/pocket-favicon.ico
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/rating-star.svg b/toolkit/themes/shared/icons/rating-star.svg
new file mode 100644
index 0000000000..c23bef36e8
--- /dev/null
+++ b/toolkit/themes/shared/icons/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/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/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/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..d123d3c3b0
--- /dev/null
+++ b/toolkit/themes/shared/in-content/common-shared.css
@@ -0,0 +1,1302 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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-system/tokens-brand.css");
+@import url("chrome://global/skin/design-system/text-and-typography.css");
+
+@namespace html "http://www.w3.org/1999/xhtml";
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+/* TODO(bug 1845150): Remove notification-message from the host selectors in
+ * this file */
+
+:host(:is(.anonymous-content-host, notification-message)),
+: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: var(--box-background-color);
+  --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-warning-icon-color: #ffa436;
+  --in-content-success-icon-color: #2ac3a2;
+  --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);
+  --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);
+
+  --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);
+
+  -moz-theme: non-native;
+  accent-color: var(--in-content-accent-color);
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :host(:is(.anonymous-content-host, notification-message)),
+  :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-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-warning-icon-color: #ffbd4f;
+    --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] {
+      --in-content-page-background: #42414d;
+    }
+  }
+}
+
+@media (prefers-contrast) {
+  :host(:is(.anonymous-content-host, notification-message)),
+  :root {
+    --in-content-page-color: CanvasText;
+    --in-content-page-background: Canvas;
+
+    --in-content-box-background-odd: var(--in-content-box-background);
+    --in-content-box-border-color: -moz-DialogText;
+    --in-content-box-info-background: var(--in-content-box-background);
+
+    --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: var(--border-color);
+
+    --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;
+  }
+}
+
+:root {
+  appearance: none;
+  background-color: var(--in-content-page-background);
+  color: var(--in-content-page-color);
+}
+
+:root:not(.system-font-size) {
+  font-size: var(--font-size-root);
+}
+
+html|body {
+  margin: 0;
+}
+
+html|hr {
+  border-style: solid none none none;
+  border-color: var(--in-content-border-color);
+}
+
+.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;
+  line-height: var(--button-line-height);
+}
+
+/* xul buttons and menulists */
+
+button,
+html|select,
+html|input[type="color"],
+xul|menulist {
+  appearance: none;
+  min-height: var(--button-min-height);
+  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;
+  line-height: var(--button-line-height);
+  padding: .45em 1em;
+  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: var(--button-font-weight);
+}
+
+/* Small buttons get sized to 6/12px padding (when adding the 1px border) */
+button.small-button {
+  padding: .25em 1em;
+  font-size: var(--font-size-small);
+  min-height: 28px;
+}
+
+/* Remove margin added by button.css */
+xul|button > .button-box > .button-text {
+  margin: 0;
+}
+
+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:where([type="color"]):focus-visible,
+xul|menulist:focus-visible,
+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]) {
+  /* 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.
+   *
+   * [------|---|---label---|dropmarker|----|------]
+   *   15px  3px                12px    4px   15px
+   * start-padding          background- end-padding
+   *                        image-width
+   *
+   * Users of this element can change the variable --logical-padding. Other
+   * variables should adjust automatically.
+   */
+  --logical-padding: 15px;
+  --start-padding: calc(var(--logical-padding) + 3px);
+  --end-padding: calc(var(--logical-padding) + 4px);
+  --background-image-width: 12px;
+  background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  background-position: right var(--end-padding) center;
+  background-repeat: no-repeat;
+  background-size: auto var(--background-image-width);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  font: inherit;
+  font-weight: 600;
+
+  /* See above for some explanation about these values. */
+  padding-inline-start: var(--start-padding);
+  padding-inline-end: calc(var(--background-image-width) + var(--end-padding));
+  text-overflow: ellipsis;
+}
+
+html|select:not([size], [multiple]):dir(rtl) {
+  background-position-x: left var(--end-padding);
+}
+
+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 > 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:where([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: var(--input-text-min-height);
+  padding-inline: 8px;
+}
+
+html|input:where([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
+html|textarea {
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: var(--input-text-line-height);
+  padding: .45em;
+  margin: 2px 4px;
+  min-height: var(--input-text-min-height);
+}
+
+html|input:where([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:where([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):user-invalid,
+html|textarea:user-invalid {
+  border-color: transparent;
+  outline: 2px solid var(--in-content-border-invalid);
+  outline-offset: -1px; /* Prevents antialising around the corners */
+}
+
+html|input:where([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 {
+  cursor: pointer;
+  color: var(--link-color);
+}
+
+html|a:visited {
+  color: var(--link-color-visited);
+}
+
+html|a:hover,
+.text-link:hover,
+button.text-link:is(:not([disabled="true"]), :enabled):hover {
+  color: var(--link-color-hover);
+}
+
+html|a:hover:active,
+.text-link:hover:active,
+button.text-link:is(:not([disabled="true"]), :enabled):hover:active {
+  color: var(--link-color-active);
+  text-decoration: none;
+}
+
+html|a:focus-visible,
+.text-link:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--link-focus-outline-offset);
+  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|*.radio-check,
+xul|*.checkbox-check,
+html|input:where([type="checkbox"], [type="radio"]) {
+  /* TODO Bug 1876537: Make this em-based, probably? */
+  height: 16px;
+  width: 16px;
+  padding: 0;
+  margin-block: var(--space-xxsmall);
+  margin-inline: 0 var(--checkbox-margin-inline);
+  flex-shrink: 0; /* avoid shrinking inside flex container */
+}
+
+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;
+}
+
+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;
+}
+
+xul|checkbox[disabled="true"] > .checkbox-label-box,
+xul|radio[disabled="true"] > .radio-label-box,
+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 {
+  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 {
+  content: 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 {
+  content: 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..6b9d5bcd70
--- /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.2rem;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.title:-moz-locale-dir(rtl),
+.title:dir(rtl) {
+  background-position: right 0;
+}
+
+.title-text {
+  font-size: 2.2rem;
+  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..c50ccda9a3
--- /dev/null
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -0,0 +1,591 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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 (prefers-contrast) {
+  .controlsSpacer,
+  .clickToPlay {
+    background-color: transparent;
+  }
+}
+
+.a11y-only {
+  position: absolute;
+  left: -10000px;
+  width: 100px;
+  height: 100px;
+}
+
+:host::cue {
+  font-size: var(--cue-font-size);
+  writing-mode: var(--cue-writing-mode, inherit);
+}
diff --git a/toolkit/themes/shared/menu-shared.css b/toolkit/themes/shared/menu-shared.css
new file mode 100644
index 0000000000..40b4fdd66c
--- /dev/null
+++ b/toolkit/themes/shared/menu-shared.css
@@ -0,0 +1,168 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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");
+
+*|*:root {
+  --menu-icon-opacity: 1;
+  --menu-arrow-width: 1em;
+
+  @media (-moz-platform: windows) {
+    --menu-arrow-width: max(1em, 16px);
+
+    @media (prefers-color-scheme: light) {
+      --menu-icon-opacity: 0.7;
+    }
+  }
+}
+
+/* Menu separator */
+
+menuseparator {
+  /* Using padding instead of margin to increase the hit area, as some
+     separators (e.g. in bookmarks menus) can be dragged or have a context
+     menu. */
+  padding-block: 4px;
+
+  @media (-moz-platform: macos) {
+    padding-block: 5px;
+    margin-inline: 9px;
+  }
+}
+
+menuseparator::before {
+  border-top: 1px solid var(--panel-separator-color);
+  content: "";
+  display: block;
+  flex: 1;
+}
+
+/* Accel text */
+
+@media not (prefers-contrast) {
+  menuitem:not([disabled]) > .menu-accel-container > :is(.menu-accel, .menu-iconic-accel) {
+    color: var(--panel-disabled-color);
+  }
+}
+
+/* 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;
+}
+
+@media (-moz-platform: windows) or (-moz-platform: linux) {
+  menupopup,
+  menubar {
+    font: menu;
+  }
+}
+
+@media (-moz-platform: macos) {
+  menupopup {
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+    font: -moz-pull-down-menu;
+  }
+}
+
+menu,
+menuitem,
+menucaption {
+  border-radius: calc(var(--panel-border-radius) / 2);
+  align-items: center;
+  flex-shrink: 0;
+  list-style-image: none;
+  max-width: 42em;
+
+  @media (-moz-platform: linux) {
+    padding: 4px 6px;
+  }
+
+  @media (-moz-platform: macos) {
+    padding: 3px 9px;
+  }
+}
+
+menu,
+menuitem {
+  &:where([disabled="true"]) {
+    color: var(--panel-disabled-color);
+    text-shadow: none;
+  }
+
+  &:where([_moz-menuactive]:not([disabled="true"])) {
+    color: -moz-menuhovertext;
+    background-color: -moz-menuhover;
+  }
+
+  &:where([_moz-menuactive="true"][disabled="true"]) {
+    background-color: -moz-menuhoverdisabled;
+  }
+}
+
+menuitem:is([default="true"], .spell-suggestion),
+menucaption {
+  font-weight: bold;
+}
+
+/* ..... menu arrow box ..... */
+
+.menu-right {
+  list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--menu-icon-opacity);
+
+  &:-moz-locale-dir(rtl) {
+    list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
+  }
+
+  > image {
+    width: var(--menu-arrow-width);
+  }
+
+  @media (-moz-platform: linux) {
+    margin-block: 0;
+    margin-inline: 6px 0;
+  }
+
+  @media (-moz-platform: macos) {
+    margin-inline: 22px -3px;
+  }
+
+  @media (-moz-platform: windows) {
+    margin-inline-end: 1em;
+  }
+}
+
+@media (-moz-platform: macos) {
+  :is(.menu-accel, .menu-iconic-accel)[value] {
+    margin-inline-start: 25px;
+  }
+}
diff --git a/toolkit/themes/shared/menulist-shared.css b/toolkit/themes/shared/menulist-shared.css
new file mode 100644
index 0000000000..fa7e68c7b7
--- /dev/null
+++ b/toolkit/themes/shared/menulist-shared.css
@@ -0,0 +1,79 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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([native]) {
+  appearance: auto;
+  -moz-default-appearance: menulist;
+  text-shadow: none;
+}
+
+:host([native][disabled="true"]) {
+  color: GrayText;
+}
+
+: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;
+  align-items: center;
+  justify-content: center;
+
+  :host(:not([native])) & {
+    font-weight: 600;
+  }
+}
+
+dropmarker {
+  pointer-events: none;
+  flex: 0;
+
+  :host(:not([native])) & {
+    display: flex;
+    appearance: none;
+    content: url(chrome://global/skin/icons/arrow-down-12.svg);
+    -moz-context-properties: fill;
+    fill: currentColor;
+  }
+}
+
+:host(:not([highlightable])) #highlightable-label,
+:host([highlightable]) #label {
+  display: none;
+}
+
+label {
+  margin: 0 3px;
+}
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..83d93ff3da
--- /dev/null
+++ b/toolkit/themes/shared/mozapps.inc.mn
@@ -0,0 +1,32 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+# 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/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..f29d68e429
--- /dev/null
+++ b/toolkit/themes/shared/pictureinpicture/player.css
@@ -0,0 +1,729 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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;
+}
+
+.seethrough-mode {
+  background: transparent;
+
+  .player-holder {
+    will-change: opacity, filter;
+    transition: opacity 160ms linear, filter 160ms linear;
+
+    body:hover:not(:fullscreen) & {
+      opacity: 0.35;
+      filter: blur(8px);
+    }
+  }
+}
+
+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: 1fr 2fr 1fr 1fr;
+  grid-template-areas: "audio audio-scrubber 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,
+.control-item:hover {
+  opacity: 1;
+}
+
+/* Background gradient is the only control item with a fixed opacity value. */
+#controls[keying] #controls-bottom-gradient,
+#controls[showing] #controls-bottom-gradient,
+#controls-bottom-gradient:hover {
+  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;
+}
+
+#audio-scrubber {
+  grid-area: audio-scrubber;
+  align-self: center;
+  width: 64px;
+  background-color: transparent;
+  padding: 6px 2px;
+  margin: 0;
+}
+
+#audio-scrubber::-moz-range-thumb {
+  border-radius: 8px;
+  background-color: #FFFFFF;
+  position: relative;
+  width: 8px;
+  height: 8px;
+  bottom: 24px;
+  padding: 0;
+}
+
+#audio-scrubber::-moz-range-track {
+  background-color: #969696;
+}
+
+#audio-scrubber::-moz-range-progress {
+  background-color: #FFFFFF;
+}
+
+#audio-scrubber,
+#audio-scrubber::-moz-range-track,
+#audio-scrubber::-moz-range-progress {
+  height: 2px;
+  border-radius: 10px;
+}
+
+#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 2px;
+}
+
+#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 (width <= 630px) {
+  #audio-scrubber {
+    display: none;
+  }
+
+  .end-controls {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-areas: "audio closedcaption fullscreen";
+  }
+}
+
+@media (width <= 475px) {
+  #closed-caption {
+    display: none;
+  }
+
+  .end-controls {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-areas: "audio fullscreen";
+  }
+}
+
+@media (height <= 325px) and (width > 630px) {
+  #closed-caption {
+    display: none;
+  }
+
+  .end-controls {
+    grid-template-columns: 1fr 2fr 1fr;
+    grid-template-areas: "audio audio-scrubber fullscreen";
+  }
+}
+
+@media (height <= 325px) and (width <= 630px) {
+  #closed-caption,
+  #audio-scrubber {
+    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/popup.css b/toolkit/themes/shared/popup.css
new file mode 100644
index 0000000000..ddc41a66ed
--- /dev/null
+++ b/toolkit/themes/shared/popup.css
@@ -0,0 +1,131 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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");
+
+/* ::::: menupopup ::::: */
+
+menupopup,
+panel {
+  /* We can always render in the preferred color scheme (unless otherwise
+   * overridden). */
+  color-scheme: light dark;
+
+  min-width: 1px;
+  --panel-background: Menu;
+  --panel-color: MenuText;
+  --panel-padding-block: 4px;
+  --panel-padding: var(--panel-padding-block) 0;
+  --panel-border-radius: 4px;
+  --panel-border-color: ThreeDShadow;
+  --panel-width: initial;
+
+  --panel-shadow-margin: 0px;
+  --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0,0%,0%,.2);
+  -moz-window-input-region-margin: var(--panel-shadow-margin);
+  margin: calc(-1 * var(--panel-shadow-margin));
+
+  /* Panel design token theming */
+  --color-canvas: var(--panel-background);
+
+  @media (-moz-platform: linux) {
+    --panel-border-radius: 8px;
+    --panel-padding-block: 3px;
+
+    @media (prefers-contrast) {
+      --panel-border-color: color-mix(in srgb, currentColor 60%, transparent);
+    }
+  }
+
+  @media (-moz-platform: linux) or (-moz-platform: windows) {
+    /* To account for the box-shadow below */
+    --panel-shadow-margin: 4px;
+  }
+
+  @media (-moz-platform: macos) {
+    appearance: auto;
+    -moz-default-appearance: menupopup;
+    /* We set the default background here, rather than on ::part(content),
+     * because otherwise it'd interfere with the native look. Non-native-looking
+     * popups should get their background via --panel-background */
+    background-color: Menu;
+    --panel-background: none;
+    --panel-border-color: transparent;
+    /* This should be kept in sync with GetMenuMaskImage() */
+    --panel-border-radius: 6px;
+  }
+
+  &::part(content) {
+    display: flex;
+    box-sizing: border-box;
+
+    padding: var(--panel-padding);
+    color: var(--panel-color);
+    background: var(--panel-background);
+    border-radius: var(--panel-border-radius);
+    border: 1px solid var(--panel-border-color);
+    width: var(--panel-width);
+    box-shadow: var(--panel-shadow);
+    margin: var(--panel-shadow-margin);
+
+    min-width: 0;
+    min-height: 0;
+
+    /* Makes popup constraints work. Round up to avoid subpixel rounding
+     * causing overflow, see bug 1846050 */
+    max-height: round(up, 100% - 2 * var(--panel-shadow-margin), 1px);
+    max-width: round(up, 100% - 2 * var(--panel-shadow-margin), 1px);
+
+    overflow: clip; /* Don't let panel content overflow the border */
+  }
+
+  &[orient=vertical]::part(content) {
+    flex-direction: column;
+  }
+
+  /* ::::: arrow panel ::::: */
+
+  &:where([type="arrow"]) {
+    appearance: none;
+    background-color: transparent;
+
+    &.panel-no-padding::part(content) {
+      padding: 0;
+    }
+  }
+}
+
+menupopup {
+  /* Also apply the padding in the inline axis for menus */
+  --panel-padding: var(--panel-padding-block);
+
+  @media (-moz-platform: windows) {
+    > menu,
+    > menuitem {
+      padding-block: 0.5em;
+      padding-inline-start: 1em;
+    }
+  }
+
+  > menu > menupopup {
+    /* Vertically align nested menupopups: the shadow plus the top padding plus top border */
+    margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--panel-padding-block) + 1px));
+  }
+}
+
+/* Rules for popups associated with menulists */
+menulist > menupopup {
+  min-width: 0;
+
+  @media (-moz-platform: windows) {
+    font: inherit;
+  }
+
+  @media (-moz-platform: macos) {
+    &:not([position]) {
+      margin-inline-start: -13px;
+      margin-top: -1px;
+    }
+  }
+}
diff --git a/toolkit/themes/shared/popupnotification.css b/toolkit/themes/shared/popupnotification.css
new file mode 100644
index 0000000000..6b795bfdd5
--- /dev/null
+++ b/toolkit/themes/shared/popupnotification.css
@@ -0,0 +1,132 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.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;
+}
+
+.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 {
+  appearance: none;
+  display: flex;
+  content: 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/radio.css b/toolkit/themes/shared/radio.css
new file mode 100644
index 0000000000..b086ae7c3f
--- /dev/null
+++ b/toolkit/themes/shared/radio.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/. */
+
+/* ===== radio.css ===================================================
+  == Styles used by the XUL radio element.
+  ======================================================================= */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* ::::: radio ::::: */
+
+radio {
+  align-items: center;
+  margin: 2px 4px;
+
+  @media (-moz-platform: windows) {
+    padding-block: 1px;
+    padding-inline: 4px 2px;
+  }
+
+  &[disabled="true"] {
+    color: GrayText;
+  }
+}
+
+.radio-label {
+  margin: 0;
+}
+
+.radio-check {
+  appearance: auto;
+  -moz-default-appearance: radio;
+  margin: 1px 0;
+
+  radiogroup:focus-visible > radio[focused] > & {
+    outline-style: auto;
+  }
+
+  @media (-moz-platform: windows) {
+    width: 13px;
+    height: 13px;
+  }
+
+  @media (-moz-platform: linux) {
+    margin: 2px;
+  }
+
+  @media (-moz-platform: macos) {
+    width: 1.3em;
+    height: 1.3em;
+    margin: 0 1px 1px;
+    /* vertical-align tells native theming where to snap to. However, this
+     * doesn't always work reliably because of bug 503833. */
+    vertical-align: bottom;
+  }
+}
+
+@media (-moz-platform: windows) or (-moz-platform: linux) {
+  radiogroup:focus-visible > radio[focused="true"] > .radio-label-box {
+    outline: var(--focus-outline);
+  }
+
+  .radio-icon[src] {
+    margin-inline-end: 2px;
+  }
+}
+
+@media (-moz-platform: windows) {
+  .radio-label-box {
+    margin-inline-start: 2px;
+    padding-bottom: 1px;
+    padding-inline-start: 1px;
+  }
+}
+
+@media (-moz-platform: macos) {
+  .radio-label,
+  radiogroup {
+    margin: 1px 0;
+  }
+
+  .radio-icon {
+    margin-inline-end: 2px;
+  }
+}
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-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/splitter.css b/toolkit/themes/shared/splitter.css
new file mode 100644
index 0000000000..7167c759bd
--- /dev/null
+++ b/toolkit/themes/shared/splitter.css
@@ -0,0 +1,75 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* ===== splitter.css ===================================================
+  == Styles used by the XUL splitter element.
+  ======================================================================= */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* ::::: splitter (vertical) ::::: */
+
+splitter {
+  align-items: center;
+  justify-content: center;
+  cursor: ew-resize;
+
+  @media (-moz-platform: linux) {
+    appearance: auto;
+    -moz-default-appearance: splitter;
+  }
+  @media (-moz-platform: macos) {
+    min-width: 9px;
+    min-height: 9px;
+  }
+  @media (-moz-platform: windows) {
+    border-width: 0 1px;
+    border-style: solid;
+    border-inline-start-color: ThreeDHighlight;
+    border-inline-end-color: ThreeDShadow;
+    min-width: 6px;
+    background-color: ThreeDFace;
+  }
+}
+
+splitter[state="collapsed"][collapse="before"],
+splitter[state="collapsed"][substate="before"],
+splitter[state="collapsed"][collapse="after"]:-moz-locale-dir(rtl),
+splitter[state="collapsed"][substate="after"]:-moz-locale-dir(rtl) {
+  cursor: e-resize;
+}
+
+splitter[state="collapsed"][collapse="after"],
+splitter[state="collapsed"][substate="after"],
+splitter[state="collapsed"][collapse="before"]:-moz-locale-dir(rtl),
+splitter[state="collapsed"][substate="before"]:-moz-locale-dir(rtl) {
+  cursor: w-resize;
+}
+
+/* ::::: splitter (horizontal) ::::: */
+
+splitter[orient="vertical"] {
+  cursor: ns-resize;
+
+  @media (-moz-platform: windows) {
+    border-width: 1px 0;
+    border-top-color: ThreeDHighlight;
+    border-bottom-color: ThreeDShadow;
+    min-height: 6px;
+  }
+}
+
+splitter[orient="vertical"][state="collapsed"][collapse="before"],
+splitter[orient="vertical"][state="collapsed"][substate="before"] {
+  cursor: s-resize;
+}
+
+splitter[orient="vertical"][state="collapsed"][collapse="after"],
+splitter[orient="vertical"][state="collapsed"][substate="after"] {
+  cursor: n-resize;
+}
+
+splitter[disabled="true"] {
+  cursor: default !important;
+}
diff --git a/toolkit/themes/shared/toolbarbutton.css b/toolkit/themes/shared/toolbarbutton.css
new file mode 100644
index 0000000000..5bcb9ecb7d
--- /dev/null
+++ b/toolkit/themes/shared/toolbarbutton.css
@@ -0,0 +1,106 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+toolbarbutton {
+  appearance: auto;
+  -moz-default-appearance: toolbarbutton;
+  background-color: transparent;
+  margin: 0;
+  padding: 3px;
+
+  @media (-moz-platform: macos) {
+    appearance: none;
+    margin-inline: 2px;
+    padding-inline: 2px;
+  }
+
+  @media (-moz-platform: windows) {
+    &:focus-visible {
+      outline: var(--default-focusring);
+      outline-offset: calc(-1 * var(--default-focusring-width) - 1px);
+    }
+  }
+
+  @media (-moz-platform: linux) {
+    &:where(:hover) {
+      color: -moz-buttonhovertext;
+    }
+    &:where([checked="true"], :hover:active, [open="true"]) {
+      color: ButtonText;
+    }
+  }
+
+  &:where([disabled="true"]) {
+    color: GrayText;
+    text-shadow: none;
+  }
+}
+
+.toolbarbutton-text {
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+}
+
+/* ::::: toolbarbutton menu ::::: */
+
+.toolbarbutton-menu-dropmarker,
+.toolbarbutton-combined-buttons-dropmarker {
+  appearance: none;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.toolbarbutton-menu-dropmarker {
+  content: url("chrome://global/skin/icons/arrow-down-12.svg");
+}
+
+.toolbarbutton-combined-buttons-dropmarker {
+  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+}
+
+/* ::::: toolbarbutton badged ::::: */
+
+.toolbarbutton-badge {
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  background-color: #d90000;
+  font-size: 10px;
+  padding: 0 2px 1px;
+  color: #fff;
+  text-shadow: none;
+  border-radius: 2px;
+  box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
+              0 -1px 0 hsla(0, 0%, 0%, .1) inset,
+              0 1px 0 hsla(206, 50%, 10%, .2);
+  margin: -5px 0 0 !important;
+  margin-inline-end: -4px !important;
+  min-width: 14px;
+  max-width: 20px;
+  line-height: 10px;
+  text-align: center;
+  align-self: start;
+  justify-self: end;
+
+  @media (-moz-platform: windows) {
+    font-weight: bold;
+  }
+  @media (-moz-platform: macos) {
+    font-size: 9px;
+    padding-top: 1px;
+  }
+}
+
+@media not (-moz-platform: macos) {
+  .toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) {
+    margin-inline-end: 0;
+  }
+}
+
+@media (-moz-platform: macos) {
+  toolbar[mode="icons"] > *|* > .toolbarbutton-badge {
+    margin-inline-end: -10px !important;
+  }
+}
diff --git a/toolkit/themes/shared/tree.css b/toolkit/themes/shared/tree.css
new file mode 100644
index 0000000000..9c56af4db4
--- /dev/null
+++ b/toolkit/themes/shared/tree.css
@@ -0,0 +1,281 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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;
+  @media (-moz-platform: linux) {
+    appearance: none;
+    border: 1px solid ThreeDShadow;
+  }
+}
+
+/* ::::: 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 not (prefers-contrast) {
+  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;
+  background-color: -moz-ColHeader;
+  color: -moz-ColHeaderText;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  margin: 0;
+  border-inline-start: 1px solid ThreeDLightShadow;
+
+  @media (-moz-platform: linux) or ((-moz-platform: windows) and (prefers-color-scheme: dark)) {
+    appearance: none;
+    box-shadow: inset 0 -1px ThreeDLightShadow;
+  }
+
+  &:where(:hover) {
+    background-color: -moz-ColHeaderHover;
+    color: -moz-ColHeaderHoverText;
+  }
+  &:where(:hover:active) {
+    background-color: -moz-ColHeaderActive;
+    color: -moz-ColHeaderActiveText;
+  }
+}
+
+.treecol-text {
+  margin: 0 !important;
+}
+
+treecol:where([ordinal="1"]) {
+  border-inline-start: none;
+}
+
+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 not (-moz-platform: macos) {
+  /* ::::: sort direction indicator :::::  */
+  .treecol-sortdirection {
+    list-style-image: url("chrome://global/skin/tree/sort-asc.svg");
+    -moz-context-properties: fill;
+    fill: currentColor;
+    visibility: hidden;
+
+    treecol[sortDirection="ascending"]:not([hideheader="true"]) > & {
+      visibility: inherit;
+    }
+
+    treecol[sortDirection="descending"]:not([hideheader="true"]) > & {
+      visibility: inherit;
+      list-style-image: url("chrome://global/skin/tree/sort-dsc.svg");
+    }
+  }
+}
+
+@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;
+  }
+}