Bug 1706155 - Set hover states for HCM common.css r=desktop-theme-reviewers,dao,morgan,preferences-reviewers
authorMark Striemer <mstriemer@mozilla.com>
Mon, 10 May 2021 16:31:27 +0000
changeset 579271 2e8c89be4b84caa728fdc36225127efd539dc63c
parent 579270 b10bdc95d6d3e5a6fc2f3d55bb8911e414517d4c
child 579272 00f13360743a40b0ab230d9e612f5b6f57e26800
push id142879
push usermstriemer@mozilla.com
push dateMon, 10 May 2021 16:33:50 +0000
treeherderautoland@2e8c89be4b84 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdesktop-theme-reviewers, dao, morgan, preferences-reviewers
bugs1706155
milestone90.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1706155 - Set hover states for HCM common.css r=desktop-theme-reviewers,dao,morgan,preferences-reviewers Differential Revision: https://phabricator.services.mozilla.com/D113872
browser/components/aboutlogins/content/components/fxaccounts-button.css
browser/components/aboutlogins/content/components/login-item.css
browser/components/aboutlogins/content/components/login-list.css
browser/components/enterprisepolicies/content/aboutPolicies.css
browser/components/protections/content/protections.css
browser/themes/shared/blockedSite.css
browser/themes/shared/preferences/preferences.inc.css
toolkit/components/aboutconfig/content/aboutconfig.css
toolkit/components/aboutperformance/content/aboutPerformance.css
toolkit/components/aboutprocesses/content/aboutProcesses.css
toolkit/components/certviewer/content/components/info-item.css
toolkit/components/certviewer/content/components/list-item.css
toolkit/components/printing/content/print.css
toolkit/components/printing/content/toggle-group.css
toolkit/content/widgets/message-bar.css
toolkit/mozapps/extensions/content/aboutaddons.css
toolkit/mozapps/extensions/content/aboutaddons.html
toolkit/mozapps/extensions/content/panel-item.css
toolkit/themes/shared/checkbox.inc.css
toolkit/themes/shared/in-content/common.inc.css
--- a/browser/components/aboutlogins/content/components/fxaccounts-button.css
+++ b/browser/components/aboutlogins/content/components/fxaccounts-button.css
@@ -64,15 +64,17 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 1000px;
   width: 32px;
   height: 32px;
 }
 
