feat: adding spacing to theme

src/stories/Spacing.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Box } from '../ui/Box';
+import { Flex } from '../ui/Flex';
+import { Stack } from '../ui/Stack';
+import { Text } from '../ui/Text';
+import { theme } from '../ui/theme/theme';
+
+const SpacingDemo = ({ space, value }: { space: string; value: string }) => (
+  <Stack align="start" spacing={2}>
+    <Flex gap={4} align="center">
+      <Box w={value} h="24px" bg="blue.500" />
+      <Text fontSize="sm" fontWeight="bold">
+        {space}
+      </Text>
+      <Text fontSize="sm">{value}</Text>
+    </Flex>
+  </Stack>
+);
+
+const SpacingShowcase = () => (
+  <Stack align="stretch" spacing={8}>
+    <Text fontSize="2xl" fontWeight="bold">
+      Theme Spacing
+    </Text>
+    {Object.entries(theme.space).map(([space, value]) => (
+      <SpacingDemo key={space} space={space} value={(value as string).toString()} />
+    ))}
+  </Stack>
+);
+
+const meta = {
+  title: 'Theme/Spacing',
+  component: SpacingShowcase,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      source: {
+        code: `
+  // Example SpacingDemo for spacing 4. See w={4}
+  <Stack align="start" spacing={2}>
+    <Flex gap={4} align="center">
+      <Box w={4} h="24px" bg="blue.500" />
+      <Text fontSize="sm" fontWeight="bold">
+        4
+      </Text>
+      <Text fontSize="sm">1rem</Text>
+    </Flex>
+  </Stack>
+              `,
+        language: 'tsx',
+        type: 'auto',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SpacingShowcase>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllSpacing: Story = {};

src/ui/theme/theme.ts

@@ -116,7 +116,19 @@ export const theme = extendTheme({
     4.5: '1.125rem',
   },
   space: {
+    0: '0px',
+    1: '0.25rem', // 4px
+    2: '0.5rem', // 8px
+    3: '0.75rem', // 12px
+    4: '1rem', // 16px
     4.5: '1.125rem',
+    5: '1.25rem', // 20px
+    6: '1.5rem', // 24px
+    8: '2rem', // 32px
+    10: '2.5rem', // 40px
+    12: '3rem', // 48px
+    16: '4rem', // 64px
+    18: '4.5rem', // 72px
   },
   borders: {
     '1px': '1px solid var(--stacks-colors-borderPrimary)',