fix: standardise checkboxes

Checkboxes were previously styled super wonky due to
the usage of checkboxClassName which styled the checkbox
trigger.

This change reverts all that and leaves it with sensible defaults
across dark and light mode.

packages/ui/components/document/document-email-checkboxes.tsx

@@ -27,7 +27,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.RecipientSigned}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.recipientSigned}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.RecipientSigned]: Boolean(checked) })
@@ -66,7 +65,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.RecipientSigningRequest}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.recipientSigningRequest}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.RecipientSigningRequest]: Boolean(checked) })
@@ -105,7 +103,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.RecipientRemoved}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.recipientRemoved}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.RecipientRemoved]: Boolean(checked) })
@@ -144,7 +141,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.DocumentPending}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.documentPending}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.DocumentPending]: Boolean(checked) })
@@ -184,7 +180,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.DocumentCompleted}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.documentCompleted}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.DocumentCompleted]: Boolean(checked) })
@@ -223,7 +218,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.DocumentDeleted}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.documentDeleted}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.DocumentDeleted]: Boolean(checked) })
@@ -262,7 +256,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.OwnerDocumentCompleted}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.ownerDocumentCompleted}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.OwnerDocumentCompleted]: Boolean(checked) })

packages/ui/primitives/checkbox.tsx

@@ -22,7 +22,7 @@ const Checkbox = React.forwardRef<
     {...props}
   >
     <CheckboxPrimitive.Indicator
-      className={cn('text-primary flex items-center justify-center', checkClassName)}
+      className={cn('text-primary-foreground flex items-center justify-center', checkClassName)}
     >
       <Check className="h-3 w-3 stroke-[3px]" />
     </CheckboxPrimitive.Indicator>

packages/ui/primitives/document-flow/add-fields.tsx

@@ -800,7 +800,6 @@ export const AddFieldsFormPartial = ({
                         <Checkbox
                           {...field}
                           id="typedSignatureEnabled"
-                          checkClassName="text-white"
                           checked={value}
                           onCheckedChange={(checked) => field.onChange(checked)}
                           disabled={form.formState.isSubmitting}

packages/ui/primitives/document-flow/add-signers.tsx

@@ -383,7 +383,6 @@ export const AddSignersFormPartial = ({
                     <Checkbox
                       {...field}
                       id="signingOrder"
-                      checkClassName="text-white"
                       checked={field.value === DocumentSigningOrder.SEQUENTIAL}
                       onCheckedChange={(checked) =>
                         field.onChange(
@@ -697,7 +696,6 @@ export const AddSignersFormPartial = ({
                 <Checkbox
                   id="showAdvancedRecipientSettings"
                   className="h-5 w-5"
-                  checkClassName="dark:text-white text-primary"
                   checked={showAdvancedSettings}
                   onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
                 />

packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx

@@ -34,7 +34,6 @@ export const CheckboxField = ({ field }: CheckboxFieldProps) => {
           <div key={index} className="flex items-center gap-x-1.5">
             <Checkbox
               className="dark:border-field-border h-3 w-3 bg-white"
-              checkClassName="text-white"
               id={`checkbox-${index}`}
               checked={item.checked}
             />

packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx

@@ -205,8 +205,7 @@ export const CheckboxFieldAdvancedSettings = ({
           {values.map((value, index) => (
             <div key={index} className="mt-2 flex items-center gap-4">
               <Checkbox
-                className="data-[state=checked]:bg-documenso border-foreground/30 h-5 w-5"
-                checkClassName="text-white"
+                className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
                 checked={value.checked}
                 onCheckedChange={(checked) => handleCheckboxValue(index, 'checked', checked)}
               />
@@ -217,7 +216,7 @@ export const CheckboxFieldAdvancedSettings = ({
               />
               <button
                 type="button"
-                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center  text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                 onClick={() => removeValue(index)}
               >
                 <Trash className="h-5 w-5" />

packages/ui/primitives/template-flow/add-template-fields.tsx

@@ -587,7 +587,6 @@ export const AddTemplateFieldsFormPartial = ({
                         <Checkbox
                           {...field}
                           id="typedSignatureEnabled"
-                          checkClassName="text-white"
                           checked={value}
                           onCheckedChange={(checked) => field.onChange(checked)}
                           disabled={form.formState.isSubmitting}

packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx

@@ -352,7 +352,6 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                     <Checkbox
                       {...field}
                       id="signingOrder"
-                      checkClassName="text-white"
                       checked={field.value === DocumentSigningOrder.SEQUENTIAL}
                       onCheckedChange={(checked) =>
                         field.onChange(
@@ -651,7 +650,6 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                 <Checkbox
                   id="showAdvancedRecipientSettings"
                   className="h-5 w-5"
-                  checkClassName="dark:text-white text-primary"
                   checked={showAdvancedSettings}
                   onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
                 />