From e4fa8061036d1255ea344f86b50c6d2b9d88adb8 Mon Sep 17 00:00:00 2001
From: Sebastian Sebald <sebastian.sebald@reservix.de>
Date: Mon, 24 Jul 2023 10:05:38 +0200
Subject: [PATCH] docs: adjust styling of menu (#3184)

---
 docs/app/_components/ThemeMenu.tsx     | 9 +++++----
 docs/theme/components/Button.styles.ts | 3 +++
 docs/theme/components/Menu.styles.ts   | 4 ++--
 docs/theme/tokens.ts                   | 2 +-
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/app/_components/ThemeMenu.tsx b/docs/app/_components/ThemeMenu.tsx
index e08bb72203..7a5cb7b942 100644
--- a/docs/app/_components/ThemeMenu.tsx
+++ b/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>
diff --git a/docs/theme/components/Button.styles.ts b/docs/theme/components/Button.styles.ts
index e88037810e..8c67c71b9b 100644
--- a/docs/theme/components/Button.styles.ts
+++ b/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',
+      },
     },
   }
 );
diff --git a/docs/theme/components/Menu.styles.ts b/docs/theme/components/Menu.styles.ts
index 92f898475b..29b5e19213 100644
--- a/docs/theme/components/Menu.styles.ts
+++ b/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(''),
 };
diff --git a/docs/theme/tokens.ts b/docs/theme/tokens.ts
index 865d20b5b1..00911aa3cf 100644
--- a/docs/theme/tokens.ts
+++ b/docs/theme/tokens.ts
@@ -56,6 +56,6 @@ export const colors = {
   // Border
   // ---------------
   border: {
-    DEFAULT: tw.slate[900],
+    DEFAULT: tw.slate[300],
   },
 };