feat: able checkicon color

Author: indianaPoly

packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx

@@ -256,6 +256,7 @@ describe('Checkbox', () => {
       border: '#00ff00',
       text: '#0000ff',
       inputBg: '#ffff00',
+      checkIcon: '#000000',
     }
 
     const { container } = render(
@@ -273,6 +274,7 @@ describe('Checkbox', () => {
       border: '#00ff00',
       text: '#0000ff',
       inputBg: '#ffff00',
+      checkIcon: '#000000',
     }
 
     const { container } = render(
@@ -344,12 +346,28 @@ describe('Checkbox', () => {
     })
   })
 
+  it('should apply checkIcon color to CSS variables', () => {
+    const customColors = {
+      checkIcon: '#checkIcon-custom',
+    }
+
+    const { container } = render(
+      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+    )
+
+    const input = container.querySelector('input')
+    expect(input).toHaveStyle({
+      '--checkIcon': '#checkIcon-custom',
+    })
+  })
+
   it('should apply all custom colors to CSS variables', () => {
     const customColors = {
       primary: '#primary-custom',
       border: '#border-custom',
       text: '#text-custom',
       inputBg: '#inputBg-custom',
+      checkIcon: '#checkIcon-custom',
     }
 
     const { container } = render(
@@ -362,6 +380,7 @@ describe('Checkbox', () => {
       '--border': '#border-custom',
       '--text': '#text-custom',
       '--inputBg': '#inputBg-custom',
+      '--checkIcon': '#checkIcon-custom',
     })
   })
 
@@ -374,6 +393,7 @@ describe('Checkbox', () => {
     expect(input?.style.getPropertyValue('--border')).toBe('')
     expect(input?.style.getPropertyValue('--text')).toBe('')
     expect(input?.style.getPropertyValue('--inputBg')).toBe('')
+    expect(input?.style.getPropertyValue('--checkIcon')).toBe('')
   })
 
   it('should work properly with onChange when colors are applied', async () => {
@@ -383,6 +403,7 @@ describe('Checkbox', () => {
       border: '#00ff00',
       text: '#0000ff',
       inputBg: '#ffff00',
+      checkIcon: '#000000',
     }
 
     const { container } = render(

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

@@ -12,6 +12,7 @@ interface CheckboxProps
     border?: string
     text?: string
     inputBg?: string
+    checkIcon?: string
   }
 }
 
@@ -75,6 +76,7 @@ export function Checkbox({
             border: colors?.border,
             text: colors?.text,
             inputBg: colors?.inputBg,
+            checkIcon: colors?.checkIcon,
           }}
           type="checkbox"
           {...props}
@@ -83,12 +85,14 @@ export function Checkbox({
           <Box
             as={CheckIcon}
             props={{
-              color: disabled ? 'light-dark(#D6D7DE, #373737)' : '#FFF',
+              color: disabled
+                ? 'light-dark(#D6D7DE, #373737)'
+                : 'var(--checkIcon, #FFF)',
               className: css({
                 left: '50%',
                 pointerEvents: 'none',
                 pos: 'absolute',
-                top: '8px',
+                top: '60%',
                 transform: 'translate(-50%, -50%)',
               }),
             }}