fix: found the cause of the mobile bug

src/stories/Breakpoints.stories.tsx

@@ -4,6 +4,7 @@ import { Box } from '../ui/Box';
 import { Stack } from '../ui/Stack';
 import { Text } from '../ui/Text';
 
+// TODO: This story will not work until the new breakpoints are turned on in theme.ts
 const BreakpointDemo = () => (
   <Stack spacing={4} align="stretch">
     <Box bg="blue.500" p={4}>

src/stories/Colors.stories.tsx

@@ -5,7 +5,7 @@ import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { NEW_COLORS } from '../ui/theme/new-colors';
+import { NEW_COLORS } from '../ui/theme/colors';
 
 const ColorSwatch = ({
   title,

src/stories/Elevation.stories.tsx

@@ -7,6 +7,8 @@ import { Text } from '../ui/Text';
 import { useColorMode } from '../ui/hooks/useColorMode';
 import { theme } from '../ui/theme/theme';
 
+const customShadows = ['elevation1', 'elevation2', 'elevation3'];
+
 const ElevationDemo = () => {
   const { colorMode } = useColorMode();
 
@@ -16,42 +18,74 @@ const ElevationDemo = () => {
         <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 color="black">{elevationName}</Text>
-            </Box>
-            <Text>{(elevationValue as any)[colorMode === 'light' ? 'default' : '_dark']}</Text>
-          </Flex>
-        ))}
+        <Text fontSize="2xl" fontWeight="bold">
+          Chakra UI Default Elevations
+        </Text>
+        {Object.entries(theme.shadows).map(([elevationName, elevationValue]) => {
+          if (customShadows.includes(elevationName)) return null;
+          return (
+            <Flex key={elevationName} align="center" gap={4}>
+              <Box
+                width="200px"
+                height="100px"
+                bg={colorMode === 'light' ? 'white' : 'gray.800'}
+                boxShadow={elevationValue as string}
+                borderRadius="md"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Text color="black">{elevationName}</Text>
+              </Box>
+              <Text>{elevationValue as string}</Text>
+            </Flex>
+          );
+        })}
+        <Text fontSize="2xl" fontWeight="bold">
+          Custom Elevations
+        </Text>
+        {Object.entries(theme.shadows).map(([elevationName, elevationValue]) => {
+          if (!customShadows.includes(elevationName)) return null;
+          return (
+            <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 color="black">{elevationName}</Text>
+              </Box>
+              <Text>{(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 color="white">{elevationName}</Text>
-            </Box>
-            <Text color="white">{(elevationValue as any)._dark}</Text>
-          </Flex>
-        ))}
+        {Object.entries(theme.shadows).map(([elevationName, elevationValue]) => {
+          if (!customShadows.includes(elevationName)) return null;
+          return (
+            <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 color="white">{elevationName}</Text>
+              </Box>
+              <Text color="white">{(elevationValue as any)._dark}</Text>
+            </Flex>
+          );
+        })}
       </Flex>
     </Stack>
   );

src/ui/theme/breakpoints.ts

@@ -0,0 +1,27 @@
+export const NEW_BREAKPOINTS = {
+  'mobile-xs': '320px',
+  'mobile-sm': '375px',
+  'mobile-md': '480px',
+  'mobile-lg': '768px',
+  xs: '1024px',
+  sm: '1280px',
+  md: '1440px',
+  lg: '1680px',
+  xl: '1920px',
+};
+
+/* TODO: We would have to change all the responsive styles in our app because by adding breakpoint variables lower than sm 480px the first values we specify in a responsive styling array correspond to those lower breakpoint variables. I suggest that we leave this as a comment and come back to it later.
+   If we extended all of our responsive styling arrays then writing responsive styles would become much more tedious, as we would need to add breakpoint variables for each of the breakpoints we want to support.
+   Or we would have to start using the var names in the breakpoints object in the responsive styling arrays. But this would also mena that we would have to change all the responsive styles in our app. */
+export const CI_DEFAULT_BREAKPOINTS = {
+  // '2xs': '320px',
+  // xs: '375px',
+  sm: '480px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+  // '2xl': '1440px',
+  // '3xl': '1680px',
+  // '4xl': '1920px',
+};

src/ui/theme/colors.ts

@@ -57,3 +57,87 @@ export const COLORS = {
     limeGreen: '#C1D21B',
   },
 };
+
+export const NEW_COLORS = {
+  neutral: {
+    white: '#ffffff',
+    'sand-50': '#f7f6f5',
+    'sand-100': '#f3f2f0',
+    'sand-150': '#eae8e6',
+    'sand-200': '#d5d3d1',
+    'sand-300': '#bfbdba',
+    'sand-400': '#95918c',
+    'sand-500': '#777470',
+    'sand-600': '#595754',
+    'sand-700': '#3c3a38',
+    'sand-800': '#2d2c2a',
+    'sand-900': '#211f1f',
+    'sand-950': '#181716',
+    'sand-1000': '#0f0f0e',
+    black: '#000000',
+  },
+  accent: {
+    'stacks-100': '#FFDFD1',
+    'stacks-200': '#FFC2A8',
+    'stacks-300': '#FFA57F',
+    'stacks-400': '#FF8761',
+    'stacks-500': '#FC6432',
+    'stacks-600': '#CC4900',
+    'stacks-700': '#9C310D',
+    'bitcoin-100': '#FFDFC1',
+    'bitcoin-200': '#FFD1A7',
+    'bitcoin-300': '#FFC288',
+    'bitcoin-400': '#FFAD65',
+    'bitcoin-500': '#FF9835',
+    'bitcoin-600': '#E17C18',
+    'bitcoin-700': '#FF8B00',
+    'testnet-100': '#E7E5FF',
+    'testnet-200': '#DDD9FF',
+    'testnet-300': '#BBADFF',
+    'testnet-400': '#9985FF',
+    'testnet-500': '#765BFF',
+    'testnet-600': '#593FE0',
+  },
+  contract: {
+    call: '#BDC2A6',
+    deploy: '#D4E523',
+  },
+  alpha: {
+    'sand-alpha-50': 'rgba(243, 242, 240, 0.04)',
+    'sand-alpha-100': 'rgba(243, 242, 240, 0.06)',
+    'sand-alpha-200': 'rgba(243, 242, 240, 0.08)',
+    'sand-alpha-300': 'rgba(243, 242, 240, 0.16)',
+    'sand-alpha-400': 'rgba(243, 242, 240, 0.24)',
+    'sand-alpha-500': 'rgba(243, 242, 240, 0.36)',
+    'sand-alpha-600': 'rgba(243, 242, 240, 0.48)',
+    'sand-alpha-700': 'rgba(243, 242, 240, 0.64)',
+    'sand-alpha-800': 'rgba(243, 242, 240, 0.80)',
+    'sand-alpha-900': 'rgba(243, 242, 240, 0.92)',
+  },
+  status: {
+    'green-100': '#0070dd',
+    'green-200': '#adddc0',
+    'green-300': '#8ECEAA',
+    'green-400': '#5bb98b',
+    'green-500': '#30a46c',
+    'green-600': '#218358',
+    'blue-100': '#e9f3ff',
+    'blue-200': '#dbecff',
+    'blue-300': '#b5d5ff',
+    'blue-400': '#75acf3',
+    'blue-500': '#2c8dff',
+    'blue-600': '#0070dd',
+    'red-100': '#ffe9e9',
+    'red-200': '#ffcaca',
+    'red-300': '#ff9da0',
+    'red-400': '#f06e76',
+    'red-500': '#e32a35',
+    'red-600': '#b01425',
+    'yellow-100': '#fefce9',
+    'yellow-200': '#fff9b7',
+    'yellow-300': '#fff394',
+    'yellow-400': '#f9e972',
+    'yellow-500': '#f3dc00',
+    'yellow-600': '#dbc600',
+  },
+};

src/ui/theme/theme.ts

@@ -2,7 +2,8 @@
 
 import { StyleFunctionProps, extendTheme } from '@chakra-ui/react';
 
-import { COLORS } from './colors';
+import { CI_DEFAULT_BREAKPOINTS } from './breakpoints';
+import { COLORS, NEW_COLORS } from './colors';
 import { badgeTheme } from './componentTheme/Badge';
 import { buttonTheme } from './componentTheme/Button';
 import { checkboxTheme } from './componentTheme/Checkbox';
@@ -13,7 +14,6 @@ import { switchTheme } from './componentTheme/Switch';
 import { tabTheme } from './componentTheme/Tab';
 import { tagTheme } from './componentTheme/Tag';
 import { inter, openSauce } from './fonts';
-import { NEW_COLORS } from './new-colors';
 
 export const theme = extendTheme({
   config: {
@@ -149,14 +149,7 @@ export const theme = extendTheme({
     Link: linkTheme,
   },
   breakpoints: {
-    'mobile-xs': '320px',
-    'mobile-sm': '375px',
-    'mobile-md': '480px',
-    'mobile-lg': '768px',
-    xs: '1024px',
-    sm: '1280px',
-    md: '1440px',
-    lg: '1680px',
-    xl: '1920px',
+    ...CI_DEFAULT_BREAKPOINTS,
+    // ...NEW_BREAKPOINTS
   },
 });