Add states light to checkbox

Author: coderitual

src/components/card-interactive/CardCheckbox.stories.mdx

@@ -235,8 +235,10 @@ import CardCheckbox from './CardCheckbox';
 
 ### States
 
+#### Dark
+
 <Canvas>
-  <Story name="States">
+  <Story name="States Dark">
     {args => (
       <StoryVariantTable>
         <thead>
@@ -313,6 +315,120 @@ import CardCheckbox from './CardCheckbox';
   </Story>
 </Canvas>
 
+#### Light
+
+<Canvas>
+  <Story
+    name="States Light"
+    decorators={[
+      Story => (
+        <div
+          style={{
+            background: 'var(--black)',
+          }}
+        >
+          <Story />
+        </div>
+      ),
+    ]}
+  >
+    {args => (
+      <StoryVariantTable>
+        <thead>
+          <tr>
+            <th />
+            <th>
+              <Text
+                color="text-white"
+                weight="bold"
+                transform="capitalize"
+                size="medium"
+              >
+                default
+              </Text>
+            </th>
+            <th>
+              <Text
+                color="text-white"
+                weight="bold"
+                transform="capitalize"
+                size="medium"
+              >
+                disabled
+              </Text>
+            </th>
+            <th>
+              <Text
+                color="text-white"
+                weight="bold"
+                transform="capitalize"
+                size="medium"
+              >
+                error
+              </Text>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {['outline', 'solid'].map(variant => {
+            return [false, true].map(indicator => {
+              return [false, true].map(checked => {
+                const states = ['default', 'disabled', 'error'].map(states => (
+                  <td>
+                    <CardCheckbox
+                      {...args}
+                      variant={variant}
+                      width="120px"
+                      height="64px"
+                      disabled={states === 'disabled'}
+                      invalid={states === 'error'}
+                      defaultChecked={checked}
+                      color="light"
+                    >
+                      {indicator && <CardCheckbox.Indicator slot="top-left" />}
+                      <Flex
+                        justifyContent="center"
+                        alignItems="center"
+                        fullHeight
+                      >
+                        <Text color="text-gray-50" size="xsmall" weight="bold">
+                          Placeholder
+                        </Text>
+                      </Flex>
+                    </CardCheckbox>
+                  </td>
+                ));
+                return (
+                  <tr>
+                    <td>
+                      <Text
+                        color="text-white"
+                        weight="bold"
+                        size="small"
+                        transform="capitalize"
+                      >
+                        {variant}
+                        <br />
+                        {checked ? 'checked' : 'unchecked'}
+                        <br />
+                        {indicator
+                          ? 'with indicator'
+                          : 'without indicator'}{' '}
+                        <br />
+                      </Text>
+                    </td>
+                    {states}
+                  </tr>
+                );
+              });
+            });
+          })}
+        </tbody>
+      </StoryVariantTable>
+    )}
+  </Story>
+</Canvas>
+
 ### Examples
 
 #### Animated icons