-.fxaccounts-avatar-button:hover {
-  background-color: transparent !important;
-}
+@media not (prefers-contrast) {
+  .fxaccounts-avatar-button:hover {
+    background-color: transparent !important;
+  }
 
-.fxaccounts-avatar-button:hover > .fxaccount-email {
-  text-decoration: underline;
+  .fxaccounts-avatar-button:hover > .fxaccount-email {
+    text-decoration: underline;
+  }
 }
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -115,17 +115,17 @@ input[type="url"]:read-only {
   flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .delete-button,
 .edit-button {
-  color: var(--edit-delete-button-color) !important;
+  color: var(--edit-delete-button-color);
   background-repeat: no-repeat;
   background-position: 8px;
   -moz-context-properties: fill;
   fill: currentColor;
   min-width: auto;
   /* See bug 1627164: In CJK locales, line break could happen in any letter of the button. The fix here is to explicitly specify flex property so that the button couldn't grow or shrink. */
   flex: 0 0 auto;
 }
--- a/browser/components/aboutlogins/content/components/login-list.css
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -115,16 +115,17 @@ ol {
 .login-list-item:hover {
   background-color: var(--in-content-page-background);
 }
 } /*** END !proton ***/
 
 @media (-moz-proton) {
 .login-list-item:not(.selected):hover {
   background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
 }
 
 .login-list-item:not(.selected):hover:active {
   background-color: var(--in-content-button-background-active);
 }
 } /*** END proton ***/
 
 .login-list-item.keyboard-selected {
--- a/browser/components/enterprisepolicies/content/aboutPolicies.css
+++ b/browser/components/enterprisepolicies/content/aboutPolicies.css
@@ -61,16 +61,17 @@ body {
 }
 
 tbody tr {
   transition: background cubic-bezier(.07, .95, 0, 1) 250ms;
 }
 
 tbody tr:hover {
   background-color: var(--in-content-item-hover);
+  color: var(--in-content-item-hover-text);
 }
 
 th, td, table {
   border-collapse: collapse;
   border: none;
   text-align: start;
 }
 
--- a/browser/components/protections/content/protections.css
+++ b/browser/components/protections/content/protections.css
@@ -1031,16 +1031,17 @@ label[for="tab-cryptominer"]:hover ~ #hi
 #manage-protections:hover,
 #sign-up-for-monitor-link:hover,
 #get-proxy-extension-link:hover,
 #get-vpn-link:hover,
 #vpn-banner-link:hover,
 #monitor-partial-breaches-link:hover,
 #monitor-breaches-link:hover {
   background-color: var(--in-content-primary-button-background-hover);
+  color: var(--in-content-primary-button-text-color-hover);
 }
 
 #manage-protections:focus,
 #sign-up-for-monitor-link:focus,
 #get-proxy-extension-link:focus,
 #get-vpn-link:focus,
 #vpn-banner-link:focus,
 #monitor-partial-breaches-link:focus,
--- a/browser/themes/shared/blockedSite.css
+++ b/browser/themes/shared/blockedSite.css
@@ -1,25 +1,27 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://browser/skin/error-pages.css");
 
-:root {
-  --in-content-page-background: #A4000F;
-  --in-content-page-color: white;
-  --in-content-text-color: white;
-  --in-content-primary-button-text-color: black;
-  --in-content-button-background: transparent;
-  --in-content-button-background-hover: #5a0002;
-  --in-content-button-background-active: #3e0200;
-  --in-content-primary-button-background: white;
-  --in-content-primary-button-background-hover: rgba(255, 255, 255, 0.8);
-  --in-content-primary-button-background-active: rgba(255, 255, 255, 0.7);
+@media not (prefers-contrast) {
+  :root {
+    --in-content-page-background: #A4000F;
+    --in-content-page-color: white;
+    --in-content-text-color: white;
+    --in-content-primary-button-text-color: black;
+    --in-content-button-background: transparent;
+    --in-content-button-background-hover: #5a0002;
+    --in-content-button-background-active: #3e0200;
+    --in-content-primary-button-background: white;
+    --in-content-primary-button-background-hover: rgba(255, 255, 255, 0.8);
+    --in-content-primary-button-background-active: rgba(255, 255, 255, 0.7);
+  }
 }
 
 .title {
   background-image: url("chrome://global/skin/icons/blocked.svg");
 }
 
 .button-container button {
   border: 1px solid white;
--- a/browser/themes/shared/preferences/preferences.inc.css
+++ b/browser/themes/shared/preferences/preferences.inc.css
@@ -477,16 +477,24 @@ checkbox {
 }
 
 #engineList > treechildren::-moz-tree-image(engineShown, checked, selected),
 #blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) {
   fill: var(--in-content-item-selected-text);
   stroke: var(--in-content-item-selected);
 }
 
+@media (prefers-contrast) {
+  #engineList > treechildren::-moz-tree-image(hover),
+  #blocklistsTree > treechildren::-moz-tree-image(hover) {
+    fill: var(--in-content-item-hover-text);
+    stroke: var(--in-content-item-hover);
+  }
+}
+
 #engineList > treechildren::-moz-tree-row,
 #blocklistsTree > treechildren::-moz-tree-row {
   min-height: 36px;
 }
 
 #selectionCol {
   min-width: 26px;
 }
--- a/toolkit/components/aboutconfig/content/aboutconfig.css
+++ b/toolkit/components/aboutconfig/content/aboutconfig.css
@@ -106,16 +106,17 @@
 }
 
 #prefs > tr.odd {
   background-color: var(--in-content-box-background-odd);
 }
 
 #prefs > tr:hover {
   background-color: var(--in-content-item-hover);
+  color: var(--in-content-item-hover-text);
 }
 
 #prefs > tr.has-user-value {
   font-weight: bold;
 }
 
 #prefs > tr.locked {
   opacity: 0.4;
--- a/toolkit/components/aboutperformance/content/aboutPerformance.css
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.css
@@ -101,28 +101,26 @@ tr:is([selected], :hover) > td > .action
 }
 
 #dispatch-thead > tr {
   height: inherit;
 }
 
 #dispatch-thead > tr > td {
   border: none;
-  background-color: var(--in-content-button-background);
 }
 #dispatch-thead > tr > td:not(:first-child) {
   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;
   border-bottom: 1px solid var(--in-content-border-color);
 }
 td {
   padding: 5px 10px;
   min-height: 2em;
-  color: var(--in-content-text-color);
   max-width: 70vw;
   overflow: hidden;
   white-space: nowrap;
 }
 #dispatch-tbody > tr > td:first-child {
   text-overflow: ellipsis;
   padding-inline-start: 32px;
   background-repeat: no-repeat;
