From 7772ba544ec39b761c35be6a95adc80b69293393 Mon Sep 17 00:00:00 2001
From: Tim Nguyen <ntim.bugs@gmail.com>
Date: Mon, 5 Apr 2021 16:29:18 +0000
Subject: [PATCH] Bug 1701448 - Tweak in-content page styling further for
 Proton. r=desktop-theme-reviewers,dao

* Update green color used for success
* Fix actions menulist alignment
* Make various elements use new accent colors
* Fix lack of border on HTML checkboxes
* Update various colors to proton colors
* Update input border-radius to 2px
* Update border colors

Differential Revision: https://phabricator.services.mozilla.com/D110033
---
 .../content/components/login-item.css         | 24 ++---
 .../content/components/login-list.css         | 18 ++--
 .../components/preferences/privacy.inc.xhtml  |  6 +-
 .../themes/linux/preferences/applications.css | 40 ---------
 .../themes/osx/preferences/applications.css   | 30 -------
 browser/themes/shared/aboutSessionRestore.css | 26 +++---
 browser/themes/shared/aboutWelcomeBack.css    | 24 ++---
 .../themes/shared/preferences/containers.css  |  2 +-
 .../shared/preferences/no-search-bar.svg      |  3 +-
 .../shared/preferences/preferences.inc.css    | 46 ++++++----
 browser/themes/shared/preferences/privacy.css | 27 ++----
 .../themes/shared/preferences/search-bar.svg  |  4 +-
 .../privatebrowsing/aboutPrivateBrowsing.css  |  1 +
 .../windows/preferences/applications.css      | 39 --------
 .../startup/aboutdevtools/aboutdevtools.css   |  1 -
 .../content/components/list-item.css          |  5 +-
 toolkit/content/aboutTelemetry.css            |  7 +-
 .../extensions/content/aboutaddons.css        |  6 +-
 toolkit/themes/linux/global/menulist.css      |  2 +-
 toolkit/themes/linux/global/richlistbox.css   |  2 +-
 toolkit/themes/osx/global/menulist.css        |  2 +-
 toolkit/themes/osx/global/richlistbox.css     |  2 +-
 toolkit/themes/shared/aboutNetworking.css     |  2 +-
 toolkit/themes/shared/icons/radio.svg         |  2 +-
 .../themes/shared/in-content/common.inc.css   | 89 +++++++++++++------
 toolkit/themes/windows/global/menulist.css    |  2 +-
 toolkit/themes/windows/global/richlistbox.css |  2 +-
 27 files changed, 177 insertions(+), 237 deletions(-)

diff --git a/browser/components/aboutlogins/content/components/login-item.css b/browser/components/aboutlogins/content/components/login-item.css
index c5d91a6f8b47..7d244daa74e7 100644
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -8,17 +8,27 @@
   --reveal-checkbox-opacity: .8;
   --reveal-checkbox-opacity-hover: .6;
   --reveal-checkbox-opacity-active: 1;
-  --success-color: #00c100;
+  --success-color: #2AC3A2;
   --edit-delete-button-color: #4a4a4f;
 }
 
 /* Only overwrite the deemphasized text color in non-dark mode. */
