docs: adjust styling of menu (#3184)

docs/app/_components/ThemeMenu.tsx

@@ -9,13 +9,14 @@ export const ThemeMenu = () => {
 
   return (
     <Menu.Trigger>
-      <Button>
-        {current ? current : themes.b2b.name} theme
-        <ChevronDown />
+      <Button variant="ghost" size="small">
+        <strong>Current Theme:</strong>
+        <span className="uppercase">{current ? current : themes.b2b.name}</span>
+        <ChevronDown className="h-4 w-4" />
       </Button>
       <Menu onAction={current => setTheme(current)}>
         {Object.keys(themes).map(name => (
-          <Menu.Item key={name}>{name}</Menu.Item>
+          <Menu.Item key={name}>{name.toUpperCase()}</Menu.Item>
         ))}
       </Menu>
     </Menu.Trigger>

docs/theme/components/Button.styles.ts

@@ -8,6 +8,9 @@ export const Button: ThemeComponent<'Button'> = cva(
         ghost:
           'text-secondary-700 hover:text-secondary-900 border-transparent p-0',
       },
+      size: {
+        small: 'text-sm',
+      },
     },
   }
 );

docs/theme/components/Menu.styles.ts

@@ -2,9 +2,9 @@ import { ThemeComponent, cva } from '@marigold/system';
 
 export const Menu: ThemeComponent<'Menu'> = {
   container: cva([
-    'overflow-y-auto overflow-x-hidden rounded-sm border border-solid bg-white ',
+    'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',
     'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',
   ]),
-  item: cva('hover:bg-bg-hover cursor-pointer px-2 py-1 outline-none'),
+  item: cva('hover:bg-bg-hover cursor-pointer p-2 outline-none'),
   section: cva(''),
 };

docs/theme/tokens.ts

@@ -56,6 +56,6 @@ export const colors = {
   // Border
   // ---------------
   border: {
-    DEFAULT: tw.slate[900],
+    DEFAULT: tw.slate[300],
   },
 };