@@ -176,23 +174,24 @@ td {
   fill: rgb(224, 41, 29);
 }
 #dispatch-tbody > tr > td.worker {
   background-image: url("chrome://devtools/skin/images/debugging-workers.svg");
   -moz-context-properties: fill;
   fill: #808080;
 }
 
-#dispatch-tbody > tr[selected] > td {
+#dispatch-tbody > tr:hover {
+  background-color: var(--in-content-item-hover);
+  color: var(--in-content-item-hover-text);
+}
+#dispatch-tbody > tr[selected] {
   background-color: var(--in-content-item-selected);
   color: var(--in-content-item-selected-text);
 }
-#dispatch-tbody > tr:hover {
-  background-color: var(--in-content-item-hover);
-}
 
 .clickable {
   background-repeat: no-repeat;
   background-position: right 4px center;
 }
 .clickable:dir(rtl) {
   background-position-x: left 4px;
 }
@@ -203,19 +202,21 @@ td {
 }
 .desc {
   background-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
   -moz-context-properties: fill;
   fill: currentColor;
 }
 #dispatch-thead > tr > td.clickable:hover {
   background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
 }
-#dispatch-thead > tr > td.clickable:active {
+#dispatch-thead > tr > td.clickable:hover:active {
   background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-hover);
 }
 
 .energy-impact {
   --bar-width: 0;
   background: linear-gradient(to right, var(--blue-40) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%));
 }
 .energy-impact:dir(rtl) {
   background: linear-gradient(to left, var(--blue-40) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%));
--- a/toolkit/components/aboutprocesses/content/aboutProcesses.css
+++ b/toolkit/components/aboutprocesses/content/aboutProcesses.css
@@ -116,16 +116,17 @@ td:first-child {
 }
 
 tr[selected] > td {
   background-color: var(--in-content-item-selected);
   color: var(--in-content-item-selected-text);
 }
 #process-tbody > tr:hover {
   background-color: var(--in-content-item-hover);
+  color: var(--in-content-item-hover-text);
 }
 
 /* Tab names and thread summary text can extend into memory and CPU columns. */
 .window > :first-child,
 .thread-summary > :first-child {
   grid-column: 1 / 4;
 }
 
--- a/toolkit/components/certviewer/content/components/info-item.css
+++ b/toolkit/components/certviewer/content/components/info-item.css
@@ -29,16 +29,17 @@ label {
 
 .download-link-chain {
   margin: 0 5px;
 }
 
 .long-hex:hover {
   border-block: 1px solid var(--in-content-border-color);
   background-color: var(--in-content-item-hover);
+  color: var(--in-content-item-hover-text);
   padding: 0;
 }
 
 .hex-open {
   white-space: normal;
 }
 
 :host(.value) *,
--- a/toolkit/components/certviewer/content/components/list-item.css
+++ b/toolkit/components/certviewer/content/components/list-item.css
@@ -7,16 +7,17 @@
   padding: 1em 0 1em;
   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);
+  color: var(--in-content-item-hover-text);
   border-inline-color: var(--in-content-border-color);
   cursor: pointer;
 }
 
 a {
   text-decoration: none;
   color: inherit;
 }
--- a/toolkit/components/printing/content/print.css
+++ b/toolkit/components/printing/content/print.css
@@ -318,9 +318,10 @@ input[type="number"].photon-number::-moz
 
 input[type="number"].photon-number::-moz-number-spin-up {
   scale: 1 -1;
 }
 
 input[type="number"].photon-number::-moz-number-spin-up:hover,
 input[type="number"].photon-number::-moz-number-spin-down:hover {
   background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
 }
--- a/toolkit/components/printing/content/toggle-group.css
+++ b/toolkit/components/printing/content/toggle-group.css
@@ -62,32 +62,36 @@
 @media not (-moz-proton) {
 .toggle-group-input:disabled + .toggle-group-label {
   opacity: 0.7;
 }
 } /*** END !proton ***/
 
 .toggle-group-input:enabled + .toggle-group-label:hover {
   background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
 }
 
