docs: refa theme select as menu

marigold-ui · Dec 9, 2022 · 789989e · 789989e
1 parent 908e8ce
commit 789989e
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 92 deletions.
diff --git a/docs/src/components/ThemeMenu.tsx b/docs/src/components/ThemeMenu.tsx
@@ -0,0 +1,19 @@
+import { Button, Menu } from '@marigold/components';
+import { ChevronDown } from '@marigold/icons';
+import { useThemeSwitch } from './ThemeSwitch';
+
+export const ThemeMenu = () => {
+  const { current, themes, setTheme } = useThemeSwitch();
+  return (
+    <Menu.Trigger>
+      <Button variant="outline">
+        {current} <ChevronDown />
+      </Button>
+      <Menu onSelect={current => setTheme(current)}>
+        {Object.keys(themes).map(name => (
+          <Menu.Item key={name}>{name}</Menu.Item>
+        ))}
+      </Menu>
+    </Menu.Trigger>
+  );
+};
diff --git a/docs/src/components/ThemeSelect.tsx b/docs/src/components/ThemeSelect.tsx
diff --git a/docs/src/components/index.ts b/docs/src/components/index.ts
@@ -15,7 +15,7 @@ export * from './Preview';
 export * from './PropsTable';
 export * from './ScrollToTop';
 export * from './Toc';
-export * from './ThemeSelect';
+export * from './ThemeMenu';
 export * from './ThemeSwitch';
 export * from './Title';
 export * from './Version';
diff --git a/docs/src/pages/_app.tsx b/docs/src/pages/_app.tsx
@@ -28,7 +28,7 @@ import {
 import {
   IconLinksList,
   GradientHeadline,
-  ThemeSelect,
+  ThemeMenu,
   Title,
   TocContainer,
   ScrollToTop,
@@ -109,7 +109,7 @@ const MyApp = ({ Component, pageProps }: AppProps<PageProps>) => {
               <Box css={{ display: 'flex', gap: 'large-2' }}>
                 <Container contentType="content" size="large">
                   <Box as={Inline} mb={'small-1'}>
-                    {pageProps?.switchTheme && <ThemeSelect />}
+                    {pageProps?.switchTheme && <ThemeMenu />}
                     <Split />
                     {(pageProps?.figma ||
                       pageProps?.github ||

diff --git a/docs/src/theme/components/Button.style.ts b/docs/src/theme/components/Button.style.ts
@@ -15,6 +15,9 @@ export const Button: Theme['components']['Button'] = {
   variant: {
     outline: {
       background: 'transparent',
+      px: 'small-1',
+      color: 'text.regular',
+      lineHeight: 'large-2',
       borderStyle: 'solid',
       borderWidth: 'small-1',
       borderRadius: 'small-2',
@@ -42,6 +45,13 @@ export const Button: Theme['components']['Button'] = {
       width: '100%',
       height: '100%',
     },
+    menu: {
+      bg: 'background.light',
+      borderRadius: 'small-2',
+      '&:hover': {
+        bg: 'gray60',
+      },
+    },
   },
   size: {
     full: {

diff --git a/docs/src/theme/components/ListBox.style.ts b/docs/src/theme/components/ListBox.style.ts
diff --git a/docs/src/theme/components/Menu.style.ts b/docs/src/theme/components/Menu.style.ts
@@ -0,0 +1,22 @@
+import type { Theme } from '@marigold/components';
+
+export const Menu: Theme['components']['Menu'] = {
+  base: {
+    container: {
+      bg: 'background.page',
+      border: '1px solid',
+      borderColor: 'background.light',
+      borderRadius: 'small-2',
+      maxHeight: ['75vh', '75vh', '45vh'],
+      overflow: 'hidden auto',
+    },
+    item: {
+      p: 'small-1',
+      cursor: 'pointer',
+
+      '&:hover': {
+        color: 'brand.primary',
+      },
+    },
+  },
+};
diff --git a/docs/src/theme/components/Select.style.ts b/docs/src/theme/components/Select.style.ts
diff --git a/docs/src/theme/components/index.ts b/docs/src/theme/components/index.ts
@@ -5,11 +5,10 @@ export * from './Preview.style';
 export * from './Header.style';
 export * from './Headline.style';
 export * from './Link.style';
-export * from './ListBox.style';
 export * from './List.style';
 export * from './Navigation.style';
+export * from './Menu.style';
 export * from './Message.style';
-export * from './Select.style';
 export * from './Text.style';
 export * from './Table.style';
 export * from './ScrollToTop.style';