Implement Antigravity styling across UI components

- Sharper corners (rounded-sm instead of rounded-md/lg) - Reduced focus rings (ring-1, subtle opacity) - Removed shadows from modals, tooltips, dropdowns, context menus - Updated hover states to use tree-selected for list items - Ghost buttons now use text-only hover (no background) - Smaller toggle switch for compact feel

Author: Tim Sinaeve

components/Button.tsx

@@ -9,15 +9,15 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ children, variant = 'primary', isLoading = false, className, ...props }, ref) => {
-    const baseClasses = 'inline-flex items-center justify-center px-3 py-1.5 border text-xs font-semibold rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background disabled:opacity-60 disabled:cursor-not-allowed transition-colors duration-150';
-    
+    const baseClasses = 'inline-flex items-center justify-center px-3 py-1.5 border text-xs font-semibold rounded-sm focus:outline-none focus:ring-1 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-100';
+
     const variantClasses = {
-      primary: 'bg-primary text-primary-text border-transparent hover:bg-primary-hover focus:ring-primary',
-      secondary: 'bg-secondary text-text-main border-border-color hover:bg-border-color focus:ring-primary',
-      destructive: 'bg-destructive-bg text-destructive-text border-destructive-border hover:bg-destructive-bg-hover focus:ring-destructive-text',
-      ghost: 'bg-transparent text-text-main border-transparent hover:bg-border-color focus:ring-primary',
+      primary: 'bg-primary text-primary-text border-transparent hover:bg-primary-hover focus:ring-primary/50',
+      secondary: 'bg-secondary text-text-main border-border-color hover:bg-border-color/50 focus:ring-primary/50',
+      destructive: 'bg-destructive-bg text-destructive-text border-destructive-border hover:bg-destructive-bg-hover focus:ring-destructive-text/50',
+      ghost: 'bg-transparent text-text-secondary border-transparent hover:text-text-main focus:ring-primary/30',
     };
-    
+
     const disabled = props.disabled || isLoading;
 
     return (

components/ContextMenu.tsx

@@ -3,21 +3,21 @@ import ReactDOM from 'react-dom';
 
 export type MenuItem =
   | {
-      label: string;
-      action: () => void;
-      icon?: React.FC<{ className?: string }>;
-      disabled?: boolean;
-      shortcut?: string;
-      submenu?: never;
-    }
+    label: string;
+    action: () => void;
+    icon?: React.FC<{ className?: string }>;
+    disabled?: boolean;
+    shortcut?: string;
+    submenu?: never;
+  }
   | {
-      label: string;
-      submenu: MenuItem[];
-      icon?: React.FC<{ className?: string }>;
-      disabled?: boolean;
-      shortcut?: string;
-      action?: never;
-    }
+    label: string;
+    submenu: MenuItem[];
+    icon?: React.FC<{ className?: string }>;
+    disabled?: boolean;
+    shortcut?: string;
+    action?: never;
+  }
   | { type: 'separator' };
 
 interface ContextMenuProps {
@@ -96,9 +96,9 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, items, onCl
       }
     };
     const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key === 'Escape') {
-            onClose();
-        }
+      if (event.key === 'Escape') {
+        onClose();
+      }
     }
 
     document.addEventListener('mousedown', handleClickOutside);
@@ -200,7 +200,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, items, onCl
                 }
               }}
               disabled={item.disabled || !hasEnabledSubitem}
-              className="w-full flex items-center justify-between text-left px-2 py-1.5 text-xs rounded-md transition-colors text-text-main disabled:text-text-secondary/50 disabled:cursor-not-allowed hover:bg-primary hover:text-primary-text focus:bg-primary focus:text-primary-text focus:outline-none"
+              className="w-full flex items-center justify-between text-left px-2 py-1 text-xs rounded-sm transition-colors text-text-main disabled:text-text-secondary/50 disabled:cursor-not-allowed hover:bg-tree-selected hover:text-text-main focus:bg-tree-selected focus:text-text-main focus:outline-none"
             >
               <div className="flex items-center gap-3">
                 {Icon && <Icon className="w-4 h-4" />}
@@ -209,7 +209,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, items, onCl
               <span className="text-text-secondary">›</span>
             </button>
             {isOpen && item.submenu.length > 0 && (
-              <div className="absolute top-0 left-full ml-1 z-10 w-[16.8rem] rounded-md bg-secondary p-1.5 shadow-2xl border border-border-color animate-fade-in-fast">
+              <div className="absolute top-0 left-full ml-1 z-10 w-[16.8rem] rounded-sm bg-secondary p-1 border border-border-color animate-fade-in-fast">
                 <ul className="space-y-1">{renderItems(item.submenu, depth + 1)}</ul>
               </div>
             )}
