diff --git a/ui/goose2/src/shared/styles/globals.css b/ui/goose2/src/shared/styles/globals.css index d0e2c96a92..ecd933eb6d 100644 --- a/ui/goose2/src/shared/styles/globals.css +++ b/ui/goose2/src/shared/styles/globals.css @@ -208,6 +208,7 @@ * { @apply border-border; } + body { @apply bg-background text-foreground font-sans antialiased; } diff --git a/ui/goose2/src/shared/ui/button.tsx b/ui/goose2/src/shared/ui/button.tsx index fe58a8de42..9e8c98e939 100644 --- a/ui/goose2/src/shared/ui/button.tsx +++ b/ui/goose2/src/shared/ui/button.tsx @@ -18,15 +18,38 @@ const buttonVariants = cva( secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", + toolbar: + "justify-start bg-transparent font-normal text-muted-foreground shadow-none hover:bg-accent hover:text-accent-foreground active:bg-accent active:text-accent-foreground focus-visible:ring-0 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground", link: "text-brand underline-offset-4 hover:underline", }, size: { + xs: "h-7 rounded-md px-2.5 text-xs", default: "h-9 px-4 py-2", sm: "h-8 rounded-md px-3 text-xs", lg: "h-10 rounded-md px-8", icon: "h-9 w-9", + "icon-xs": "h-7 w-7", + "icon-sm": "h-8 w-8", + "icon-lg": "h-10 w-10", }, }, + compoundVariants: [ + { + variant: "toolbar", + size: "xs", + className: "gap-1.5 px-1.5 text-[13px]", + }, + { + variant: "toolbar", + size: "sm", + className: "gap-1.5 px-2 text-[13px]", + }, + { + variant: "toolbar", + size: "default", + className: "gap-1.5 px-2.5 text-[13px]", + }, + ], defaultVariants: { variant: "default", size: "default", @@ -44,6 +67,7 @@ const Button = React.forwardRef( const Comp = asChild ? Slot : "button"; return ( (({ className, inset, ...props }, ref) => ( , + React.ComponentPropsWithoutRef +>(({ className, children, checked, ...props }, ref) => ( + + + + + + + {children} + +)); +DropdownMenuCheckboxItem.displayName = + DropdownMenuPrimitive.CheckboxItem.displayName; + +const DropdownMenuRadioItem = React.forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)); +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName; + const DropdownMenuLabel = React.forwardRef< React.ComponentRef, React.ComponentPropsWithoutRef & { @@ -60,9 +115,9 @@ const DropdownMenuLabel = React.forwardRef< >(({ className, inset, ...props }, ref) => ( ) => ( + +); +DropdownMenuShortcut.displayName = "DropdownMenuShortcut"; + +const DropdownMenuSubTrigger = React.forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef & { + inset?: boolean; + } +>(({ className, inset, children, ...props }, ref) => ( + + {children} + + +)); +DropdownMenuSubTrigger.displayName = + DropdownMenuPrimitive.SubTrigger.displayName; + +const DropdownMenuSubContent = React.forwardRef< + React.ComponentRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +DropdownMenuSubContent.displayName = + DropdownMenuPrimitive.SubContent.displayName; + export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, + DropdownMenuCheckboxItem, DropdownMenuLabel, + DropdownMenuRadioItem, DropdownMenuSeparator, + DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, DropdownMenuRadioGroup, };