Fix the utility text color in menus, make theme switcher smaller

packages/web/components/elements/Button.tsx

@@ -183,8 +183,8 @@ export const Button = styled('button', {
         p: '0px',
         m: '0px',
         ml: '0px',
-        width: '68px',
-        height: '52px',
+        width: '60px',
+        height: '48px',
         fontSize: '14px',
         border: 'unset',
         borderRadius: '6px',

packages/web/components/elements/DropdownElements.tsx

@@ -19,7 +19,7 @@ const itemStyles = {
   px: '24px',
   borderRadius: 3,
   cursor: 'default',
-  color: '$grayText',
+  color: '$utilityTextDefault',
 
   '&:focus': {
     outline: 'none',
@@ -106,7 +106,7 @@ const StyledArrow = styled(Arrow, {
 })
 
 const StyledLabel = styled(Label, {
-  color: '$grayText',
+  color: '$utilityTextDefault',
   fontSize: 13,
   padding: '5px 10px',
   cursor: 'default',

packages/web/components/patterns/DropdownMenu.tsx

@@ -42,7 +42,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     <Dropdown triggerElement={props.triggerElement}>
       <VStack css={{ py: '12px', px: '24px' }}>
         <StyledText style="menuTitle">Theme</StyledText>
-        <HStack css={{ py: '8px', width: '100%', gap: '8px' }}>
+        <HStack css={{ py: '8px', width: '100%', gap: '25px' }}>
           <Button
             style="themeSwitch"
             css={{ background: '#FFFFFF' }}

packages/web/components/tokens/stitches.config.ts

@@ -114,12 +114,13 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayBorder: '#F0F0F0',
         grayTextContrast: '#3A3939',
         graySolid: '#9C9B9A',
+        utilityTextDefault: '#3B3938',
 
         grayBgSubtle: 'hsl(0 0% 97.3%)',
         grayBgHover: 'hsl(0 0% 93.0%)',
         grayLine: 'hsl(0 0% 88.7%)',
         grayBorderHover: 'hsl(0 0% 78.0%)',
-        grayText: 'hsl(0 0% 43.5%)',
+        grayText: '#3B3938',
 
         // Semantic Colors
         highlightBackground: 'rgba(255, 210, 52, 0.65)',
@@ -178,12 +179,13 @@ const darkThemeSpec = {
     grayTextContrast: '#D8D7D7',
     grayBorder: '#323232',
     graySolid: '#9C9B9A',
+    utilityTextDefault: '#CDCDCD',
 
     grayBgSubtle: 'hsl(0 0% 9.8%)',
     grayBgHover: 'hsl(0 0% 13.8%)',
     grayLine: 'hsl(0 0% 19.9%)',
     grayBorderHover: 'hsl(0 0% 31.2%)',
-    grayText: 'hsl(0 0% 62.8%)',
+    grayText: '#CDCDCD',
 
     // Semantic Colors
     highlightBackground: '#867740',