-.toggle-group-input:enabled + .toggle-group-label:active {
+.toggle-group-input:enabled + .toggle-group-label:hover:active {
   background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-hover);
 }
 
 .toggle-group-input:-moz-focusring + .toggle-group-label {
   outline: 2px solid var(--in-content-focus-outline-color);
   outline-offset: 2px;
   z-index: 1;
 }
 
 .toggle-group-input:checked + .toggle-group-label {
   background-color: var(--in-content-primary-button-background);
   color: var(--in-content-primary-button-text-color);
 }
 
 .toggle-group-input:enabled:checked + .toggle-group-label:hover {
   background-color: var(--in-content-primary-button-background-hover);
+  color: var(--in-content-primary-button-text-color-hover);
 }
 
-.toggle-group-input:enabled:checked + .toggle-group-label:active {
+.toggle-group-input:enabled:checked + .toggle-group-label:hover:active {
   background-color: var(--in-content-primary-button-background-active);
+  color: var(--in-content-primary-button-text-color-hover);
 }
--- a/toolkit/content/widgets/message-bar.css
+++ b/toolkit/content/widgets/message-bar.css
@@ -149,25 +149,27 @@
 }
 
 @media (-moz-proton) {
 @media not (prefers-contrast) {
   .container.infobar {
     box-shadow: 0 1px 2px rgba(58, 57, 68, 0.1);
     background: var(--in-content-page-background);
   }
-}
+
+  .close {
+    fill: var(--in-content-icon-color);
+  }
 
-.close {
-  fill: var(--in-content-icon-color);
-}
-
-@media (-moz-toolbar-prefers-color-scheme: dark) {
-  .container.infobar {
-    background: rgb(66,65,77);
+  @media (-moz-toolbar-prefers-color-scheme: dark) {
+    /* Don't set the background in prefers-contrast mode or macOS can end up
+     * with black on black text. */
+    .container.infobar {
+      background: rgb(66,65,77);
+    }
   }
 }
 
 :host([message-bar-type=infobar]:first-of-type) {
   margin-top: 4px;
 }
 
 :host([message-bar-type=infobar]) {
--- a/toolkit/mozapps/extensions/content/aboutaddons.css
+++ b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -697,31 +697,34 @@ button.tab-button {
   border-inline: none;
   border-block: 2px solid transparent;
   border-radius: 0;
   background: transparent;
   font-size: 14px;
   line-height: 20px;
   margin: 0;
   padding: 4px 16px;
-  color: var(--in-content-text-color);
 }
 
 button.tab-button:hover {
-  background-color: var(--in-content-button-background);
   border-top-color: var(--in-content-box-border-color);
 }
 
-button.tab-button:hover:active {
-  background-color: var(--in-content-button-background-hover);
+button.tab-button[selected],
+button.tab-button[selected]:hover {
+  border-top-color: currentColor;
+  color: var(--in-content-accent-color);
 }
 
-button.tab-button[selected] {
-  border-top-color: currentColor;
-  color: var(--in-content-accent-color) !important;
+@media (prefers-contrast) {
+  button.tab-button[selected],
+  button.tab-button[selected]:hover {
+    color: var(--in-content-primary-button-text-color);
+    background-color: var(--in-content-primary-button-background);
+  }
 }
 
 button.tab-button:-moz-focusring {
   outline-offset: -2px;
 }
 
 .tab-group[last-input-type="mouse"] > button.tab-button:-moz-focusring {
   outline: none;
--- a/toolkit/mozapps/extensions/content/aboutaddons.html
+++ b/toolkit/mozapps/extensions/content/aboutaddons.html
@@ -210,20 +210,20 @@
       <div class="disco-description-statistics">
         <five-star-rating></five-star-rating>
         <span class="disco-user-count"></span>
       </div>
     </template>
 
     <template name="addon-details">
       <button-group class="tab-group">
-        <button is="named-deck-button" deck="details-deck" name="details" data-l10n-id="details-addon-button" class="tab-button"></button>
-        <button is="named-deck-button" deck="details-deck" name="preferences" data-l10n-id="preferences-addon-button" class="tab-button"></button>
-        <button is="named-deck-button" deck="details-deck" name="permissions" data-l10n-id="permissions-addon-button" class="tab-button"></button>
-        <button is="named-deck-button" deck="details-deck" name="release-notes" data-l10n-id="release-notes-addon-button" class="tab-button"></button>
+        <button is="named-deck-button" deck="details-deck" name="details" data-l10n-id="details-addon-button" class="tab-button ghost-button"></button>
+        <button is="named-deck-button" deck="details-deck" name="preferences" data-l10n-id="preferences-addon-button" class="tab-button ghost-button"></button>
+        <button is="named-deck-button" deck="details-deck" name="permissions" data-l10n-id="permissions-addon-button" class="tab-button ghost-button"></button>
+        <button is="named-deck-button" deck="details-deck" name="release-notes" data-l10n-id="release-notes-addon-button" class="tab-button ghost-button"></button>
       </button-group>
       <named-deck id="details-deck">
         <section name="details">
           <div class="addon-detail-description"></div>
           <div class="addon-detail-contribute">
             <label data-l10n-id="detail-contributions-description"></label>
             <button
               class="addon-detail-contribute-button"
--- a/toolkit/mozapps/extensions/content/panel-item.css
+++ b/toolkit/mozapps/extensions/content/panel-item.css
@@ -47,16 +47,17 @@ button:dir(rtl) {
   background: var(--blue-50);
   position: absolute;
   top: 4px;
   inset-inline-start: 28px;
 }
 
 button:enabled:hover {
   background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
 }
 
 button:enabled:hover:active {
   background-color: var(--in-content-button-background-active);
 }
 
 button:focus-visible {
   outline-offset: -2px;
--- a/toolkit/themes/shared/checkbox.inc.css
+++ b/toolkit/themes/shared/checkbox.inc.css
@@ -72,9 +72,27 @@ checkbox:not([disabled="true"]):hover > 
 checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
   background-color: var(--checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 25%, -moz-accent-color));
 }
 
 checkbox:not([native]):-moz-focusring > .checkbox-check {
   outline: 2px solid var(--focus-outline-color, -moz-accent-color);
   outline-offset: var(--focus-outline-offset, 2px);
 }
+
+@media (prefers-contrast) {
+  checkbox:not([disabled="true"]):hover > .checkbox-check {
+    /* color will set the border-color on the check due to how HCM works for in-content pages. */
+    color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field));
+  }
+
+  .checkbox-check[checked] {
+    color: var(--checkbox-checked-border-color, currentColor);
+    fill: var(--checkbox-checked-color, -moz-accent-color-foreground);
+  }
+
+  checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
+  checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
+    color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground);
+    fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground);
+  }
+}
 } /** END Proton **/
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -27,20 +27,23 @@
   --in-content-border-invalid: var(--red-50);
   --in-content-border-color: #d7d7db;
   --in-content-error-text-color: #c50042;
   --in-content-link-color: var(--blue-60);
   --in-content-link-color-hover: var(--blue-70);
   --in-content-link-color-active: var(--blue-80);
   --in-content-link-color-visited: var(--blue-60);
    /* button background states are also used for checkboxes and radiobuttons */
