feat: added elevation to redesign

src/stories/Elevation.stories.tsx

@@ -0,0 +1,77 @@
+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 { useColorMode } from '../ui/hooks/useColorMode';
+import { theme } from '../ui/theme/theme';
+
+const ElevationDemo = () => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <Stack gap={8}>
+      <Flex direction="column" gap={8} p={4}>
+        <Text fontSize="2xl" fontWeight="bold">
+          Elevation Showcase
+        </Text>
+        {Object.entries(theme.semanticTokens.shadows).map(([elevationName, elevationValue]) => (
+          <Flex key={elevationName} align="center" gap={4}>
+            <Box
+              width="200px"
+              height="100px"
+              bg={colorMode === 'light' ? 'white' : 'gray.800'}
+              boxShadow={(elevationValue as any).default}
+              borderRadius="md"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text>{elevationName}</Text>
+            </Box>
+            <Text>
+              {elevationName}:{' '}
+              {(elevationValue as any)[colorMode === 'light' ? 'default' : '_dark']}
+            </Text>
+          </Flex>
+        ))}
+      </Flex>
+      <Flex direction="column" gap={8} bg="#211F1F" p={4}>
+        {Object.entries(theme.semanticTokens.shadows).map(([elevationName, elevationValue]) => (
+          <Flex key={elevationName} align="center" gap={4}>
+            <Box
+              width="200px"
+              height="100px"
+              bg={'#211F1F'}
+              boxShadow={(elevationValue as any)._dark}
+              borderRadius="md"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text>{elevationName}</Text>
+            </Box>
+            <Text color="white">
+              {elevationName}: {(elevationValue as any)._dark}
+            </Text>
+          </Flex>
+        ))}
+      </Flex>
+    </Stack>
+  );
+};
+
+const meta = {
+  title: 'Theme/Elevation',
+  component: ElevationDemo,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ElevationDemo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllElevations: Story = {};

src/ui/theme/theme.ts

@@ -81,6 +81,20 @@ export const theme = extendTheme({
         _dark: 'white',
       },
     },
+    shadows: {
+      elevation1: {
+        default: '0 2px 6px rgba(183, 180, 176, 0.2)',
+        _dark: '0 2px 6px rgba(0, 0, 0, 0.2)',
+      },
+      elevation2: {
+        default: '0 8px 16px rgba(183, 180, 176, 0.2)',
+        _dark: '0 8px 16px rgba(0, 0, 0, 0.2)',
+      },
+      elevation3: {
+        default: '0 16px 32px rgba(183, 180, 176, 0.2)',
+        _dark: '0 16px 32px rgba(0, 0, 0, 0.2)',
+      },
+    },
   },
   styles: {
     global: (props: StyleFunctionProps) => ({