feat(spark): update checkbox style

packages/blade/src/components/Checkbox/Checkbox.stories.tsx

@@ -8,6 +8,7 @@ import { Text } from '~components/Typography';
 import { Sandbox } from '~utils/storybook/Sandbox';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import BaseBox from '~components/Box/BaseBox';
+import { Box } from '~components/Box';
 import { Button } from '~components/Button';
 import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
 
@@ -70,6 +71,85 @@ const CheckboxTemplate: StoryFn<typeof CheckboxComponent> = ({ children, ...args
   return <CheckboxComponent {...args}>{children}</CheckboxComponent>;
 };
 
+const checkboxShowcaseColumns: Array<{
+  id: string;
+  label: string;
+  checkboxProps: Partial<CheckboxProps>;
+}> = [
+  { id: 'unchecked', label: 'Unchecked', checkboxProps: {} },
+  { id: 'checked', label: 'Checked', checkboxProps: { isChecked: true } },
+  { id: 'indeterminate', label: 'Indeterminate', checkboxProps: { isIndeterminate: true } },
+];
+
+const checkboxShowcaseRows: Array<{
+  id: string;
+  label: string;
+  rowProps: Partial<CheckboxProps>;
+}> = [
+  { id: 'default', label: 'Default', rowProps: {} },
+  { id: 'disabled', label: 'Disabled', rowProps: { isDisabled: true } },
+  {
+    id: 'error',
+    label: 'Error',
+    rowProps: { validationState: 'error', errorText: 'Error text' },
+  },
+];
+
+const checkboxShowcaseSizes: Array<{ id: string; label: string; size: CheckboxProps['size'] }> = [
+  { id: 'small', label: 'Size Small', size: 'small' },
+  { id: 'medium', label: 'Size Medium', size: 'medium' },
+  { id: 'large', label: 'Size Large', size: 'large' },
+];
+
+const CheckboxShowcase = () => {
+  return (
+    <Box display="flex" flexDirection="column" gap="spacing.7">
+      {checkboxShowcaseSizes.map(({ id, label, size }) => (
+        <Box key={id} display="flex" flexDirection="column" gap="spacing.4">
+          <Text weight="semibold">{label}</Text>
+          <Box
+            display="grid"
+            gridTemplateColumns="140px repeat(3, minmax(160px, 1fr))"
+            rowGap="spacing.4"
+            columnGap="spacing.4"
+            alignItems="center"
+            justifyItems="center"
+          >
+            <Box />
+            {checkboxShowcaseColumns.map((column) => (
+              <Text key={column.id} size="small" textAlign="center" weight="medium">
+                {column.label}
+              </Text>
+            ))}
+            {checkboxShowcaseRows.map((row) => (
+              <React.Fragment key={row.id}>
+                <Box display="flex" justifyContent="flex-end" width="100%">
+                  <Text size="small" weight="medium">
+                    {row.label}
+                  </Text>
+                </Box>
+                {checkboxShowcaseColumns.map((column) => (
+                  <Box
+                    key={`${row.id}-${column.id}`}
+                    padding="spacing.3"
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                  >
+                    <CheckboxComponent size={size} {...row.rowProps} {...column.checkboxProps}>
+                      Option
+                    </CheckboxComponent>
+                  </Box>
+                ))}
+              </React.Fragment>
+            ))}
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
 export const Default = CheckboxTemplate.bind({});
 Default.storyName = 'Default';
 
@@ -159,3 +239,7 @@ checkboxRef.parameters = {
     },
   },
 };
+
+export const Showcase: StoryFn<typeof CheckboxComponent> = () => {
+  return <CheckboxShowcase />;
+};

packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIconWrapperStyles.ts

@@ -6,6 +6,7 @@ import type { Theme } from '~components/BladeProvider';
 import { makeSpace } from '~utils/makeSpace';
 import { makeSize } from '~utils/makeSize';
 import { makeBorderSize } from '~utils/makeBorderSize';
+import { size as sizeToken } from '~tokens/global';
 
 export type CheckboxRectProps = Omit<CheckboxIconProps, 'state'> & {
   isChecked: boolean;
@@ -26,6 +27,11 @@ const getCheckboxIconWrapperStyles = ({
   const border = checkboxIconColors.variants[variant].border[checked];
   const backgroundColor = getIn(theme, background);
   const borderColor = getIn(theme, border);
+  console.log({
+    border,
+    variant,
+    checked,
+  });
 
   return {
     position: 'relative',
@@ -38,9 +44,10 @@ const getCheckboxIconWrapperStyles = ({
     borderWidth: makeBorderSize(theme.border.width.thick),
     borderStyle: 'solid',
     margin: makeSpace(theme.spacing[1]),
-    borderRadius: makeSize(theme.border.radius.small),
+    borderRadius: makeSize(theme.border.radius.xsmall),
     backgroundColor,
     borderColor,
+    paddingTop: size === 'small' ? makeSize(sizeToken['1']) : 0,
   };
 };
 

packages/blade/src/components/Checkbox/checkboxTokens.ts

@@ -61,7 +61,7 @@ const checkboxIconColors: CheckboxIconColors = {
     default: {
       border: {
         checked: 'colors.interactive.border.primary.default',
-        unchecked: 'colors.interactive.border.gray.default',
+        unchecked: 'colors.interactive.border.gray.highlighted',
       },
       background: {
         checked: 'colors.interactive.background.primary.default',
@@ -70,7 +70,7 @@ const checkboxIconColors: CheckboxIconColors = {
     },
     disabled: {
       border: {
-        checked: 'colors.interactive.border.primary.disabled',
+        checked: 'colors.transparent',
         unchecked: 'colors.interactive.border.gray.disabled',
       },
       background: {
@@ -99,7 +99,7 @@ const checkboxHoverTokens: SelectorInputHoverTokens = {
     },
     border: {
       checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color
-      unchecked: 'colors.interactive.border.gray.default',
+      unchecked: 'colors.interactive.border.gray.highlighted',
     },
   },
 };