+  --in-content-button-text-color: var(--in-content-text-color);
+  --in-content-button-text-color-hover: var(--in-content-text-color);
   --in-content-button-background: rgba(207,207,216,.33);
   --in-content-button-background-hover: rgba(207,207,216,.66);
   --in-content-button-background-active: rgb(207,207,216);
   --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-background: #0061e0;
   --in-content-primary-button-background-hover: #0250bb;
   --in-content-primary-button-background-active: #053e94;
   --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(--in-content-primary-button-background);
 
@@ -234,18 +237,18 @@
     --in-content-page-background: -moz-Dialog;
     --in-content-deemphasized-text: GrayText;
 
     --in-content-box-background: -moz-Dialog;
     --in-content-box-background-odd: -moz-Dialog;
     --in-content-box-border-color: ThreeDShadow;
     --in-content-box-info-background: -moz-Dialog;
 
-    --in-content-item-hover: ButtonFace;
-    --in-content-item-hover-text: ButtonText;
+    --in-content-item-hover: Highlight;
+    --in-content-item-hover-text: HighlightText;
     --in-content-item-selected: Highlight;
     --in-content-item-selected-text: HighlightText;
     --in-content-icon-color: -moz-DialogText;
 
     --in-content-accent-color: -moz-DialogText;
     --in-content-accent-color-active: -moz-DialogText;
 
     --in-content-border-hover: ThreeDShadow;
@@ -255,43 +258,46 @@
     --in-content-border-invalid: ThreeDShadow;
     --in-content-border-color: ThreeDShadow;
 
     --in-content-link-color: -moz-nativehyperlinktext;
     --in-content-link-color-hover: -moz-nativehyperlinktext;
     --in-content-link-color-active: -moz-nativehyperlinktext;
     --in-content-link-color-visited: -moz-nativehyperlinktext;
 