-@media not all and (prefers-color-scheme: dark) {
+@media not (prefers-color-scheme: dark) {
   :host {
     --in-content-deemphasized-text: #737373;
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  :host {
+    --reveal-checkbox-opacity: .8;
+    --reveal-checkbox-opacity-hover: 1;
+    --reveal-checkbox-opacity-active: .6;
+    --success-color: #54FFBD;
+    --edit-delete-button-color: #cfcfd1;
+  }
+}
+
 .container {
   overflow: auto;
   padding: 40px;
@@ -454,13 +464,3 @@ input[name="password"] {
   text-decoration: underline;
   font-weight: 600;
 }
-
-@media (prefers-color-scheme: dark) {
-  :host {
-    --reveal-checkbox-opacity: .8;
-    --reveal-checkbox-opacity-hover: 1;
-    --reveal-checkbox-opacity-active: .6;
-    --success-color: #86DE74;
-    --edit-delete-button-color: #cfcfd1;
-  }
-}
diff --git a/browser/components/aboutlogins/content/components/login-list.css b/browser/components/aboutlogins/content/components/login-list.css
index 3a6e386e0b9b..773dac68ce4d 100644
--- a/browser/components/aboutlogins/content/components/login-list.css
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :host {
-  border-inline-end: 1px solid var(--in-content-box-border-color);
+  border-inline-end: 1px solid var(--in-content-border-color);
   background-color: var(--in-content-box-background);
   display: flex;
   flex-direction: column;
@@ -14,7 +14,7 @@
   display: flex;
   align-items: center;
   padding: 9px 16px;
-  border-bottom: 1px solid var(--in-content-box-border-color);
+  border-bottom: 1px solid var(--in-content-border-color);
   background-color: var(--in-content-box-background);
   color: var(--in-content-deemphasized-text);
   font-size: 0.8em;
@@ -99,7 +99,7 @@ ol {
 }
 
 .create-login-button-container {
-  border-top: 1px solid var(--in-content-box-border-color);
+  border-top: 1px solid var(--in-content-border-color);
   display: flex;
   flex-direction: column;
 }
@@ -117,17 +117,25 @@ ol {
   border-top: 1px solid var(--in-content-border-color);
 }
 
+@supports not -moz-bool-pref("browser.proton.enabled") {
 .login-list-item:hover {
   background-color: var(--in-content-page-background);
 }
+} /*** END !proton ***/
 
-.login-list-item:hover:active {
+@supports -moz-bool-pref("browser.proton.enabled") {
+.login-list-item:not(.selected):hover {
+  background-color: var(--in-content-button-background-hover);
+}
+
+.login-list-item:not(.selected):hover:active {
   background-color: var(--in-content-button-background-active);
 }
+} /*** END proton ***/
 
 .login-list-item.keyboard-selected {
   border-inline-start-color: var(--in-content-border-color);
-  background-color: var(--in-content-page-background);
+  background-color: var(--in-content-button-background-hover);
 }
 
 .login-list-item.selected {
diff --git a/browser/components/preferences/privacy.inc.xhtml b/browser/components/preferences/privacy.inc.xhtml
index f1dd462289bb..496b9ad64ef6 100644
--- a/browser/components/preferences/privacy.inc.xhtml
+++ b/browser/components/preferences/privacy.inc.xhtml
@@ -123,7 +123,7 @@
                     <html:span data-l10n-id="content-blocking-reload-description"
                                class="content-blocking-reload-description" />
                   </html:div>
-                  <button class="accessory-button reload-tabs-button"
+                  <button class="accessory-button reload-tabs-button primary"
                           is="highlightable-button"
                           data-l10n-id="content-blocking-reload-tabs-button"/>
                 </html:div>
@@ -201,7 +201,7 @@
                     <html:span data-l10n-id="content-blocking-reload-description"
                                class="content-blocking-reload-description" />
                   </html:div>
-                  <button class="accessory-button reload-tabs-button"
+                  <button class="accessory-button reload-tabs-button primary"
                           is="highlightable-button"
                           data-l10n-id="content-blocking-reload-tabs-button"/>
                 </html:div>
@@ -305,7 +305,7 @@
                   <html:span data-l10n-id="content-blocking-reload-description"
                              class="content-blocking-reload-description" />
                 </html:div>
-                <button class="accessory-button reload-tabs-button"
+                <button class="accessory-button reload-tabs-button primary"
                         is="highlightable-button"
                         data-l10n-id="content-blocking-reload-tabs-button"/>
               </html:div>
diff --git a/browser/themes/linux/preferences/applications.css b/browser/themes/linux/preferences/applications.css
index f95304691c5d..2627b06d0081 100644
--- a/browser/themes/linux/preferences/applications.css
+++ b/browser/themes/linux/preferences/applications.css
@@ -2,31 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/**
- * Line up the actions menu with action labels above and below it.
- * Equalize the distance from the left side of the action box to the left side
- * of the icon for both the menu and the non-menu versions of the action box.
- * Also make sure the labels are the same distance away from the icons.
- */
-.actionsMenu {
-  margin-block: -1px;
-  margin-inline: -1px 0;
-}
-
-.typeIcon,
-.actionIcon {
-  margin-inline: 3px;
-}
-
-#handlersView > richlistitem label {
-  margin-inline-start: 1px;
-  margin-top: 2px;
-}
-
-#handlersView > richlistitem {
-  min-height: 25px;
-}
-
 richlistitem[appHandlerIcon="handleInternally"],
 menuitem[appHandlerIcon="handleInternally"] {
   list-style-image: url("chrome://branding/content/icon32.png");
@@ -47,21 +22,6 @@ menuitem[appHandlerIcon="plugin"] {
   list-style-image: url("chrome://global/skin/icons/plugin.svg");
 }
 
-.actionsMenu::part(icon) {
-  margin-inline: 3px 6px;
-  height: 16px;
-  width: 16px;
-}
-
-.actionsMenu > menupopup > menuitem > .menu-iconic-left {
-  padding-inline-start: 0;
-  padding-inline-end: 4px !important;
-}
-
-.actionsMenu > menupopup > menuitem {
-  padding-inline-start: 3px;
-}
-
 #appList {
   min-height: 212px;
 }
diff --git a/browser/themes/osx/preferences/applications.css b/browser/themes/osx/preferences/applications.css
index 5e70d7470815..81df2f6c082d 100644
--- a/browser/themes/osx/preferences/applications.css
+++ b/browser/themes/osx/preferences/applications.css
@@ -2,31 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/**
- * Line up the actions menu with action labels above and below it.
- * Equalize the distance from the left side of the action box to the left side
- * of the icon for both the menu and the non-menu versions of the action box.
- * Also make sure the labels are the same distance away from the icons.
- */
-.actionsMenu {
-  margin-inline-start: -2px;
-  margin-block: 0 -1px;
-}
-
-.typeIcon,
-.actionIcon {
-  margin-inline: 3px 2px;
-}
-
-#handlersView > richlistitem label {
-  margin-inline-start: 3px;
-  margin-top: 2px;
-}
-
-#handlersView > richlistitem {
-  min-height: 22px;
-}
-
 .typeIcon,
 .actionIcon,
 .actionsMenu::part(icon) {
@@ -34,11 +9,6 @@
   width: 16px;
 }
 
-.actionsMenu::part(icon) {
-  margin-top: 2px;
-  margin-inline: 0px 8px;
-}
-
 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
   /* Undo content/browser/preferences/handlers.css - we don't
    * want icon-less labels to line up with the other labels.
diff --git a/browser/themes/shared/aboutSessionRestore.css b/browser/themes/shared/aboutSessionRestore.css
index cb0d545b094e..92742b79c019 100644
--- a/browser/themes/shared/aboutSessionRestore.css
+++ b/browser/themes/shared/aboutSessionRestore.css
@@ -25,7 +25,7 @@
   cursor: pointer;
   /* Override button background-color and color from common.css */
   background-color: transparent;
-  color: #0a84ff !important;
+  color: var(--in-content-link-color) !important;
   -moz-context-properties: fill;
   fill: currentColor;
   border: none;
@@ -86,22 +86,22 @@ treechildren::-moz-tree-image(container, noicon) {
   list-style-image: url("chrome://browser/skin/window.svg");
 }
 
+treechildren::-moz-tree-image(checked),
+treechildren::-moz-tree-image(partial) {
+  -moz-context-properties: fill, stroke;
+  fill: var(--in-content-accent-color);
+}
+
+treechildren::-moz-tree-image(checked, selected),
+treechildren::-moz-tree-image(partial, selected) {
+  fill: var(--in-content-item-selected-text);
+  stroke: var(--in-content-item-selected);
+}
+
 treechildren::-moz-tree-image(checked) {
   list-style-image: url("chrome://global/skin/icons/check.svg");
-  -moz-context-properties: fill, stroke;
-  fill: #2292d0;
-}
-treechildren::-moz-tree-image(checked, selected) {
-  fill: white;
-  stroke: #0095dd;
 }
 
 treechildren::-moz-tree-image(partial) {
   list-style-image: url("chrome://global/skin/icons/check-partial.svg");
-  -moz-context-properties: fill, stroke;
-  fill: #2292d0;
-}
-treechildren::-moz-tree-image(partial, selected) {
-  fill: white;
-  stroke: #0095dd;
 }
diff --git a/browser/themes/shared/aboutWelcomeBack.css b/browser/themes/shared/aboutWelcomeBack.css
index 9a51d668cd4d..120e6840009f 100644
--- a/browser/themes/shared/aboutWelcomeBack.css
+++ b/browser/themes/shared/aboutWelcomeBack.css
@@ -36,22 +36,22 @@ treechildren::-moz-tree-image(container, noicon) {
   list-style-image: url("chrome://browser/skin/window.svg");
 }
 
+treechildren::-moz-tree-image(checked),
+treechildren::-moz-tree-image(partial) {
+  -moz-context-properties: fill, stroke;
+  fill: var(--in-content-accent-color);
+}
+
+treechildren::-moz-tree-image(checked, selected),
+treechildren::-moz-tree-image(partial, selected) {
+  fill: var(--in-content-item-selected-text);
+  stroke: var(--in-content-item-selected);
+}
+
 treechildren::-moz-tree-image(checked) {
   list-style-image: url("chrome://global/skin/icons/check.svg");
-  -moz-context-properties: fill, stroke;
-  fill: #2292d0;
-}
-treechildren::-moz-tree-image(checked, selected) {
-  fill: white;
-  stroke: #0095dd;
 }
 
 treechildren::-moz-tree-image(partial) {
   list-style-image: url("chrome://global/skin/icons/check-partial.svg");
-  -moz-context-properties: fill, stroke;
-  fill: #2292d0;
-}
-treechildren::-moz-tree-image(partial, selected) {
-  fill: white;
-  stroke: #0095dd;
 }
diff --git a/browser/themes/shared/preferences/containers.css b/browser/themes/shared/preferences/containers.css
index 1a63c60249fb..866862944a6f 100644
--- a/browser/themes/shared/preferences/containers.css
+++ b/browser/themes/shared/preferences/containers.css
@@ -25,7 +25,7 @@
 
 #containersView richlistitem {
   padding-block: 4px;
-  border-block-end: 1px solid var(--in-content-box-border-color);
+  border-block-end: 1px solid var(--in-content-border-color);
 }
 
 /* Crop the label at the end using CSS. This isn't using XUL crop
diff --git a/browser/themes/shared/preferences/no-search-bar.svg b/browser/themes/shared/preferences/no-search-bar.svg
index 0cc68cabef3b..b5c17b5f2688 100644
--- a/browser/themes/shared/preferences/no-search-bar.svg
+++ b/browser/themes/shared/preferences/no-search-bar.svg
@@ -15,7 +15,6 @@
   </style>
   <rect width="630" height="35" x=".5" y=".5" fill="context-fill" class="addressBarOutline" rx="4" ry="4"/>
   <rect width="434" height="23" x="110.5" y="6.5" fill="rgba(255,255,255,0.05)" class="addressBarOutline" rx="4" ry="4"/>
-  <path d="M604 .5h.5v34h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574zm500.57-1.986h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0 3.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0-7.5h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m-34.98 0a.75.75 0 0 0-.52 1.28l3.18 3.22-3.18 3.22a.746.746 0 1 0 1.05 1.06l3.7-3.75a.774.774 0 0 0 0-1.06l-3.7-3.75a.754.754 0 0 0-.53-.22m4.44 0a.715.715 0 0 0-.52.22.754.754 0 0 0 0 1.06l3.17 3.22-3.17 3.22a.754.754 0 0 0 0 1.06.715.715 0 0 0 .52.22.754.754 0 0 0 .53-.22l3.69-3.75a.754.754 0 0 0 0-1.06l-3.69-3.75a.754.754 0 0 0-.53-.22m-22.84 2.25h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm2.63-3h-9a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5zm-4.5 9H561v-7.5h4.5v7.5zm4.5 0h-3.75v-7.5H570v7.5zm-2.63-4.5h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm0 1.5h.75a.375.375 0 1 0 0-.75h-.75a.375.375 0 0 0 0 .75zm-477.54 2.5a.375.375 0 1 1 .37-.375.356.356 0 0 1-.37.375m-2.6 1.5a.7.7 0 0 1-.742-.75v-4.95l2.961-3 2.97 3V22a.706.706 0 0 1-.74.75h-.74V19a.706.706 0 0 0-.74-.75h-1.49a.706.706 0 0 0-.74.75v3.75h-.739m2.219-10.5a.7.7 0 0 0-.51.225l-5.193 5.25a.738.738 0 1 0 1.037 1.05l.223-.225v4.2a1.5 1.5 0 0 0 1.482 1.5h5.931a1.491 1.491 0 0 0 1.48-1.5v-4.2l.22.225a.678.678 0 0 0 .52.225.663.663 0 0 0 .52-.225.725.725 0 0 0 0-1.05l-5.19-5.25a.709.709 0 0 0-.52-.225M70.375 13a.749.749 0 0 0-.75.75v1.808a5.245 5.245 0 1 0-.788 6.4.75.75 0 0 0-1.061-1.061 3.755 3.755 0 1 1 .776-4.151h-1.927a.75.75 0 0 0 0 1.5h3.75a.749.749 0 0 0 .75-.75v-3.75a.749.749 0 0 0-.75-.75m-34.158 4.296h8.649l-3.206-3.2a.738.738 0 0 1 1.044-1.043l4.474 4.47a.72.72 0 0 1 0 1.043l-4.474 4.47a.72.72 0 0 1-1.044 0 .72.72 0 0 1 0-1.043l3.206-3.2h-8.649a.749.749 0 1 1 0-1.497z" class="addressBarIcons"/>
-  <circle cx="18.5" cy="18" r="12" fill="rgba(195, 195, 205, 0.1)" class="addressBarOutline"/>
+  <path d="M604 .5h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574zm500.57-1.986h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0 3.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0-7.5h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m-34.98 0a.75.75 0 0 0-.52 1.28l3.18 3.22-3.18 3.22a.746.746 0 1 0 1.05 1.06l3.7-3.75a.774.774 0 0 0 0-1.06l-3.7-3.75a.754.754 0 0 0-.53-.22m4.44 0a.715.715 0 0 0-.52.22.754.754 0 0 0 0 1.06l3.17 3.22-3.17 3.22a.754.754 0 0 0 0 1.06.715.715 0 0 0 .52.22.754.754 0 0 0 .53-.22l3.69-3.75a.754.754 0 0 0 0-1.06l-3.69-3.75a.754.754 0 0 0-.53-.22m-22.84 2.25h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm2.63-3h-9a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5zm-4.5 9H561v-7.5h4.5v7.5zm4.5 0h-3.75v-7.5H570v7.5zm-2.63-4.5h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm0 1.5h.75a.375.375 0 1 0 0-.75h-.75a.375.375 0 0 0 0 .75zm-477.54 2.5a.375.375 0 1 1 .37-.375.356.356 0 0 1-.37.375m-2.6 1.5a.7.7 0 0 1-.742-.75v-4.95l2.961-3 2.97 3V22a.706.706 0 0 1-.74.75h-.74V19a.706.706 0 0 0-.74-.75h-1.49a.706.706 0 0 0-.74.75v3.75h-.739m2.219-10.5a.7.7 0 0 0-.51.225l-5.193 5.25a.738.738 0 1 0 1.037 1.05l.223-.225v4.2a1.5 1.5 0 0 0 1.482 1.5h5.931a1.491 1.491 0 0 0 1.48-1.5v-4.2l.22.225a.678.678 0 0 0 .52.225.663.663 0 0 0 .52-.225.725.725 0 0 0 0-1.05l-5.19-5.25a.709.709 0 0 0-.52-.225M70.375 13a.749.749 0 0 0-.75.75v1.808a5.245 5.245 0 1 0-.788 6.4.75.75 0 0 0-1.061-1.061 3.755 3.755 0 1 1 .776-4.151h-1.927a.75.75 0 0 0 0 1.5h3.75a.749.749 0 0 0 .75-.75v-3.75a.749.749 0 0 0-.75-.75m-34.158 4.296h8.649l-3.206-3.2a.738.738 0 0 1 1.044-1.043l4.474 4.47a.72.72 0 0 1 0 1.043l-4.474 4.47a.72.72 0 0 1-1.044 0 .72.72 0 0 1 0-1.043l3.206-3.2h-8.649a.749.749 0 1 1 0-1.497z" class="addressBarIcons"/>
   <path d="M23.783 17.292h-8.649l3.206-3.2a.738.738 0 0 0-1.044-1.043l-4.474 4.47a.72.72 0 0 0 0 1.043l4.474 4.47a.72.72 0 0 0 1.044 0 .72.72 0 0 0 0-1.043l-3.206-3.2h8.649a.749.749 0 1 0 0-1.497z" class="addressBarIcons"/>
 </svg>
diff --git a/browser/themes/shared/preferences/preferences.inc.css b/browser/themes/shared/preferences/preferences.inc.css
index 0bf088cdd965..aed96164099a 100644
--- a/browser/themes/shared/preferences/preferences.inc.css
+++ b/browser/themes/shared/preferences/preferences.inc.css
@@ -142,8 +142,8 @@ checkbox {
 }
 
 .spotlight {
-  background-color: var(--blue-40-a10);
-  outline: var(--blue-60) 1px dotted;
+  background-color: color-mix(in srgb, var(--in-content-accent-color) 15%, transparent);
+  outline: var(--in-content-accent-color) 1px dotted;
   -moz-outline-radius: 2px;
   animation: fade-out 0.5s ease-out 2s forwards;
   /* Show the border to spotlight the components in high-contrast mode. */
@@ -349,13 +349,19 @@ checkbox {
 }
 
 #handlersView > richlistitem {
-  min-height: 30px !important;
+  min-height: 30px;
 }
 
