From d7de3b08c1a2ec069388ad16893b4d47c796a457 Mon Sep 17 00:00:00 2001
From: Doug Andrade <dandrademv@gmail.com>
Date: Thu, 12 Dec 2024 23:55:40 -0500
Subject: [PATCH] fix: darkmode on radio button and checkbox labels  (#1518)

Fixed Radio Button and Checkbox Appearance in Dark Mode
---
 packages/tailwind-config/index.cjs                            | 1 +
 .../ui/primitives/document-flow/advanced-fields/checkbox.tsx  | 4 ++--
 .../ui/primitives/document-flow/advanced-fields/radio.tsx     | 4 ++--
 packages/ui/styles/theme.css                                  | 2 ++
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/tailwind-config/index.cjs b/packages/tailwind-config/index.cjs
index 18cd2e396..437ad6497 100644
--- a/packages/tailwind-config/index.cjs
+++ b/packages/tailwind-config/index.cjs
@@ -16,6 +16,7 @@ module.exports = {
       },
       colors: {
         border: 'hsl(var(--border))',
+        'field-border': 'hsl(var(--field-border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
         background: 'hsl(var(--background))',
diff --git a/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx b/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
index 14a971df7..a846e367e 100644
--- a/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
+++ b/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
@@ -33,12 +33,12 @@ export const CheckboxField = ({ field }: CheckboxFieldProps) => {
         parsedFieldMeta.values.map((item: { value: string; checked: boolean }, index: number) => (
           <div key={index} className="flex items-center gap-x-1.5">
             <Checkbox
-              className="h-3 w-3"
+              className="dark:border-field-border h-3 w-3 bg-white"
               checkClassName="text-white"
               id={`checkbox-${index}`}
               checked={item.checked}
             />
-            <Label htmlFor={`checkbox-${index}`} className="text-xs">
+            <Label htmlFor={`checkbox-${index}`} className="text-xs font-normal text-black">
               {item.value}
             </Label>
           </div>
diff --git a/packages/ui/primitives/document-flow/advanced-fields/radio.tsx b/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
index ba1197c84..356aebfd8 100644
--- a/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
+++ b/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
@@ -34,12 +34,12 @@ export const RadioField = ({ field }: RadioFieldProps) => {
           {parsedFieldMeta.values?.map((item, index) => (
             <div key={index} className="flex items-center gap-x-1.5">
               <RadioGroupItem
-                className="pointer-events-none h-3 w-3"
+                className="dark:border-field-border pointer-events-none h-3 w-3"
                 value={item.value}
                 id={`option-${index}`}
                 checked={item.checked}
               />
-              <Label htmlFor={`option-${index}`} className="text-xs">
+              <Label htmlFor={`option-${index}`} className="text-xs font-normal text-black">
                 {item.value}
               </Label>
             </div>
diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css
index a7d802e71..dd973aa62 100644
--- a/packages/ui/styles/theme.css
+++ b/packages/ui/styles/theme.css
@@ -159,6 +159,8 @@
     --border: 0 0% 27.9%;
     --input: 0 0% 27.9%;
 
+    --field-border: 214.3 31.8% 91.4%;
+
     --primary: 95.08 71.08% 67.45%;
     --primary-foreground: 95.08 71.08% 10%;