+    --in-content-button-text-color-hover: HighlightText;
     --in-content-button-background: ButtonFace;
-    --in-content-button-background-hover: -moz-ButtonHoverFace;
-    --in-content-button-background-active: ButtonFace;
+    --in-content-button-background-hover: Highlight;
+    --in-content-button-background-active: Highlight;
 
     --in-content-primary-button-text-color: HighlightText;
+    --in-content-primary-button-text-color-hover: ButtonText;
     --in-content-primary-button-background: Highlight;
-    --in-content-primary-button-background-hover: Highlight;
-    --in-content-primary-button-background-active: Highlight;
+    --in-content-primary-button-background-hover: ButtonFace;
+    --in-content-primary-button-background-active: ButtonFace;
 
-    --in-content-danger-button-background: Highlight;
-    --in-content-danger-button-background-hover: Highlight;
-    --in-content-danger-button-background-active: Highlight;
+    --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-table-border-dark-color: ThreeDDarkShadow;
     --in-content-table-background: -moz-Dialog;
     --in-content-table-header-background: -moz-Dialog;
     --in-content-dialog-header-background: -moz-Dialog;
 
     --dialog-warning-text-color: -moz-FieldText;
 
     --checkbox-border-color: ThreeDShadow;
     --checkbox-unchecked-bgcolor: -moz-Field;
-    --checkbox-unchecked-hover-bgcolor: -moz-ButtonHoverFace;
+    --checkbox-unchecked-hover-bgcolor: -moz-Field;
     --checkbox-unchecked-active-bgcolor: -moz-Field;
-    --checkbox-checked-bgcolor: -moz-Field;
-    --checkbox-checked-color: -moz-FieldText;
-    --checkbox-checked-border-color: -moz-FieldText;
+    --checkbox-checked-bgcolor: Highlight;
+    --checkbox-checked-color: HighlightText;
+    --checkbox-checked-border-color: Highlight;
+    --checkbox-checked-border-color-hover: Highlight;
     --checkbox-checked-hover-bgcolor: -moz-Field;
     --checkbox-checked-active-bgcolor: -moz-Field;
 
   }
 }
 
 :root {
   font: message-box;
@@ -356,16 +362,17 @@ xul|tab {
   background-color: transparent;
   border-bottom: 2px solid transparent;
   transition: background-color 50ms ease 0s;
 }
 
 xul|tab: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[selected] {
   color: var(--in-content-accent-color) !important; /* override macOS tabbox.css */
   border-bottom-color: currentColor;
 }
 
 /* html buttons */
@@ -476,16 +483,18 @@ html|select:not([size], [multiple]) > ht
 }
 
 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: transparent;
 }
 
 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,
@@ -501,25 +510,46 @@ 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) !important;
+  color: var(--in-content-primary-button-text-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);
+}
+
+@media (prefers-contrast) {
+  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 {
+    border-color: currentColor;
+  }
+
+  html|input[type="checkbox"]:not(:checked):enabled:hover {
+    color: var(--checkbox-checked-border-color);
+  }
+
+  html|input[type="checkbox"]:checked:enabled {
+    /* color sets the border color in HCM */
+    color: var(--checkbox-checked-border-color);
+    fill: var(--checkbox-checked-color);
+  }
 }
 
 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);
@@ -533,25 +563,28 @@ xul|button.primary:not([disabled="true"]
 }
 
 html|button.ghost-button {
   background-color: transparent;
 }
 
 html|button.ghost-button:enabled:hover {
   background-color: var(--in-content-button-background);
+  color: var(--in-content-button-text-color);
 }
 
 html|button.ghost-button:enabled:hover:active {
   background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
 }
 
 @media (-moz-proton) {
 html|button.ghost-button:enabled:hover {
   background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
 }
 
 html|button.ghost-button:enabled:hover:active {
   background-color: var(--in-content-button-background-active);
 }
 }
 
 html|input[type="color"] {
@@ -722,16 +755,17 @@ html|input[type="checkbox"] {
   background-position: center;
   background-repeat: no-repeat;
   flex-shrink: 0; /* avoid shrinking inside flex container */
 }
 
 xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check,
 html|input[type="checkbox"]:enabled:hover {
   background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
 }
 
 xul|checkbox:not([disabled="true"]):hover:active > xul|*.checkbox-check,
 html|input[type="checkbox"]:enabled:hover:active {
   background-color: var(--in-content-button-background-active);
 }
 
 xul|checkbox[checked] > xul|*.checkbox-check,
@@ -880,16 +914,17 @@ xul|*.radio-check {
   background-color: var(--in-content-button-background);
   background-position: center;
   flex-shrink: 0; /* avoid shrinking inside flex container */
 }
 
 html|input[type="radio"]:enabled:hover,
 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
   background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
 }
 
 html|input[type="radio"]:enabled:hover:active,
 xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
   background-color: var(--in-content-button-background-active);
 }
 
 html|input[type="radio"]:checked,
