Bug 1551202 - Support dark theme for radio input at abuse reports r=jaws
authorRob Wu <rob@robwu.nl>
Sat, 18 May 2019 05:47:16 +0000
changeset 474431 5142d8acf5e7a44966ddf03f08a4d03aac29ec7f
parent 474430 5dd4697aa1a177aa9f6e950c197b67893b142c1e
child 474432 74c8824ac224b33b6617c9c3b54f08eb944be2a4
push id113153
push userapavel@mozilla.com
push dateSat, 18 May 2019 21:48:51 +0000
treeherdermozilla-inbound@e013f1f17109 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1551202
milestone68.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 1551202 - Support dark theme for radio input at abuse reports r=jaws - Put every color in a variable name. - Add `label:hover` so that the radio input provides visual feedback upon hover. - Implement "pressed" (`[type="radio"]:active`) and `:focus{border:0}` to match Photon's design guidelines at https://design.firefox.com/photon/components/radio-buttons.html - Implement dark theme for radio inputs (using creative freedom as there is no Photon guideline for this). Differential Revision: https://phabricator.services.mozilla.com/D31510
toolkit/mozapps/extensions/content/abuse-report-panel.css
--- a/toolkit/mozapps/extensions/content/abuse-report-panel.css
+++ b/toolkit/mozapps/extensions/content/abuse-report-panel.css
@@ -17,16 +17,35 @@
   --textarea-height: 220px;
   --button-padding: 52px;
   --listitem-padding-bottom: 14px;
   --list-radio-column-size: 28px;
   --note-font-size: 14px;
   --note-font-weight: 400;
   --subtitle-font-size: 16px;
   --subtitle-font-weight: 600;
+
+  --input-radio-border: var(--in-content-box-border-color);
+  --input-radio-background: var(--grey-90-a10);
+  --input-radio-background-hover: var(--grey-90-a20);
+  --input-radio-background-active: var(--grey-90-a30);
+  --input-radio-background-selected: var(--blue-60);
+  --input-radio-background-selected-hover: var(--blue-70);
+  --input-radio-background-selected-active: var(--blue-80);
+  --input-radio-focus-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+@supports -moz-bool-pref("browser.in-content.dark-mode") {
+@media (prefers-color-scheme: dark) {
+  :root {
+    --input-radio-background: #202023;
+    --input-radio-background-hover: #303033;
+    --input-radio-background-active: #404044;
+  }
+}
 }
 
 /* Ensure that the document (embedded in the XUL about:addons using a
    XUL browser) has a transparent background */
 html {
   background-color: transparent;
 }
 
@@ -149,38 +168,49 @@ ul.abuse-report-reasons > li > label > s
   padding-top: 2px;
 }
 
 .abuse-report-contents [type=radio] {
   -moz-appearance: none;
   height: var(--radio-size);
   width: var(--radio-size);
   border-radius: 100%;
-  border: 1px solid var(--grey-90-a30);
-  background-color: var(--grey-90-a10);
+  border: 1px solid var(--input-radio-border);
+  background-color: var(--input-radio-background);
   margin-inline-start: 4px;
   margin-inline-end: 4px;
 }
 
 .abuse-report-contents [type=radio]:focus {
-  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
+  border: none;
+  box-shadow: var(--input-radio-focus-shadow);
 }
 
+.abuse-report-contents label:hover [type=radio]:not(:active),
 .abuse-report-contents [type=radio]:hover {
-  background-color: var(--grey-90-a20);
+  background-color: var(--input-radio-background-hover);
+}
+
+.abuse-report-contents [type=radio]:active {
+  background-color: var(--input-radio-background-active);
 }
 
 .abuse-report-contents [type=radio]:checked {
   background-image: var(--radio-image-url);
-  background-color: var(--blue-60);
+  background-color: var(--input-radio-background-selected);
   background-position: center center;
 }
 
+.abuse-report-contents label:hover [type=radio]:checked:not(:active),
 .abuse-report-contents [type=radio]:checked:hover {
-  background-color: var(--blue-70);
+  background-color: var(--input-radio-background-selected-hover);
+}
+
+.abuse-report-contents [type=radio]:checked:active {
+  background-color: var(--input-radio-background-selected-active);
 }
 
 abuse-report-submit-panel textarea {
   width: 100%;
   height: var(--textarea-height);
   resize: none;
   box-sizing: border-box;
 }