-#handlersView > richlistitem > hbox > hbox > menulist {
-  margin-block: 0;
-  margin-inline-end: 0;
+#handlersView .actionsMenu {
+  margin: 0;
   min-height: 0;
+  padding: 0;
+  border: none;
+  padding-inline-end: 8px;
+}
+
+#handlersView .actionsMenu::part(label) {
+  margin: 0;
 }
 
 .certManagerRichlistBox > richlistitem {
@@ -366,14 +372,11 @@ checkbox {
   margin-inline: 10px 9px !important;
 }
 
+#handlersView .actionsMenu::part(icon),
 .actionIcon {
   margin-inline: 11px 8px !important;
 }
 
-.actionsMenu {
-  min-height: 36px;
-}
-
 .actionsMenu > menupopup > menuitem {
   padding-inline-start: 10px !important;
 }
@@ -450,13 +453,13 @@ checkbox {
 #blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
   list-style-image: url("chrome://global/skin/icons/check.svg");
   -moz-context-properties: fill, stroke;
-  fill: #2292d0;
+  fill: var(--in-content-accent-color);
 }
 
 #engineList > treechildren::-moz-tree-image(engineShown, checked, selected),
 #blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) {
-  fill: white;
-  stroke: #0095dd;
+  fill: var(--in-content-item-selected-text);
+  stroke: var(--in-content-item-selected);
 }
 
 #engineList > treechildren::-moz-tree-row,