@@ -903,16 +938,17 @@ xul|*.radio-check[selected] {
 
   /* Style the button also when printing with "Print Backgrounds" unchecked */
   color-adjust: exact;
 }
 
 html|input[type="radio"]:enabled:checked:hover,
 xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
   background-color: var(--in-content-primary-button-background-hover);
+  color: var(--in-content-primary-button-text-color-hover);
 }
 
 html|input[type="radio"]:enabled:checked:hover:active,
 xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
   background-color: var(--in-content-primary-button-background-active);
 }
 
 xul|*.radio-label-box {
@@ -983,16 +1019,17 @@ html|*#categories > html|*.category {
 }
 
 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);
 }
 
 #categories > .category:hover:active {
   background-color: var(--in-content-button-background-active);
 }
 
 @media not (-moz-proton) {
 #categories > .category {
@@ -1000,32 +1037,51 @@ html|*#categories > html|*.category:dir(
 }
 
 #categories > .category:hover {
   background-color: var(--in-content-button-background);
 }
 
 #categories > .category:hover:active {
   background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
 }
 } /*** END !proton ***/
 
 #categories > .category[selected],
 #categories > .category.selected {
-  color: var(--in-content-accent-color) !important;
+  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) !important;
+  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;
+  }
+
+  #categories > .category[selected]:hover,
+  #categories > .category[selected]:hover:active,
+  #categories > .category.selected:hover,
+  #categories > .category.selected:hover:active,
+  #categories > .category[selected]:not(:hover),
+  #categories > .category.selected:not(:hover) {
+    background-color: var(--in-content-button-background-hover);
+    color: var(--in-content-button-text-color-hover);
+  }
 }
 
 #categories[keyboard-navigation="true"]:-moz-focusring > .category[current],
 #categories > .category:-moz-focusring {
   outline: 2px solid var(--in-content-focus-outline-color);
   outline-offset: -2px;
 }
 
@@ -1228,16 +1284,17 @@ xul|treecolpicker {
   background-color: var(--in-content-button-background);
   color: inherit;
   padding: 5px 10px;
 }
 
 xul|treecol:not([hideheader="true"], [sortable="false"]):hover,
 xul|treecolpicker: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,
 xul|treecolpicker:hover:active {
   background-color: var(--in-content-button-background-active);
 }
 
 xul|treecol:not([hideheader="true"], :first-child),
@@ -1259,16 +1316,22 @@ xul|treecol[sortDirection="ascending"]:n
   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 {
@@ -1366,46 +1429,52 @@ input[type="text"][warning]:enabled:not(
 }
 
 .sidebar-footer-link {
   height: 36px;
   cursor: default;
   border-radius: 4px;
   display: flex;
   align-items: center;
+}
 
+.sidebar-footer-link,
+.sidebar-footer-link:visited {
   /* Override link style for :hover and :hover:active states */
   text-decoration: none !important;
-  color: inherit !important;
+  color: inherit;
 }
 
 xul|*.sidebar-footer-link {
   display: -moz-box;
   -moz-box-align: center;
 }
 
 .sidebar-footer-link:hover {
   background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
 }
 
 .sidebar-footer-link:hover:active:not([disabled]) {
   background-color: var(--in-content-button-background-active);
+  color: var(--in-content-button-text-color-hover);
 }
 
 @media not (-moz-proton) {
 .sidebar-footer-link {
   border-radius: 2px;
 }
 
 .sidebar-footer-link:hover {
   background-color: var(--in-content-button-background);
 }
 
 .sidebar-footer-link:hover:active:not([disabled]) {
   background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
 }
 } /*** END !proton ***/
 
 .sidebar-footer-link:-moz-focusring {
   outline: 2px solid var(--in-content-focus-outline-color);
   outline-offset: -2px;
 }