remove variant, add darkmode

Author: indianaPoly

packages/components/src/components/Checkbox/index.tsx

@@ -1,4 +1,4 @@
-import { Box, css, Flex, Input, Text } from '@devup-ui/react'
+import { Box, css, Flex, getTheme, Input, Text } from '@devup-ui/react'
 import { ComponentProps } from 'react'
 
 import { CheckIcon } from './CheckIcon'
@@ -7,7 +7,6 @@ interface CheckboxProps
   extends Omit<ComponentProps<'input'>, 'type' | 'onChange'> {
   children: React.ReactNode
   onChange?: (checked: boolean) => void
-  variant?: 'primary' | 'default'
   label: string
 }
 
@@ -16,10 +15,11 @@ export function Checkbox({
   disabled,
   checked,
   onChange,
-  variant = 'primary',
   label,
   ...props
 }: CheckboxProps) {
+  const theme = getTheme()
+
   return (
     <Flex alignItems="center" gap="8px" h="fit-content">
       <Box h="18px" pos="relative" w="fit-content">
@@ -28,13 +28,11 @@ export function Checkbox({
             disabled
               ? undefined
               : {
-                  primary: {
-                    bg: 'color-mix(in srgb, var(--primary) 20%, #FFF 80%)',
-                  },
-                  default: {
-                    bg: 'color-mix(in srgb, var(--primary) 30%, #FFF 70%)',
-                  },
-                }[variant]
+                  bg:
+                    theme === 'dark'
+                      ? 'color-mix(in srgb, var(--primary) 30%, black 70%)'
+                      : 'color-mix(in srgb, var(--primary) 20%, #FFF 80%)',
+                }
           }
           _checked={{
             bg: '$primary',
@@ -43,34 +41,31 @@ export function Checkbox({
               ? undefined
               : {
                   bg:
-                    variant === 'primary'
-                      ? 'color-mix(in srgb, var(--primary) 100%, #000 15%)'
-                      : 'color-mix(in srgb, var(--primary) 100%, #FFF 15%)',
+                    theme === 'dark'
+                      ? 'color-mix(in srgb, var(--primary) 100%, #FFF 15%)'
+                      : 'color-mix(in srgb, var(--primary) 100%, #000 15%)',
                 },
             _disabled: {
-              bg: '#F0F0F3',
+              bg: theme === 'dark' ? '#47474A' : '#F0F0F3',
             },
           }}
           _disabled={{
-            bg: '#F0F0F3',
+            bg: theme === 'dark' ? '#47474A' : '#F0F0F3',
           }}
           _hover={
             disabled
               ? undefined
               : {
-                  primary: {
-                    bg: 'color-mix(in srgb, var(--primary) 10%, #FFF 90%)',
-                    border: '1px solid var(--primary)',
-                  },
-                  default: {
-                    bg: 'color-mix(in srgb, var(--primary) 100%, #FFF 15%)',
-                    border: '1px solid var(--primary)',
-                  },
-                }[variant]
+                  bg:
+                    theme === 'dark'
+                      ? 'color-mix(in srgb, var(--primary) 20%, black 80%);'
+                      : 'color-mix(in srgb, var(--primary) 10%, #FFF 90%)',
+                  border: '1px solid var(--primary)',
+                }
           }
           accentColor="$primary"
           appearance="none"
-          bg="$contentBackground"
+          bg={theme === 'dark' ? '$inputBg' : '$contentBackground'}
           border="1px solid var(--border)"
           borderRadius="2px"
           boxSize="16px"
@@ -93,17 +88,23 @@ export function Checkbox({
               transform: 'translate(-50%, -50%)',
               pointerEvents: 'none',
             })}
-            color={disabled ? '#D6D7DE' : '#FFF'}
+            color={
+              disabled ? (theme === 'dark' ? '#373737' : '#D6D7DE') : '#FFF'
+            }
           />
         )}
       </Box>
 
-      <label htmlFor={label}>
+      <label
+        className={css({
+          cursor: disabled ? 'not-allowed' : 'pointer',
+        })}
+        htmlFor={label}
+      >
         {typeof children === 'string' ? (
           <Text
             as="span"
             color={disabled ? '#D6D7DE' : '$text'}
-            cursor={disabled ? 'not-allowed' : 'pointer'}
             fontSize="14px"
             style={{ userSelect: 'none', verticalAlign: 'middle' }}
           >

packages/components/src/components/CheckboxLayer/index.tsx

@@ -24,7 +24,6 @@ export interface CheckBoxLayerProps {
   gap?: number
   onCheckboxChange?: (event: CheckboxChangeEvent) => void
   defaultCheckedIds?: string[]
-  variant?: 'primary' | 'default'
 }
 
 export function CheckboxLayer({
@@ -33,7 +32,6 @@ export function CheckboxLayer({
   gap,
   onCheckboxChange,
   defaultCheckedIds = [],
-  variant = 'primary',
 }: CheckBoxLayerProps) {
   const [checkedIds, setCheckedIds] = useState<string[]>(defaultCheckedIds)
 
@@ -71,7 +69,6 @@ export function CheckboxLayer({
           onChange={(checked) =>
             handleCheckboxChange(checkbox.id, checkbox.value, checked)
           }
-          variant={variant}
         >
           {checkbox.value}
         </Checkbox>