fix: remove unknown colors

esc-chula · Oct 2, 2024 · 0e9f59e · 0e9f59e
1 parent ba0f17f
commit 0e9f59e
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 18 deletions.
diff --git a/lib/components/ContextMenu/index.stories.tsx b/lib/components/ContextMenu/index.stories.tsx
@@ -2,8 +2,17 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import {
   ContextMenu,
+  ContextMenuCheckboxItem,
   ContextMenuContent,
   ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
   ContextMenuTrigger,
 } from '.'
 
@@ -24,13 +33,50 @@ export const Default: Story = {
   args: {},
   render: (args) => (
     <ContextMenu {...args}>
-      <ContextMenuTrigger className='rounded bg-gray-50 px-16 py-8'>
-        Trigger
+      <ContextMenuTrigger className='flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm'>
+        Right click here
       </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>Item 1</ContextMenuItem>
-        <ContextMenuItem>Item 2</ContextMenuItem>
-        <ContextMenuItem>Item 3</ContextMenuItem>
+      <ContextMenuContent className='w-64'>
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent className='w-48'>
+            <ContextMenuItem>
+              Save Page As...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuRadioGroup value='pedro'>
+          <ContextMenuLabel inset>People</ContextMenuLabel>
+          <ContextMenuSeparator />
+          <ContextMenuRadioItem value='pedro'>
+            Pedro Duarte
+          </ContextMenuRadioItem>
+          <ContextMenuRadioItem value='colm'>Colm Tuite</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
       </ContextMenuContent>
     </ContextMenu>
   ),

diff --git a/lib/components/ContextMenu/index.tsx b/lib/components/ContextMenu/index.tsx
@@ -142,7 +142,7 @@ const ContextMenuLabel = React.forwardRef<
   <ContextMenuPrimitive.Label
     ref={ref}
     className={cn(
-      'px-2 py-1.5 text-sm font-semibold text-foreground',
+      'text-foreground px-2 py-1.5 text-sm font-semibold',
       inset && 'pl-8',
       className
     )}
@@ -157,7 +157,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-border', className)}
+    className={cn('-mx-1 my-1 h-px bg-neutral-200', className)}
     {...props}
   />
 ))

diff --git a/lib/components/Menubar/index.tsx b/lib/components/Menubar/index.tsx
@@ -1,6 +1,6 @@
 import * as MenubarPrimitive from '@radix-ui/react-menubar'
 import { Check, ChevronRight, Circle } from 'lucide-react'
-import * as React from 'react'
+import React from 'react'
 
 import { cn } from '@/utils'
 

diff --git a/lib/components/NavigationMenu/index.stories.tsx b/lib/components/NavigationMenu/index.stories.tsx
@@ -28,36 +28,36 @@ type Story = StoryObj<typeof meta>
 const components: { title: string; href: string; description: string }[] = [
   {
     title: 'Alert Dialog',
-    href: '/docs/primitives/alert-dialog',
+    href: '#',
     description:
       'A modal dialog that interrupts the user with important content and expects a response.',
   },
   {
     title: 'Hover Card',
-    href: '/docs/primitives/hover-card',
+    href: '#',
     description:
       'For sighted users to preview content available behind a link.',
   },
   {
     title: 'Progress',
-    href: '/docs/primitives/progress',
+    href: '#',
     description:
       'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
   },
   {
     title: 'Scroll-area',
-    href: '/docs/primitives/scroll-area',
+    href: '#',
     description: 'Visually or semantically separates content.',
   },
   {
     title: 'Tabs',
-    href: '/docs/primitives/tabs',
+    href: '#',
     description:
       'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
   },
   {
     title: 'Tooltip',
-    href: '/docs/primitives/tooltip',
+    href: '#',
     description:
       'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
   },

diff --git a/lib/components/NavigationMenu/index.tsx b/lib/components/NavigationMenu/index.tsx
@@ -107,7 +107,7 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className='relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md' />
+    <div className='relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-neutral-200 shadow-md' />
   </NavigationMenuPrimitive.Indicator>
 ))
 NavigationMenuIndicator.displayName =

diff --git a/lib/components/Scroll-area/index.tsx b/lib/components/Scroll-area/index.tsx
@@ -46,7 +46,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-border' />
+    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-neutral-200' />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

diff --git a/lib/components/Seperator/index.tsx b/lib/components/Seperator/index.tsx
@@ -18,7 +18,7 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'shrink-0 bg-border',
+        'shrink-0 bg-neutral-200',
         orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
         className
       )}