@@ -548,7 +551,7 @@ checkbox {
   /* `transparent` will use the dialogText color in high-contrast themes and
      when page colors are disabled */
   border: 1px solid transparent;
-  border-radius: 3.5px;
+  border-radius: 8px;
   box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
   display: -moz-box;
   margin: 0;
@@ -565,11 +568,20 @@ checkbox {
 
 .dialogTitleBar {
   margin-top: 0;
-  padding: 3.5px 0;
-  background-color: var(--in-content-dialog-header-background);
+  padding: 6px 4px;
   border-bottom: 1px solid var(--in-content-border-color);
 }
 
+@supports not -moz-bool-pref("browser.proton.enabled") {
+.dialogBox {
+  border-radius: 3.5px;
+}
+.dialogTitleBar {
+  padding: 3.5px 0;
+  background-color: var(--in-content-dialog-header-background);
+}
+} /*** END !proton ***/
+
 .dialogTitle {
   font-size: .9em;
   font-weight: 600;
@@ -582,6 +594,8 @@ checkbox {
   background-color: transparent; /* override common.css, but keep hover/active states */
   min-width: 0;
   min-height: auto;
+  width: 20px;
+  height: 20px;
   padding: 0;
   margin-inline: 0 8px;
 }
diff --git a/browser/themes/shared/preferences/privacy.css b/browser/themes/shared/preferences/privacy.css
index a0cedd7943c6..0ce2aef37994 100644
--- a/browser/themes/shared/preferences/privacy.css
+++ b/browser/themes/shared/preferences/privacy.css
@@ -5,7 +5,7 @@
 /* Permissions */
 
 #trackingGroup {
-  --section-highlight-background-color: rgba(69, 161, 255, 0.2);
+  --section-highlight-background-color: color-mix(in srgb, var(--in-content-accent-color) 20%, transparent);
 }
 
 .content-blocking-icon,
@@ -151,8 +151,8 @@
 }
 
 .content-blocking-category {
-  border: 1px solid var(--in-content-border-color);
-  background-color: rgba(215, 215, 219, 0.2);
+  border: 1px solid var(--in-content-box-border-color);
+  background-color: rgba(215, 215, 219, 0.1);
 }
 
 .content-blocking-category.disabled {
@@ -183,11 +183,11 @@
 
 .arrowhead:not([disabled]):hover {
   cursor: pointer;
-  background-color: var(--grey-90-a10);
+  background-color: var(--in-content-button-background-hover);
 }
 
 .arrowhead:not([disabled]):hover:active {
-  background-color: var(--grey-90-a20);
+  background-color: var(--in-content-button-background-active);
 }
 
 .arrowhead.up {
@@ -236,29 +236,20 @@
   min-height: 30px;
   padding: 0 20px;
   list-style-image: url("chrome://browser/skin/reload.svg");
-  background-color: var(--blue-50);
   align-self: center;
 }
 
-.reload-tabs-button:not([disabled="true"]):hover {
-  background-color: var(--blue-60);
-}
-
-.reload-tabs-button:not([disabled="true"]):hover:active {
-  background-color: var(--blue-70);
-}
-
 .reload-tabs-button .button-icon {
   margin: 0 6px;
-  color: white;
+  color: inherit;
 }
 
 .reload-tabs-button .button-text {
-  color: white;
+  color: inherit;
 }
 
 .content-blocking-category.expanded:not(.selected) .content-blocking-warning {
-  background-color: var(--grey-90-a10);
+  background-color: var(--in-content-box-info-background);
 }
 
 .content-blocking-category.selected .arrowhead {
@@ -266,7 +257,7 @@
 }
 
 .content-blocking-category.selected {
-  border: 1px solid #45A1FF;
+  border: 1px solid var(--in-content-accent-color);
   background-color: var(--section-highlight-background-color);
 }
 
diff --git a/browser/themes/shared/preferences/search-bar.svg b/browser/themes/shared/preferences/search-bar.svg
index 7de510f26caa..0f592bf476dd 100644
--- a/browser/themes/shared/preferences/search-bar.svg
+++ b/browser/themes/shared/preferences/search-bar.svg
@@ -18,10 +18,8 @@
   </style>
   <rect width="630" height="35" x=".5" y=".5" fill="context-fill" class="addressBarOutline" rx="4" ry="4"/>
   <rect width="314" height="23" x="110.5" y="6.5" fill="rgba(255,255,255,0.05)" class="addressBarOutline" rx="4" ry="4"/>
-  <path d="M604 .5h.5v34h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574z" class="addressBarIcons"/>
-  <rect width="115" height="23" x="429.5" y="6.5" fill-opacity=".2" stroke="#0a84ff" rx="4" ry="4" class="searchBarFill"/>
+  <path d="M604 .5h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574z" class="addressBarIcons"/>  <rect width="115" height="23" x="429.5" y="6.5" fill-opacity=".2" stroke="#0a84ff" rx="4" ry="4" class="searchBarFill"/>
   <path fill-rule="evenodd" d="M445.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574z" class="searchBarFill"/>
   <path d="M620.75 17.25h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0 3.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0-7.5h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m-34.98 0a.75.75 0 0 0-.52 1.28l3.18 3.22-3.18 3.22a.746.746 0 1 0 1.05 1.06l3.7-3.75a.774.774 0 0 0 0-1.06l-3.7-3.75a.754.754 0 0 0-.53-.22m4.44 0a.715.715 0 0 0-.52.22.754.754 0 0 0 0 1.06l3.17 3.22-3.17 3.22a.754.754 0 0 0 0 1.06.715.715 0 0 0 .52.22.754.754 0 0 0 .53-.22l3.69-3.75a.754.754 0 0 0 0-1.06l-3.69-3.75a.754.754 0 0 0-.53-.22m-22.84 2.25h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm2.63-3h-9a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5zm-4.5 9H561v-7.5h4.5v7.5zm4.5 0h-3.75v-7.5H570v7.5zm-2.63-4.5h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm0 1.5h.75a.375.375 0 1 0 0-.75h-.75a.375.375 0 0 0 0 .75zm-477.54 2.5a.375.375 0 1 1 .37-.375.356.356 0 0 1-.37.375m-2.6 1.5a.7.7 0 0 1-.742-.75v-4.95l2.961-3 2.97 3V22a.706.706 0 0 1-.74.75h-.74V19a.706.706 0 0 0-.74-.75h-1.49a.706.706 0 0 0-.74.75v3.75h-.739m2.219-10.5a.7.7 0 0 0-.51.225l-5.193 5.25a.738.738 0 1 0 1.037 1.05l.223-.225v4.2a1.5 1.5 0 0 0 1.482 1.5h5.931a1.491 1.491 0 0 0 1.48-1.5v-4.2l.22.225a.678.678 0 0 0 .52.225.663.663 0 0 0 .52-.225.725.725 0 0 0 0-1.05l-5.19-5.25a.709.709 0 0 0-.52-.225M70.375 13a.749.749 0 0 0-.75.75v1.808a5.245 5.245 0 1 0-.788 6.4.75.75 0 0 0-1.061-1.061 3.755 3.755 0 1 1 .776-4.151h-1.927a.75.75 0 0 0 0 1.5h3.75a.749.749 0 0 0 .75-.75v-3.75a.749.749 0 0 0-.75-.75m-34.158 4.296h8.649l-3.206-3.2a.738.738 0 0 1 1.044-1.043l4.474 4.47a.72.72 0 0 1 0 1.043l-4.474 4.47a.72.72 0 0 1-1.044 0 .72.72 0 0 1 0-1.043l3.206-3.2h-8.649a.749.749 0 1 1 0-1.497z" class="addressBarIcons"/>
-  <circle cx="18.5" cy="18" r="12" fill="rgba(195, 195, 205, 0.1)" class="addressBarOutline"/>
   <path d="M23.783 17.292h-8.649l3.206-3.2a.738.738 0 0 0-1.044-1.043l-4.474 4.47a.72.72 0 0 0 0 1.043l4.474 4.47a.72.72 0 0 0 1.044 0 .72.72 0 0 0 0-1.043l-3.206-3.2h8.649a.749.749 0 1 0 0-1.497z" class="addressBarIcons"/>
 </svg>
diff --git a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
index b69a816eff73..66fa2f0713ea 100644
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -96,6 +96,7 @@ p {
   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
   cursor: text;
   font-size: 15px;
+  font-weight: normal;
   margin: 0;
   padding-block: 0;
   padding-inline: 46px 48px;
diff --git a/browser/themes/windows/preferences/applications.css b/browser/themes/windows/preferences/applications.css
index dc23571c8881..2ff372d9e7df 100644
--- a/browser/themes/windows/preferences/applications.css
+++ b/browser/themes/windows/preferences/applications.css
@@ -2,31 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/**
- * Line up the actions menu with action labels above and below it.
- * Equalize the distance from the left side of the action box to the left side
- * of the icon for both the menu and the non-menu versions of the action box.
- * Also make sure the labels are the same distance away from the icons.
- */
-.actionsMenu {
-  margin-block: 0;
-  margin-inline: -2px 0;
-}
-
-.typeIcon,
-.actionIcon {
-  margin-inline: 3px;
-}
-
-#handlersView > richlistitem label {
-  margin-inline-start: 1px;
-  margin-top: 2px;
-}
-
-#handlersView > richlistitem {
-  min-height: 22px;
-}
-
 richlistitem[appHandlerIcon="handleInternally"],
 menuitem[appHandlerIcon="handleInternally"] {
   list-style-image: url("chrome://branding/content/icon32.png");
@@ -47,20 +22,6 @@ menuitem[appHandlerIcon="plugin"] {
   list-style-image: url("chrome://global/skin/icons/plugin.svg");
 }
 
-.actionsMenu::part(icon) {
-  margin-inline: 4px 6px;
-  height: 16px;
-  width: 16px;
-}
-
-.actionsMenu > menupopup > menuitem > .menu-iconic-left {
-  padding-inline: 0 2px;
-}
-
-.actionsMenu > menupopup > menuitem {
-  padding-inline-start: 4px;
-}
-
 #appList {
   min-height: 212px;
 }
diff --git a/devtools/startup/aboutdevtools/aboutdevtools.css b/devtools/startup/aboutdevtools/aboutdevtools.css
index ec38cb3d5080..ff7186546ee7 100644
--- a/devtools/startup/aboutdevtools/aboutdevtools.css
+++ b/devtools/startup/aboutdevtools/aboutdevtools.css
@@ -136,7 +136,6 @@ button {
   padding: 10px 20px;
 
   font-size: 15px;
-  font-weight: 400;
   line-height: 21px;
   cursor: pointer;
 }
diff --git a/toolkit/components/certviewer/content/components/list-item.css b/toolkit/components/certviewer/content/components/list-item.css
index 24138497ea6b..584ecba6eb46 100644
--- a/toolkit/components/certviewer/content/components/list-item.css
+++ b/toolkit/components/certviewer/content/components/list-item.css
@@ -5,15 +5,14 @@
 :host {
   display: grid;
   padding: 1em 0 1em;
-  background-color: var(--in-content-box-background);
-  border-block: 0.5px solid var(--in-content-box-border-color);
+  border-block: 0.5px solid var(--in-content-border-color);
   border-inline: 0.5px solid transparent;
   position: relative;
 }
 
 :host(:hover) {
   background-color: var(--in-content-item-hover);
-  border-inline-color: var(--in-content-box-border-color);
+  border-inline-color: var(--in-content-border-color);
   cursor: pointer;
 }
 
diff --git a/toolkit/content/aboutTelemetry.css b/toolkit/content/aboutTelemetry.css
index e589a3962b08..45cdb789515e 100644
--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -234,6 +234,7 @@ section:not(.active) {
   padding-block: 12px;
   padding-inline: 20px;
   border: 1px solid var(--in-content-box-border-color);
+  background-color: var(--in-content-box-background);
   border-radius: 2px;
   margin-bottom: 24px;
   margin-inline-end: 24px;
@@ -281,8 +282,8 @@ section:not(.active) {
 }
 
 .bar-inner {
-  background-color: #0a84ff;
-  border: 1px solid #0060df;
+  background-color: var(--in-content-accent-color);
+  border: 1px solid rgba(0,0,0,0.1);
   border-radius: 2px;
 }
 
@@ -304,7 +305,7 @@ table {
 
 td {
   padding-bottom: 0.25em;
-  border-bottom: 1px solid var(--in-content-box-border-color);
+  border-bottom: 1px solid var(--in-content-border-color);
 }
 
 tr:not(:first-child):hover {
diff --git a/toolkit/mozapps/extensions/content/aboutaddons.css b/toolkit/mozapps/extensions/content/aboutaddons.css
index 18ad2dfe010f..f02c65f55ce1 100644
--- a/toolkit/mozapps/extensions/content/aboutaddons.css
+++ b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -521,7 +521,7 @@ addon-details {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-top: 1px solid var(--in-content-box-border-color);
+  border-top: 1px solid var(--in-content-border-color);
   margin: 0 calc(var(--card-padding) * -1);
   padding: var(--card-padding);
   color: var(--in-content-text-color);
@@ -691,8 +691,8 @@ li.permission-info > label {
   margin-top: 8px;
   /* Pull the buttons flush with the side of the card */
   margin-inline: calc(var(--card-padding) * -1);
-  border-bottom: 1px solid var(--in-content-box-border-color);
-  border-top: 1px solid var(--in-content-box-border-color);
+  border-bottom: 1px solid var(--in-content-border-color);
+  border-top: 1px solid var(--in-content-border-color);
   font-size: 0;
   line-height: 0;
 }
diff --git a/toolkit/themes/linux/global/menulist.css b/toolkit/themes/linux/global/menulist.css
index 3225bea3bcac..eaafcdf294e5 100644
--- a/toolkit/themes/linux/global/menulist.css
+++ b/toolkit/themes/linux/global/menulist.css
@@ -8,7 +8,7 @@
 
 @supports -moz-bool-pref("browser.proton.enabled") {
 label {
-  margin: 1px 3px !important;
+  margin: 1px 3px;
 }
 
 :host([native])  {
diff --git a/toolkit/themes/linux/global/richlistbox.css b/toolkit/themes/linux/global/richlistbox.css
index 2820198343d5..60cc72ec45ec 100644
--- a/toolkit/themes/linux/global/richlistbox.css
+++ b/toolkit/themes/linux/global/richlistbox.css
@@ -22,7 +22,7 @@ richlistitem[selected="true"] {
   color: -moz-cellhighlighttext;
 }
 
-richlistbox:focus > richlistitem[selected="true"] {
+richlistbox:where(:focus) > richlistitem[selected="true"] {
   background-color: Highlight;
   color: HighlightText;
 }
diff --git a/toolkit/themes/osx/global/menulist.css b/toolkit/themes/osx/global/menulist.css
index eec71e81c754..f847c28adfe6 100644
--- a/toolkit/themes/osx/global/menulist.css
+++ b/toolkit/themes/osx/global/menulist.css
@@ -8,7 +8,7 @@
 
 @supports -moz-bool-pref("browser.proton.enabled") {
 label:not([native]) {
-  margin: 0 3px !important;
+  margin: 0 3px;
 }
 
 :host([native]) {
diff --git a/toolkit/themes/osx/global/richlistbox.css b/toolkit/themes/osx/global/richlistbox.css
index 50b37c182114..0435f5f92949 100644
--- a/toolkit/themes/osx/global/richlistbox.css
+++ b/toolkit/themes/osx/global/richlistbox.css
@@ -22,7 +22,7 @@ richlistitem[selected="true"] {
   color: -moz-DialogText;
 }
 
-richlistbox:focus > richlistitem[selected="true"] {
+richlistbox:where(:focus) > richlistitem[selected="true"] {
   background-color: Highlight;
   color: HighlightText;
 }
diff --git a/toolkit/themes/shared/aboutNetworking.css b/toolkit/themes/shared/aboutNetworking.css
index 3edd4571a49c..ce36ed1b66e2 100644
--- a/toolkit/themes/shared/aboutNetworking.css
+++ b/toolkit/themes/shared/aboutNetworking.css
@@ -76,5 +76,5 @@ th {
 
 td {
   padding-bottom: 0.25em;
-  border-bottom: 1px solid var(--in-content-box-border-color);
+  border-bottom: 1px solid var(--in-content-border-color);
 }
diff --git a/toolkit/themes/shared/icons/radio.svg b/toolkit/themes/shared/icons/radio.svg
index 43067348339c..d23d5c453737 100644
--- a/toolkit/themes/shared/icons/radio.svg
+++ b/toolkit/themes/shared/icons/radio.svg
@@ -2,6 +2,6 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
-  <circle cx="8" cy="8" r="4.5"/>
+  <circle cx="8" cy="8" r="4"/>
 </svg>
 
diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css
index c509e85d4062..055618df2ecb 100644
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -8,17 +8,17 @@
 
 :host,
 :root {
-  --in-content-page-color: #0c0c0d;
+  --in-content-page-color: rgb(21, 20, 26);
   --in-content-page-background: #fff;
-  --in-content-text-color: var(--grey-90);
+  --in-content-text-color: var(--in-content-page-color);
   --in-content-deemphasized-text: var(--grey-60);
   --in-content-box-background: #fff;
   --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
-  --in-content-box-border-color: var(--grey-90-a30);
+  --in-content-box-border-color: rgb(143, 143, 157);
   --in-content-box-info-background: #f0f0f4;
-  --in-content-item-hover: rgba(69, 161, 255, 0.2); /* blue 40 a20 */
-  --in-content-item-selected: #0a84ff;
-  --in-content-item-selected-text: #fff;
+  --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent);
+  --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: #0a84ff;
   --in-content-accent-color-active: #0060df;
@@ -62,6 +62,7 @@
   --checkbox-unchecked-active-bgcolor: rgb(207,207,216);
   --checkbox-checked-bgcolor: rgb(0,97,224);
   --checkbox-checked-color: rgb(251,251,254);
+  --checkbox-checked-border-color: transparent;
   --checkbox-checked-hover-bgcolor: rgb(2,80,187);
   --checkbox-checked-active-bgcolor: rgb(5,62,148);
 
@@ -115,6 +116,8 @@
 :host,
 :root {
   --in-content-page-background: #f9f9fa;
+  --in-content-page-color: #0c0c0d;
+  --in-content-box-border-color: var(--grey-90-a30);
   --in-content-box-info-background: var(--grey-20);
   --in-content-button-background: var(--grey-90-a10);
   --in-content-button-background-hover: var(--grey-90-a20);
@@ -138,17 +141,15 @@
     /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
     --in-content-page-background: rgb(28,27,34);
     --in-content-page-color: rgb(251,251,254);
-    --in-content-text-color: var(--in-content-page-color);
     --in-content-deemphasized-text: rgb(191,191,201);
 
-    --in-content-box-background: #202023;
+    --in-content-box-background: rgb(35, 34, 43);
     --in-content-box-background-odd: rgba(249,249,250,0.05);
     --in-content-box-info-background: rgba(249,249,250,0.15);
 
     --in-content-border-color: rgba(249,249,250,0.2);
     --in-content-border-hover: rgba(249,249,250,0.3);
     --in-content-border-invalid: rgb(255,132,139);
-    --in-content-box-border-color: rgba(249,249,250,0.2);
 
     --in-content-button-background: rgb(43,42,51);
     --in-content-button-background-hover: rgb(82,82,94);
@@ -164,9 +165,9 @@
     --in-content-danger-button-background-hover: #ffbdc5;
     --in-content-danger-button-background-active: #ffdfe7;
 
-    --in-content-table-background: #202023;
+    --in-content-table-background: rgb(35, 34, 43);
     --in-content-table-border-dark-color: rgba(249,249,250,0.2);
-    --in-content-table-header-background: #002b57;
+    --in-content-table-header-background: rgb(5, 64, 150);
     --in-content-dialog-header-background: rgba(249,249,250,0.05);
 
     --in-content-accent-color: var(--in-content-primary-button-background);
@@ -200,6 +201,9 @@
     --in-content-page-color: rgb(249, 249, 250);
     --in-content-deemphasized-text: var(--grey-40);
 
+    --in-content-box-background: #202023;
+    --in-content-box-border-color: rgba(249,249,250,0.2);
+
     --in-content-button-background: rgba(249,249,250,0.1);
     --in-content-button-background-hover: rgba(249,249,250,0.15);
     --in-content-button-background-active: rgba(249,249,250,0.2);
@@ -215,6 +219,9 @@
     --in-content-link-color-hover: var(--blue-50);
     --in-content-link-color-active: var(--blue-60);
     --in-content-link-color-visited: var(--blue-40);
+
+    --in-content-table-background: #202023;
+    --in-content-table-header-background: #002b57;
   }
 }
 }
@@ -268,7 +275,7 @@ xul|tabpanels {
 
 xul|tabs {
   margin-bottom: 10px;
-  border-block: 1px solid var(--in-content-border-color);
+  border-bottom: 1px solid var(--in-content-border-color);
   background-color: transparent;
   color: inherit;
 }
@@ -559,7 +566,7 @@ html|textarea,
 xul|search-textbox {
   appearance: none;
   border: 1px solid var(--in-content-box-border-color);
-  border-radius: 2px;
+  border-radius: 4px;
   color: inherit;
   background-color: var(--in-content-box-background);
 }
@@ -577,11 +584,13 @@ html|textarea {
   margin: 2px 4px;
 }
 
+@supports not -moz-bool-pref("browser.proton.enabled") {
 html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):enabled:not(:focus):hover,
 html|textarea:enabled:not(:focus):hover,
 xul|search-textbox:not([disabled="true"], [focused]):hover {
   border-color: var(--in-content-border-hover);
 }
+} /*** END !proton ***/
 
 html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus,
 html|textarea:focus,
@@ -597,6 +606,12 @@ html|textarea:-moz-ui-invalid {
 }
 
 @supports not -moz-bool-pref("browser.proton.enabled") {
+html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
+html|textarea,
+xul|search-textbox {
+  border-radius: 2px;
+}
+
 html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus,
 html|textarea:focus,
 xul|search-textbox[focused] {
@@ -777,8 +792,8 @@ xul|radio {
 html|input[type="radio"],
 xul|*.radio-check {
   appearance: none;
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   padding: 0;
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 100%;
@@ -805,20 +820,13 @@ xul|*.radio-check[selected] {
   fill: currentColor;
   color: var(--in-content-primary-button-text-color);
   background-color: var(--in-content-primary-button-background);
+  background-image: url("chrome://global/skin/icons/radio.svg");
   border-color: transparent;
 
   /* Style the button also when printing with "Print Backgrounds" unchecked */
   color-adjust: exact;
 }
 
-html|input[type="radio"]:checked {
-  background-image: url("chrome://global/skin/icons/radio.svg");
-}
-
-xul|*.radio-check[selected] {
-  list-style-image: url("chrome://global/skin/icons/radio.svg");
-}
-
 html|input[type="radio"]:enabled:checked:hover,
 xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
   background-color: var(--in-content-primary-button-background-hover);
@@ -1028,16 +1036,25 @@ xul|richlistbox {
   margin-inline: 0;
   background-color: var(--in-content-box-background);
   border: 1px solid var(--in-content-box-border-color);
-  border-radius: 2px;
+  border-radius: 4px;
   color: var(--in-content-text-color);
 }
 
+@supports not -moz-bool-pref("browser.proton.enabled") {
+html|select[size][multiple],
+xul|listheader,
+xul|richlistbox {
+  border-radius: 2px;
+}
+} /*** END !proton ***/
+
 xul|listheader {
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   padding-bottom: 1px;
   box-shadow: inset 0 -1px var(--in-content-border-color);
+  overflow: clip; /* Clip border-radius */
 }
 
 xul|listheader + xul|richlistbox {
@@ -1065,8 +1082,17 @@ xul|treechildren::-moz-tree-row(hover) {
   background-color: var(--in-content-item-hover);
 }
 
+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);
+}
+
+xul|richlistbox:not(#categories) > xul|richlistitem[selected] {
+  /* Ensure buttons inside richlistitems (containers, applications) look OK */
+  --in-content-button-background: color-mix(in srgb, currentColor 20%, transparent);
+  --in-content-button-background-hover: color-mix(in srgb, currentColor 40%, transparent);
+  --in-content-button-background-active: color-mix(in srgb, currentColor 60%, transparent);
 }
 
 /* Use a 2px border so that selected row highlight is still visible behind
@@ -1090,7 +1116,7 @@ xul|tree {
   appearance: none;
   font-size: 1em;
   border: 1px solid var(--in-content-box-border-color);
-  border-radius: 2px;
+  border-radius: 4px;
   background-color: var(--in-content-box-background);
   color: inherit;
   margin: 0;
@@ -1105,10 +1131,23 @@ xul|richlistbox:-moz-focusring {
 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;
 }
 
+@supports not -moz-bool-pref("browser.proton.enabled") {
+xul|tree {
+  border-radius: 2px;
+}
+xul|treecols {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+}
+} /*** END !proton ***/
+
 xul|treecol:not([hideheader="true"]),
 xul|treecolpicker {
   appearance: none;
diff --git a/toolkit/themes/windows/global/menulist.css b/toolkit/themes/windows/global/menulist.css
index ceda46b83469..30290e1928e8 100644
--- a/toolkit/themes/windows/global/menulist.css
+++ b/toolkit/themes/windows/global/menulist.css
@@ -8,7 +8,7 @@
 
 @supports -moz-bool-pref("browser.proton.enabled") {
 label {
-  margin: 0 3px !important;
+  margin: 0 3px;
 }
 
 :host([native]) {
diff --git a/toolkit/themes/windows/global/richlistbox.css b/toolkit/themes/windows/global/richlistbox.css
index a874a8201cc9..08669a6dbf8c 100644
--- a/toolkit/themes/windows/global/richlistbox.css
+++ b/toolkit/themes/windows/global/richlistbox.css
@@ -22,7 +22,7 @@ richlistitem[selected="true"] {
   color: -moz-cellhighlighttext;
 }
 
-richlistbox:focus > richlistitem[selected="true"] {
+richlistbox:where(:focus) > richlistitem[selected="true"] {
   background-color: Highlight;
   color: HighlightText;
 }