From 40eed1f3467c24056cb503d1a585e1d3ffb0792b Mon Sep 17 00:00:00 2001
From: Richard Marti <richard.marti@gmail.com>
Date: Wed, 6 Dec 2023 16:00:28 +0000
Subject: [PATCH] Bug 1868015 - Port bug 1867769 - Remove custom styling for
 radio/checkbox. r=freaktechnik

Differential Revision: https://phabricator.services.mozilla.com/D195401

--HG--
extra : rebase_source : a8fa5b36047b38ac2365974be17bd1f4e92c9246
extra : histedit_source : 3b174ca3cd95abee53a9eb6efe08c15a44ce85ad
---
 .../common/widgets/calendar-widgets.css       |  4 +++
 mail/themes/shared/mail/inContentDialog.css   | 35 +------------------
 mail/themes/shared/mail/themeableDialog.css   | 29 +--------------
 mail/themes/shared/mail/variables.css         |  9 -----
 4 files changed, 6 insertions(+), 71 deletions(-)

diff --git a/calendar/base/themes/common/widgets/calendar-widgets.css b/calendar/base/themes/common/widgets/calendar-widgets.css
index 4f9c85bdc0..a61e42b2c2 100644
--- a/calendar/base/themes/common/widgets/calendar-widgets.css
+++ b/calendar/base/themes/common/widgets/calendar-widgets.css
@@ -145,6 +145,10 @@ checkbox.treenode-checkbox > .checkbox-label-center-box > .checkbox-label-box >
   border-bottom: 1px solid -moz-Dialog;
 }
 
+#task-tree-filtergroup {
+  accent-color: var(--selected-item-color);
+}
+
 .selected-text {
   font-weight: bold;
 }
diff --git a/mail/themes/shared/mail/inContentDialog.css b/mail/themes/shared/mail/inContentDialog.css
index 00e5bd3428..6db2f8e56e 100644
--- a/mail/themes/shared/mail/inContentDialog.css
+++ b/mail/themes/shared/mail/inContentDialog.css
@@ -183,40 +183,7 @@ dialog .radio-list li {
 /* Radio button */
 
 dialog input[type="radio"] {
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  border: 1px solid var(--dialog-box-border-color);
-  border-radius: 100%;
-  margin-block: 2px;
-  margin-inline: 0 6px;
-  background-color: var(--dialog-box-background-color);
-  background-position: center;
-}
-
-dialog input[type="radio"]:enabled:hover {
-  background-color: var(--dialog-button-background-color-hover);
-}
-
-dialog input[type="radio"]:enabled:hover:active {
-  background-color: var(--dialog-button-background-color-active);
-}
-
-dialog input[type="radio"]:checked {
-  -moz-context-properties: fill;
-  fill: currentColor;
-  color: var(--dialog-highlight-text-color);
-  background-color: var(--dialog-highlight-color);
-  /* background-image: url("chrome://global/skin/icons/radio.svg"); */
-  border-color: var(--dialog-primary-background-active);
-  color-adjust: exact;
-}
-
-dialog input[type="radio"]:enabled:checked:hover {
-  background-color: var(--dialog-primary-background-hover);
-  border-color: var(--dialog-primary-background-active);
-}
+  appearance: auto;
 
 /* Buttons area */
 
diff --git a/mail/themes/shared/mail/themeableDialog.css b/mail/themes/shared/mail/themeableDialog.css
index 602bc017a9..3a6bc24a1a 100644
--- a/mail/themes/shared/mail/themeableDialog.css
+++ b/mail/themes/shared/mail/themeableDialog.css
@@ -16,9 +16,6 @@
   --box-text-color: MenuText;
   --box-background-color: Menu;
   --box-border-color: ThreeDShadow;
-  --checkbox-border-color: var(--field-border-color);
-  --checkbox-unchecked-bgcolor: var(--field-background-color);
-  --checkbox-unchecked-hover-bgcolor: var(--field-background-color);
   --field-text-color: FieldText;
   --field-background-color: Field;
   --field-border-color: rgba(128, 128, 128, 0.6);
@@ -70,9 +67,6 @@
   --box-text-color: MenuText;
   --box-background-color: Menu;
   --box-border-color: ThreeDShadow;
-  --checkbox-border-color: rgba(128, 128, 128, 0.6);
-  --checkbox-unchecked-bgcolor: Field;
-  --checkbox-unchecked-hover-bgcolor: Field;
   --field-text-color: FieldText;
   --field-background-color: Field;
   --field-border-color: rgba(128, 128, 128, 0.6);
@@ -372,11 +366,7 @@ label {
 
 radio,
 checkbox {
-  appearance: none;
-
-  &[disabled="true"] {
-    color: #999;
-  }
+  accent-color: var(--selected-item-color);
 }
 
 checkbox {
@@ -385,27 +375,10 @@ checkbox {
 }
 
 .radio-check {
-  appearance: none;
   width: 16px;
   height: 16px;
-  border: 1px solid var(--field-border-color);
-  border-radius: 50%;
   margin: 0;
   margin-inline-end: 6px;
-  background-color: var(--field-background-color);
-
-  &[selected] {
-    /* list-style-image: url("chrome://global/skin/icons/radio.svg"); */
-    -moz-context-properties: fill;
-    color: var(--checkbox-checked-border-color, currentColor);
-    fill: var(--checkbox-checked-color, AccentColorText);
-    background-color: var(--checkbox-checked-bgcolor, AccentColor);
-  }
-}
-
-radio:not([disabled="true"]):hover > .radio-check,
-checkbox:not([disabled="true"]):hover > .checkbox-check {
-  border-color: var(--selected-item-color);
 }
 
 :root[lwt-tree] {
diff --git a/mail/themes/shared/mail/variables.css b/mail/themes/shared/mail/variables.css
index c8f52cb8bc..62a196e55c 100644
--- a/mail/themes/shared/mail/variables.css
+++ b/mail/themes/shared/mail/variables.css
@@ -49,15 +49,6 @@
   --button-pressed-indicator-border-color: light-dark(var(--color-blue-60), var(--color-blue-40));
   --button-pressed-indicator-shadow: light-dark(0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 0 rgba(0, 0, 0, 0.25));
   --button-pressed-indicator-padding: 6px;
-  --checkbox-border-color: var(--toolbar-field-border-color);
-  --checkbox-unchecked-bgcolor: var(--toolbar-field-background-color);
-  --checkbox-unchecked-hover-bgcolor: color-mix(in srgb, AccentColor 4%, var(--checkbox-unchecked-bgcolor));
-  --checkbox-unchecked-active-bgcolor: var(--button-active-background-color);
-  --checkbox-checked-border-color: transparent;
-  --checkbox-checked-color: var(--button-primary-color);
-  --checkbox-checked-bgcolor: var(--selected-item-color);
-  --checkbox-checked-hover-bgcolor: color-mix(in srgb, black 10%, var(--selected-item-color));
-  --checkbox-checked-active-bgcolor: color-mix(in srgb, black 20%, var(--selected-item-color));
   --chrome-content-separator-color: light-dark(var(--color-gray-30), var(--color-gray-90));
   --focus-outline-color: var(--toolbar-field-focus-border-color);
   --focus-outline-offset: 2px;