@@ -229,7 +229,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, items, onCl
               }
             }}
             disabled={disabled}
-            className="w-full flex items-center justify-between text-left px-2 py-1.5 text-xs rounded-md transition-colors text-text-main disabled:text-text-secondary/50 disabled:cursor-not-allowed hover:bg-primary hover:text-primary-text focus:bg-primary focus:text-primary-text focus:outline-none"
+            className="w-full flex items-center justify-between text-left px-2 py-1 text-xs rounded-sm transition-colors text-text-main disabled:text-text-secondary/50 disabled:cursor-not-allowed hover:bg-tree-selected hover:text-text-main focus:bg-tree-selected focus:text-text-main focus:outline-none"
           >
             <div className="flex items-center gap-3">
               {Icon && <Icon className="w-4 h-4" />}
@@ -251,7 +251,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, items, onCl
         maxHeight: menuStyle.maxHeight ? menuStyle.maxHeight : undefined,
         overflowY: menuStyle.overflowY,
       }}
-      className="fixed z-50 w-[16.8rem] rounded-md bg-secondary p-1.5 shadow-2xl border border-border-color animate-fade-in-fast"
+      className="fixed z-50 w-[16.8rem] rounded-sm bg-secondary p-1 border border-border-color animate-fade-in-fast"
     >
       <ul className="space-y-1">
         {renderItems(items)}

components/IconButton.tsx

@@ -9,34 +9,34 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   tooltipPosition?: 'top' | 'bottom';
 }
 
