Fixing Checkbox

0xsequence · Apr 11, 2024 · 94000aa · 94000aa
1 parent 7ab7ad0
commit 94000aa
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 25 deletions.
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -4,12 +4,7 @@ import { forwardRef, Ref } from 'react'
 import { Field, FieldProps } from '~/components/Field'
 import { CheckmarkIcon } from '~/icons'
 
-import {
-  checkboxVariants,
-  CheckboxVariants,
-  indicatorVariants,
-  IndicatorVariants,
-} from './styles.css'
+import { checkboxVariants, CheckboxVariants, indicator } from './styles.css'
 
 export type CheckboxProps = FieldProps &
   CheckboxVariants &
@@ -18,11 +13,11 @@ export type CheckboxProps = FieldProps &
     id?: string
   }
 
-type IndicatorProps = IndicatorVariants & {}
+type IndicatorProps = CheckboxVariants & {}
 
 const Indicator = ({ size = 'sm' }: IndicatorProps) => (
-  <CheckboxPrimitive.Indicator className={indicatorVariants({ size })}>
-    <CheckmarkIcon size={size} />
+  <CheckboxPrimitive.Indicator className={indicator}>
+    <CheckmarkIcon size={size === 'lg' ? 'sm' : 'xs'} />
   </CheckboxPrimitive.Indicator>
 )
 
@@ -55,7 +50,7 @@ export const Checkbox = forwardRef(
           ref={ref}
           {...rest}
         >
-          <Indicator />
+          <Indicator size={size} />
         </CheckboxPrimitive.Root>
       </Field>
     )

diff --git a/src/components/Checkbox/styles.css.ts b/src/components/Checkbox/styles.css.ts
@@ -11,6 +11,7 @@ export const checkboxVariants = recipe({
     borderWidth: 'thin',
     borderStyle: 'solid',
     borderColor: 'borderFocus',
+    background: 'transparent',
     opacity: {
       base: '100',
       hover: '80',
@@ -32,19 +33,11 @@ export const checkboxVariants = recipe({
 
 export type CheckboxVariants = RecipeVariants<typeof checkboxVariants>
 
-export const indicatorVariants = recipe({
-  base: atoms({
-    color: 'text100',
-    background: 'text50',
-    borderRadius: 'xs',
-  }),
-
-  variants: {
-    size: {
-      sm: [{ height: 20, width: 20 }],
-      lg: [{ height: 28, width: 28 }],
-    },
-  },
+export const indicator = atoms({
+  color: 'text100',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 'full',
+  height: 'full',
 })
-
-export type IndicatorVariants = RecipeVariants<typeof indicatorVariants>
diff --git a/src/components/RadioGroup/styles.css.ts b/src/components/RadioGroup/styles.css.ts
@@ -15,6 +15,7 @@ export const radioItemVariants = recipe({
       disabled: 'default',
     },
     opacity: {
+      hover: '80',
       disabled: '50',
     },
   }),