feat: added elevation to redesign

src/stories/Elevation.stories.tsx

@@ -0,0 +1,52 @@
+import { Box } from '@/ui/Box';
+import { Flex } from '@/ui/Flex';
+import { Text } from '@/ui/Text';
+import { useColorMode } from '@/ui/hooks/useColorMode';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { theme } from '../ui/theme/theme';
+
+const ElevationDemo = () => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <Flex direction="column" gap={8}>
+      <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)[colorMode === 'light' ? 'default' : '_dark']}
+            borderRadius="md"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Text>{elevationName}</Text>
+          </Box>
+          <Text>
+            {elevationName}: {(elevationValue as any)[colorMode === 'light' ? 'default' : '_dark']}
+          </Text>
+        </Flex>
+      ))}
+    </Flex>
+  );
+};
+
+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) => ({