-const IconButton: React.FC<IconButtonProps> = ({ children, tooltip, className, variant = 'primary', size='md', tooltipPosition = 'top', ...props }) => {
-    const [isHovered, setIsHovered] = useState(false);
-    const wrapperRef = useRef<HTMLSpanElement>(null);
-    const { ['aria-label']: ariaLabel, ...buttonProps } = props;
-    const computedAriaLabel = ariaLabel ?? tooltip;
+const IconButton: React.FC<IconButtonProps> = ({ children, tooltip, className, variant = 'primary', size = 'md', tooltipPosition = 'top', ...props }) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+  const { ['aria-label']: ariaLabel, ...buttonProps } = props;
+  const computedAriaLabel = ariaLabel ?? tooltip;
 
-    const handleMouseEnter = useCallback(() => {
-        if (tooltip) setIsHovered(true);
-    }, [tooltip]);
+  const handleMouseEnter = useCallback(() => {
+    if (tooltip) setIsHovered(true);
+  }, [tooltip]);
 
-    const handleMouseLeave = useCallback(() => {
-        setIsHovered(false);
-    }, []);
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
 
-    const baseClasses = "flex items-center justify-center rounded-md focus:outline-none transition-colors";
-  
-    const variantClasses = {
-      primary: 'text-text-secondary hover:bg-border-color hover:text-text-main',
-      ghost: 'text-text-secondary/80 hover:bg-border-color hover:text-text-main',
-      destructive: 'text-destructive-text bg-transparent hover:bg-destructive-bg'
-    };
+  const baseClasses = "flex items-center justify-center rounded-sm focus:outline-none transition-colors duration-100";
+
+  const variantClasses = {
+    primary: 'text-text-secondary hover:text-text-main hover:bg-border-color/30',
+    ghost: 'text-text-secondary hover:text-text-main',
+    destructive: 'text-destructive-text bg-transparent hover:bg-destructive-bg/50'
+  };
+
+  const sizeClasses = {
+    xs: 'w-6 h-6',
+    sm: 'w-7 h-7',
+    md: 'w-8 h-8'
+  };
 
-    const sizeClasses = {
-        xs: 'w-6 h-6',
-        sm: 'w-7 h-7',
-        md: 'w-8 h-8'
-    };
-  
   return (
     <>
       <span

components/LanguageDropdown.tsx

@@ -95,7 +95,7 @@ const LanguageDropdown = React.forwardRef<HTMLButtonElement, LanguageDropdownPro
         type="button"
         ref={setButtonRef}
         onClick={toggleOpen}
-        className="flex items-center gap-2 bg-background text-text-main text-xs rounded-md py-1 pl-2 pr-2 border border-border-color focus:outline-none focus:ring-1 focus:ring-primary"
+        className="flex items-center gap-2 bg-background text-text-main text-xs rounded-sm py-1 pl-2 pr-2 border border-border-color focus:outline-none focus:ring-1 focus:ring-primary/50"
         aria-haspopup="listbox"
         aria-expanded={isOpen}
       >
@@ -106,7 +106,7 @@ const LanguageDropdown = React.forwardRef<HTMLButtonElement, LanguageDropdownPro
       </button>
       {isOpen && (
         <div
-          className="absolute right-0 mt-1 z-50 w-72 rounded-md border border-border-color bg-background shadow-lg"
+          className="absolute right-0 mt-1 z-50 w-72 rounded-sm border border-border-color bg-background"
           role="listbox"
           aria-activedescendant={activeOptionId}
         >
@@ -119,11 +119,10 @@ const LanguageDropdown = React.forwardRef<HTMLButtonElement, LanguageDropdownPro
                 role="option"
                 aria-selected={language.id === selectedLanguage.id}
                 onClick={() => handleSelect(language.id)}
-                className={`text-left px-3 py-1.5 rounded-md transition-colors ${
-                  language.id === selectedLanguage.id
-                    ? 'bg-secondary/70 text-primary font-semibold'
-                    : 'text-text-main hover:bg-secondary'
-                }`}
+                className={`text-left px-3 py-1 rounded-sm transition-colors ${language.id === selectedLanguage.id
+                    ? 'bg-tree-selected text-text-main font-medium'
+                    : 'text-text-main hover:bg-tree-selected'
+                  }`}
               >
                 {language.label}
               </button>

components/Modal.tsx

@@ -118,7 +118,7 @@ const Modal: React.FC<ModalProps> = ({ onClose, children, title, initialFocusRef
     >
       <div
         ref={modalRef}
-        className="bg-secondary rounded-lg shadow-xl w-full max-w-xl mx-4 border border-border-color"
+        className="bg-secondary rounded-sm w-full max-w-xl mx-4 border border-border-color"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex justify-between items-center px-4 py-3 border-b border-border-color">

components/ToggleSwitch.tsx

@@ -14,14 +14,12 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ id, checked, onChange }) =>
       role="switch"
       aria-checked={checked}
       onClick={() => onChange(!checked)}
-      className={`relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-secondary ${
-        checked ? 'bg-primary' : 'bg-border-color'
-      }`}
+      className={`relative inline-flex h-5 w-10 flex-shrink-0 items-center rounded-full transition-colors duration-100 focus:outline-none focus:ring-1 focus:ring-primary/50 ${checked ? 'bg-primary' : 'bg-border-color'
+        }`}
     >
       <span
-        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-          checked ? 'translate-x-6' : 'translate-x-1'
-        }`}
+        className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform ${checked ? 'translate-x-5' : 'translate-x-0.5'
+          }`}
       />
     </button>
   );

components/Tooltip.tsx

@@ -90,7 +90,7 @@ const Tooltip: React.FC<TooltipProps> = ({ targetRef, content, position = 'top',
   const overlayRoot = document.getElementById('overlay-root');
   if (!overlayRoot) return null;
 
-  const baseClassName = 'fixed z-50 w-max px-2 py-1 text-xs font-semibold text-tooltip-text bg-tooltip-bg rounded-md shadow-lg transition-opacity duration-200 pointer-events-none';
+  const baseClassName = 'fixed z-50 w-max px-2 py-1 text-xs font-semibold text-tooltip-text bg-tooltip-bg rounded-sm border border-border-color transition-opacity duration-100 pointer-events-none';
   const composedClassName = className ? `${baseClassName} ${className}` : `${baseClassName} max-w-xs`;
 
   return ReactDOM.createPortal(

components/WelcomeScreen.tsx

@@ -4,13 +4,13 @@ import { PlusIcon, FileIcon } from './Icons';
 import Button from './Button';
 
 interface WelcomeScreenProps {
-  onNewDocument: () => void;
+    onNewDocument: () => void;
 }
 
 export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ onNewDocument }) => {
     return (
         <div className="flex flex-col items-center justify-center h-full text-center text-text-secondary p-8 bg-background">
-            <div className="p-8 bg-secondary rounded-lg border border-border-color max-w-lg">
+            <div className="p-8 bg-secondary rounded-sm border border-border-color max-w-lg">
                 <FileIcon className="w-16 h-16 text-primary mx-auto mb-6" />
                 <h2 className="text-xl font-semibold text-text-main mb-2">Welcome to DocForge</h2>
                 <p className="max-w-md mb-8 text-sm">