UI: Improve button styles

fuma-nama · Jan 8, 2024 · 68583bf · 68583bf
1 parent 355d479
commit 68583bf
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 42 deletions.
diff --git a/packages/ui/src/components/accordion.tsx b/packages/ui/src/components/accordion.tsx
@@ -14,6 +14,7 @@ import {
 } from 'react';
 import { cn } from '@/utils/cn';
 import { useCopyButton } from '@/utils/use-copy-button';
+import { buttonVariants } from '@/theme/shared';
 
 export const Accordions = forwardRef<
   HTMLDivElement,
@@ -106,7 +107,13 @@ function CopyButton({ id }: { id: string }): JSX.Element {
     <button
       type="button"
       aria-label="Copy Link"
-      className="p-1 opacity-0 transition-opacity group-data-[state=open]/accordion:opacity-100"
+      className={cn(
+        buttonVariants({
+          color: 'ghost',
+          className:
+            'opacity-0 transition-all group-data-[state=open]/accordion:opacity-100',
+        }),
+      )}
       onClick={onClick}
     >
       {checked ? (

diff --git a/packages/ui/src/components/roll-button.tsx b/packages/ui/src/components/roll-button.tsx
@@ -3,6 +3,7 @@
 import { ChevronUpIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { cn } from '@/utils/cn';
+import { buttonVariants } from '@/theme/shared';
 
 interface RollButtonProps {
   /**
@@ -41,8 +42,12 @@ export function RollButton({ percentage = 0.2 }: RollButtonProps): JSX.Element {
       type="button"
       aria-label="Scroll to Top"
       className={cn(
+        buttonVariants({
+          color: 'secondary',
+          className:
+            'fixed bottom-8 p-3 right-8 z-50 shadow-md rounded-full transition-all',
+        }),
         !show && 'translate-y-20 opacity-0',
-        'fixed bottom-12 right-12 z-50 rounded-full border bg-background p-4 text-foreground transition-all',
       )}
       onClick={() => {
         document.scrollingElement?.scrollTo({

diff --git a/packages/ui/src/components/ui/command.tsx b/packages/ui/src/components/ui/command.tsx
@@ -3,7 +3,13 @@ import { Command as CommandPrimitive } from 'cmdk';
 import { Search } from 'lucide-react';
 import * as React from 'react';
 import { cn } from '@/utils/cn';
-import { Drawer, DrawerContent, DrawerFooter } from './drawer';
+import { buttonVariants } from '@/theme/shared';
+import {
+  Drawer as Dialog,
+  DrawerClose as DialogClose,
+  DrawerContent as DialogContent,
+  DrawerFooter as DialogFooter,
+} from './drawer';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -30,31 +36,42 @@ function CommandDialog({
   ...props
 }: CommandDialogProps): JSX.Element {
   return (
-    <Drawer {...props}>
-      <DrawerContent className="p-0">
+    <Dialog {...props}>
+      <DialogContent className="p-0">
         <Command shouldFilter={false} loop>
           {children}
-          {footer ? <DrawerFooter>{footer}</DrawerFooter> : null}
+          {footer ? <DialogFooter>{footer}</DialogFooter> : null}
         </Command>
-      </DrawerContent>
-    </Drawer>
+      </DialogContent>
+    </Dialog>
   );
 }
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center !border-t-0 px-3">
-    <Search className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" />
+  <div className="flex items-center gap-2 !border-t-0 px-3">
+    <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex w-full rounded-md bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        'w-full bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
     />
+    <DialogClose
+      className={cn(
+        buttonVariants({
+          color: 'outline',
+          size: 'icon',
+          className: 'text-xs',
+        }),
+      )}
+    >
+      Esc
+    </DialogClose>
   </div>
 ));
 

diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
@@ -1,5 +1,4 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
 import * as React from 'react';
 import { cn } from '@/utils/cn';
 
@@ -22,14 +21,11 @@ const DialogContent = React.forwardRef<
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm text-muted-foreground ring-offset-background transition-colors hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
       </DialogPrimitive.Content>
     </DialogPrimitive.DialogOverlay>
   </DialogPrimitive.Portal>
 ));
+
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 function DialogHeader({
@@ -59,6 +55,16 @@ function DialogFooter({
     />
   );
 }
+
 DialogFooter.displayName = 'DialogFooter';
 
-export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter };
+const DialogClose = DialogPrimitive.Close;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogClose,
+};
diff --git a/packages/ui/src/components/ui/drawer.tsx b/packages/ui/src/components/ui/drawer.tsx
@@ -36,6 +36,8 @@ const DrawerTrigger = DialogPrimitive.Trigger;
 
 const DrawerPortal = DialogPrimitive.Portal;
 
+const DrawerClose = DialogPrimitive.Close;
+
 const DrawerOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
@@ -54,6 +56,7 @@ const DrawerContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => {
   const { setIsOpen } = React.useContext(Context);
+  const overlayRef = React.useRef<HTMLDivElement>(null);
   const contentRef = React.useRef<HTMLDivElement>(null);
   const isDraggingRef = React.useRef(false);
   const mergedRefs = mergeRefs(ref, contentRef);
@@ -66,12 +69,14 @@ const DrawerContent = React.forwardRef<
   };
 
   const setOffset = (value: number): void => {
-    if (contentRef.current) {
-      contentRef.current.style.setProperty(
-        '--offset-y',
-        `${value.toString()}px`,
-      );
-    }
+    if (!contentRef.current) return;
+
+    contentRef.current.style.setProperty('--offset-y', `${value.toString()}px`);
+
+    overlayRef.current?.style.setProperty(
+      'opacity',
+      `${1 - Math.max(0, value / contentRef.current.clientHeight)}`,
+    );
   };
 
   const onPress: React.PointerEventHandler = (event) => {
@@ -171,6 +176,7 @@ const DrawerContent = React.forwardRef<
   return (
     <DrawerPortal>
       <DrawerOverlay
+        ref={overlayRef}
         onMouseUp={onRelease}
         className="data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in"
       />
@@ -239,10 +245,9 @@ function mergeRefs<T>(
 
 export {
   Drawer,
-  DrawerPortal,
-  DrawerOverlay,
   DrawerTrigger,
   DrawerContent,
   DrawerHeader,
   DrawerFooter,
+  DrawerClose,
 };
diff --git a/packages/ui/src/mdx/pre.tsx b/packages/ui/src/mdx/pre.tsx
@@ -5,6 +5,7 @@ import { forwardRef, useCallback, useRef } from 'react';
 import { cn } from '@/utils/cn';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { useCopyButton } from '@/utils/use-copy-button';
+import { buttonVariants } from '@/theme/shared';
 
 export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
   allowCopy?: boolean;
@@ -74,8 +75,11 @@ function CopyButton({
     <button
       type="button"
       className={cn(
-        'inline-flex rounded-md bg-muted p-2 text-secondary-foreground transition-opacity group-hover:opacity-100',
+        buttonVariants({
+          color: 'muted',
+        }),
         !checked && 'opacity-0',
+        'transition-all group-hover:opacity-100',
         className,
       )}
       aria-label="Copy Text"

diff --git a/packages/ui/src/nav.tsx b/packages/ui/src/nav.tsx
@@ -24,6 +24,7 @@ import {
 } from '@/components/ui/popover';
 import { type LinkItem } from './contexts/tree';
 import { isActive } from './utils/shared';
+import { buttonVariants } from './theme/shared';
 
 export interface NavLinkProps {
   icon: ReactNode;
@@ -50,10 +51,6 @@ interface NavProps {
   children?: ReactNode;
 }
 
-const itemVariants = cva(
-  'rounded-md p-1.5 hover:bg-accent hover:text-accent-foreground [&_svg]:h-5 [&_svg]:w-5',
-);
-
 export function Nav({
   title,
   url = '/',
@@ -92,7 +89,13 @@ export function Nav({
             <Popover>
               <ThemeToggle className="max-lg:hidden" />
               <PopoverTrigger
-                className={cn(itemVariants({ className: 'lg:hidden' }))}
+                className={cn(
+                  buttonVariants({
+                    size: 'icon',
+                    color: 'ghost',
+                    className: 'lg:hidden',
+                  }),
+                )}
               >
                 <MoreVerticalIcon />
               </PopoverTrigger>
@@ -121,7 +124,7 @@ export function Nav({
                 key={item.href}
                 href={item.href}
                 external={item.external}
-                className={cn(itemVariants())}
+                className={cn(buttonVariants({ size: 'icon', color: 'ghost' }))}
               >
                 {item.icon}
               </Link>
@@ -143,7 +146,13 @@ function SearchToggle(): JSX.Element {
     <>
       <button
         type="button"
-        className={cn(itemVariants({ className: 'md:hidden' }))}
+        className={cn(
+          buttonVariants({
+            size: 'icon',
+            color: 'ghost',
+            className: 'md:hidden',
+          }),
+        )}
         aria-label="Open Search"
         onClick={() => {
           setOpenSearch(true);
@@ -176,7 +185,13 @@ function SidebarToggle({ collapsible }: { collapsible: boolean }): JSX.Element {
     <>
       <SidebarTrigger
         aria-label="Toggle Sidebar"
-        className={cn(itemVariants({ className: 'md:hidden' }))}
+        className={cn(
+          buttonVariants({
+            size: 'icon',
+            color: 'ghost',
+            className: 'md:hidden',
+          }),
+        )}
       >
         <MenuIcon />
       </SidebarTrigger>
@@ -187,13 +202,15 @@ function SidebarToggle({ collapsible }: { collapsible: boolean }): JSX.Element {
           onClick={() => {
             setOpen(!open);
           }}
-          className="rounded-full border bg-secondary/50 p-1.5 text-secondary-foreground hover:bg-accent hover:text-accent-foreground max-md:hidden"
-        >
-          {open ? (
-            <SidebarCloseIcon className="h-5 w-5" />
-          ) : (
-            <SidebarOpenIcon className="h-5 w-5" />
+          className={cn(
+            buttonVariants({
+              color: 'outline',
+              size: 'icon',
+              className: 'rounded-full max-md:hidden',
+            }),
           )}
+        >
+          {open ? <SidebarCloseIcon /> : <SidebarOpenIcon />}
         </button>
       ) : null}
     </>

diff --git a/packages/ui/src/tailwind-plugin.ts b/packages/ui/src/tailwind-plugin.ts
@@ -240,7 +240,7 @@ export const docsUi = plugin.withOptions<DocsUIOptions>(
 
 export function createPreset(options: DocsUIOptions = {}): PresetsConfig {
   return {
-    plugins: [...docsUiPlugins, docsUi(options)],
+    plugins: [typography, docsUi(options)],
   };
 }
 

diff --git a/packages/ui/src/theme/animations.ts b/packages/ui/src/theme/animations.ts
@@ -47,7 +47,6 @@ export const animations = {
       to: { opacity: '1' },
     },
     'fade-out': {
-      from: { opacity: '1' },
       to: { opacity: '0' },
     },
   },

diff --git a/packages/ui/src/theme/shared.ts b/packages/ui/src/theme/shared.ts
@@ -0,0 +1,20 @@
+import { cva } from 'class-variance-authority';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100',
+  {
+    variants: {
+      color: {
+        outline: 'border hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'border bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground',
+        muted:
+          'bg-muted text-secondary-foreground hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        icon: 'p-1.5 [&_svg]:h-5 [&_svg]:w-5',
+      },
+    },
+  },
+);