The specs:
https://design.firefox.com/photon/components/radio-buttons.html

This also gets rid of the non clickable area between the checkbox and its label.

Depends on D103390

This also gets rid of the non clickable area between the checkbox and its label.

Depends on D103391

This also gets rid of the non clickable area between the radiobutton and its label.

Depends on D103392

Depends on D103393

Depends on D103394

This also gets rid of the non clickable area between the checkbox/radiobutton and its label.

Depends on D103395

This also gets rid of the non clickable area between the checkbox and its label.

Depends on D103397

This also gets rid of the non clickable area between the checkbox/radiobuttons and their label.

Depends on D103398

This also gets rid of the non clickable area between the checkbox and its label.

Depends on D103399

This also makes the labels themselves clickable, and not just the checkboxes.

Depends on D103400

https://hg.mozilla.org/mozilla-central/rev/d07c76355cda
https://hg.mozilla.org/mozilla-central/rev/2be1ec4d0d47
https://hg.mozilla.org/mozilla-central/rev/0e77a19d6439
https://hg.mozilla.org/mozilla-central/rev/440ec2cf3e8e
https://hg.mozilla.org/mozilla-central/rev/f619503d081a
https://hg.mozilla.org/mozilla-central/rev/7b02086763d4
https://hg.mozilla.org/mozilla-central/rev/00fbecf58239
https://hg.mozilla.org/mozilla-central/rev/2f14def87a42
https://hg.mozilla.org/mozilla-central/rev/1ca7671397e8
https://hg.mozilla.org/mozilla-central/rev/8816e3b6b2d7
https://hg.mozilla.org/mozilla-central/rev/ec51a9295fe4

I'd like QA to verify this bug, along with bug 1685595 and bug 1685628 (they all touch similar aspects of the same element(s)).
TLDR:

1. Make sure the checkboxes/radiobutton across the in-content UI (not chrome UI) all[*] look the same (for checkboxes (when checked)- white checkmark surrounded by a blue rectangle, for radiobuttons (when selected)- white dot in a blue ring).
2. Make sure they are clickable also at least 3px above and below the buttons themselves.
3. Make sure they all have proper hover / active (i.e. mouse-down) / disabled (where relevant) effects.

Non exhaustive list of places to test this in:
about:preferences
about:profiling
about:telemetry ("current data")
about:welcomeback
about:config
about:addons (open an installed extension > scroll down to the "Allow automatic updates" section)
about:addons (the report abuse dialog)
The new print dialog

[*] There are a few exceptions, like in about:newtab's AS Router Admin, the checkbox under the What's New Panel in the main menu, about:memory, about:checkerboard

Hi Itiel!

I looked into this respecting the above-mentioned scenarios and pages using Firefox 87.0a1 (20210219094547) .
On Windows 10x64 I tried with dark and white combined themes as well and the checkboxes and radio buttons looks as described in step1 from above. Also they are clickable above and bellow as stated in step 2. They all have the same effect on hover, disabled, clicked and disabled. On about:addons (the report abuse dialog) -> I don't know for sure that the 3px rule is applied as well: screenrecording

On macOS 11.2 however there are some radio button and checkboxes that I think they are not respecting the step2 rule. You have to be really close to them in order to activate them. I made a screen recording witch includes the hovered, selected and mouse-down states as well: link.

At first glymse the problem with step2 rule happens on Ubuntu 18 as well, at least on below side, with certain checkboxes and radio buttons. Screen recording: link

Is this expected? Thank you in advance!