[Glitch] Add components RadioButton and Fieldset

Port 29e5532870 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/form_fields/checkbox.module.scss

@@ -1,5 +1,6 @@
 .checkbox {
   --size: 16px;
+  --border-width: 1px;
 
   appearance: none;
   box-sizing: border-box;
@@ -10,18 +11,26 @@
   height: var(--size);
   vertical-align: top;
   border-radius: calc(var(--size) / 4);
-  border: 1px solid var(--color-border-primary);
+  border: var(--border-width) solid var(--color-border-primary);
   background-color: var(--color-bg-primary);
   transition: 0.15s ease-out;
   transition-property: background-color, border-color;
   cursor: pointer;
 
-  @supports not (appearance: none) {
-    accent-color: var(--color-bg-brand-base);
+  /* Increase clickable area, prevents misclicks and covers gap between control and label */
+  &::after {
+    content: '';
+    position: absolute;
+
+    --spread: calc(var(--border-width) + var(--form-field-label-gap, 8px));
+
+    inset-inline: calc(-1 * var(--spread));
+    inset-block: calc(-0.75 * var(--spread));
   }
 
   &:disabled {
-    background: var(--color-bg-secondary);
+    background: var(--color-bg-tertiary);
+    border: none;
     cursor: not-allowed;
   }
 
@@ -53,9 +62,12 @@
     border-color: var(--color-bg-brand-base);
 
     &:disabled {
-      border-color: var(--color-bg-disabled);
-      background: var(--color-bg-disabled);
-      color: var(--color-text-on-disabled);
+      border: none;
+      background-color: var(--color-text-disabled);
+
+      &::before {
+        background-color: var(--color-bg-tertiary);
+      }
     }
 
     &::before {