fix: darkmode on radio button and checkbox labels (#1518)

Fixed Radio Button and Checkbox Appearance in Dark Mode

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))',

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>

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>

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%;