Refactor checkbox/radio selection SVGs to use background masks to work in darkmode. Closes #15.

Author: knadh

src/css/form.css

@@ -74,17 +74,22 @@
     &:checked {
       background-color: var(--primary);
       border-color: var(--primary);
-      background-position: center;
-      background-repeat: no-repeat;
     }
   }
 
   input[type=checkbox] {
     border-radius: var(--radius-small);
-
-    &:checked {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
-      background-size: 0.75rem;
+    position: relative;
+
+    &:checked::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-color: var(--primary-foreground);
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+      mask-size: 90%;
+      mask-position: center;
+      mask-repeat: no-repeat;
     }
 
     &[role=switch] {
@@ -114,7 +119,10 @@
 
       &:checked {
         background-color: var(--primary);
-        background-image: none;
+
+        &::after {
+          content: none;
+        }
 
         &::before {
           transform: translateY(-50%) translateX(var(--switch-height));
@@ -125,10 +133,17 @@
 
   input[type=radio] {
     border-radius: var(--radius-full);
-
-    &:checked {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='white'/%3E%3C/svg%3E");
-      background-size: 100%;
+    position: relative;
+
+    &:checked::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-color: var(--primary-foreground);
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");
+      mask-size: 100%;
+      mask-position: center;
+      mask-repeat: no-repeat;
     }
   }