From f78b958eceffc3446d1ff27e331b557ec9029e72 Mon Sep 17 00:00:00 2001
From: Alexander Swed <lexswed@gmail.com>
Date: Sat, 3 Oct 2020 21:28:11 +0200
Subject: [PATCH] fix(Menu): dark theme fix

---
 src/lib/Menu/MenuItem.tsx     | 1 +
 src/lib/theme/themes.ts       | 5 ++++-
 src/pages/components/Menu.mdx | 2 +-
 tsconfig.json                 | 2 +-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/Menu/MenuItem.tsx b/src/lib/Menu/MenuItem.tsx
index 49866caa..0d054acb 100644
--- a/src/lib/Menu/MenuItem.tsx
+++ b/src/lib/Menu/MenuItem.tsx
@@ -16,6 +16,7 @@ const Item = styled(Inline, {
   'cursor': 'pointer',
   'br': '$sm',
   'outline': 'none',
+  'color': '$text',
 
   ':hover': {
     bc: '$surfaceHover',
diff --git a/src/lib/theme/themes.ts b/src/lib/theme/themes.ts
index 6c8762b8..caf62ab3 100644
--- a/src/lib/theme/themes.ts
+++ b/src/lib/theme/themes.ts
@@ -10,6 +10,7 @@ const swatches: Array<readonly [string, Swatch]> = Object.entries(palette)
     name,
     {
       colors: {
+        $text: palette.gray['$gray900'],
         $primaryStill: colors[`$${name}500` as keyof typeof colors],
         $primaryHover: colors[`$${name}600` as keyof typeof colors],
         $primaryActive: colors[`$${name}700` as keyof typeof colors],
@@ -27,13 +28,14 @@ const swatches: Array<readonly [string, Swatch]> = Object.entries(palette)
       'black',
       {
         colors: {
+          $text: '#fff',
           $primaryStill: colors['$gray800'],
           $primaryHover: colors['$gray900'],
           $primaryActive: 'black',
           $primaryLight: colors['$gray100'],
           $primaryLightActive: colors['$gray200'],
 
-          $surfaceStill: colors['$gray800'],
+          $surfaceStill: colors['$gray900'],
           $surfaceHover: colors['$gray700'],
           $surfaceActive: colors['$gray600'],
         },
@@ -49,6 +51,7 @@ type Themes = { [Shade in keyof typeof palette]: string };
 
 type Swatch = {
   colors: {
+    $text: string;
     $primaryStill: string;
     $primaryHover: string;
     $primaryActive: string;
diff --git a/src/pages/components/Menu.mdx b/src/pages/components/Menu.mdx
index 6e2f8267..1efe82b6 100644
--- a/src/pages/components/Menu.mdx
+++ b/src/pages/components/Menu.mdx
@@ -33,7 +33,7 @@ For big lists use `action` prop on `Menu.Item` and `onAction` callback to handle
 You can modify `offset` and [`placement`](https://popper.js.org/docs/v2/constructors/#options) of the dropdown menu.
 
 <Playground>
-  <ThemeProvider theme="teal">
+  <ThemeProvider theme="black">
     <Box css={{ p: '$8' }}>
       <Menu onAction={typeof window !== 'undefined' ? window.alert : null}>
         <Menu.Button>
diff --git a/tsconfig.json b/tsconfig.json
index adfb8e1c..8f398d78 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,7 +17,7 @@
     "jsx": "preserve",
     "baseUrl": ".",
     "paths": {
-      "@fxtrot/ui": ["build"]
+      "@fxtrot/ui": ["src/lib"]
     }
   },
   "include": ["next-env.d.ts", "src/**/*"],