Improve Box component

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/.storybook/preview.tsx

@@ -25,14 +25,12 @@ const preview: Preview = {
       defaultTheme: 'light',
     }),
     (Story, context) => {
-      const theme = context.globals.theme || 'light';
-      const backgroundColor = theme === 'light' ? '#ffffff' : '#000000';
-
-      document.body.style.backgroundColor = backgroundColor;
+      document.body.style.backgroundColor = 'var(--canon-background)';
 
       const docsStoryElements = document.getElementsByClassName('docs-story');
       Array.from(docsStoryElements).forEach(element => {
-        (element as HTMLElement).style.backgroundColor = backgroundColor;
+        (element as HTMLElement).style.backgroundColor =
+          'var(--canon-background)';
       });
 
       return <Story />;

packages/canon/src/components/box/box.css.ts

@@ -17,4 +17,5 @@ import { style } from '@vanilla-extract/css';
 
 export const base = style({
   fontFamily: 'var(--canon-font-sans)',
+  color: 'var(--canon-text-primary)',
 });

packages/canon/src/components/box/box.stories.tsx

@@ -17,6 +17,97 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Box } from './box';
+import { listResponsiveValues } from '../../utils/list-values';
+import { responsiveProperties, colorProperties } from './sprinkles.css';
+
+const argTypesResponsive = Object.keys(responsiveProperties.styles)
+  .filter(
+    n =>
+      ![
+        'm',
+        'mb',
+        'ml',
+        'mr',
+        'mt',
+        'mx',
+        'my',
+        'p',
+        'pb',
+        'pl',
+        'pr',
+        'pt',
+        'px',
+        'py',
+      ].includes(n),
+  )
+  .reduce<Record<string, any>>((acc, n) => {
+    if (
+      [
+        'margin',
+        'marginBottom',
+        'marginLeft',
+        'marginRight',
+        'marginTop',
+        'marginX',
+        'marginY',
+        'padding',
+        'paddingBottom',
+        'paddingLeft',
+        'paddingRight',
+        'paddingTop',
+        'paddingX',
+        'paddingY',
+      ].includes(n)
+    ) {
+      acc[n] = {
+        control: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      };
+    } else {
+      acc[n] = {
+        control: 'select',
+        options: listResponsiveValues(
+          n as keyof typeof responsiveProperties.styles,
+        ),
+      };
+    }
+    return acc;
+  }, {});
+
+const argTypesColor = Object.keys(colorProperties.styles).reduce<
+  Record<string, any>
+>((acc, n) => {
+  acc[n as keyof typeof colorProperties.styles] = {
+    control: 'select',
+    options: Object.keys(
+      colorProperties.styles[n as keyof typeof colorProperties.styles].values,
+    ),
+  };
+  return acc;
+}, {});
+
+const argTypes = {
+  ...argTypesResponsive,
+  ...argTypesColor,
+};
+
+// Sort the resulting object keys alphabetically
+const sortedArgTypes = Object.keys(argTypes)
+  .sort()
+  .reduce((acc, key) => {
+    acc[key] = argTypes[key];
+    return acc;
+  }, {} as Record<string, any>);
+
+// Add 'as' and 'children' to the sortedArgTypes
+sortedArgTypes['as'] = {
+  control: 'select',
+  options: ['div', 'span', 'article', 'section'],
+};
+
+sortedArgTypes['children'] = {
+  control: 'text',
+};
 
 const meta = {
   title: 'Layout/Box',
@@ -24,24 +115,22 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  // tags: ['autodocs'],
+  argTypes: sortedArgTypes,
+  args: {
+    as: 'div',
+    background: 'elevation1',
+    borderRadius: 'small',
+    children: 'Basic Box',
+    display: 'block',
+    padding: 'sm',
+  },
 } satisfies Meta<typeof Box>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
-  render: () => (
-    <Box
-      padding="xs"
-      background="background"
-      paddingX="lg"
-      paddingY="md"
-      borderRadius="small"
-    >
-      Basic Box
-    </Box>
-  ),
+  args: {},
 };
 
 export const Responsive: Story = {

packages/canon/src/theme/theme.css

@@ -1,14 +1,14 @@
 /* Light theme */
 :root {
   --canon-accent: #1ed760;
-  --canon-background: #fff;
-  --canon-surface-1: #f5f5f5;
-  --canon-surface-2: #000;
+  --canon-background: #f8f8f8;
+  --canon-surface-1: #fff;
+  --canon-surface-2: #f4f4f4;
   --canon-outline: #666;
   --canon-outline-focus: #ccc;
   --canon-error: #f50000;
-  --canon-text-primary: #f0f0f0;
-  --canon-text-secondary: #666;
+  --canon-text-primary: #000;
+  --canon-text-secondary: #646464;
   --canon-box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.05);
   --canon-box-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.1);
   --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2);
@@ -31,9 +31,9 @@
 /* Dark theme */
 [data-theme='dark'] {
   --canon-accent: #1ed760;
-  --canon-background: #fff;
-  --canon-surface-1: #f5f5f5;
-  --canon-surface-2: #000;
+  --canon-background: #000;
+  --canon-surface-1: #121212;
+  --canon-surface-2: #292929;
   --canon-outline: #666;
   --canon-outline-focus: #ccc;
   --canon-text-primary: #f0f0f0;