fix: improve searchbar colors (#1871)

fern-api · Dec 7, 2024 · 39ff32b · 39ff32b
1 parent 6f74c73
commit 39ff32b
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 9 deletions.
diff --git a/packages/ui/components/src/kbd.scss b/packages/ui/components/src/kbd.scss
@@ -8,6 +8,6 @@
 
 @layer components {
     .fern-kbd {
-        @apply bg-[var(--grayscale-a3)] text-[var(--grayscale-a10)] rounded px-1 py-0.5 text-xs;
+        @apply bg-[var(--grayscale-1)] text-[var(--grayscale-a12)] border border-[var(--grayscale-a6)] rounded-md px-1.5 py-0.5 text-xs;
     }
 }
diff --git a/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-search-button.tsx b/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-search-button.tsx
@@ -5,14 +5,12 @@ import { ComponentPropsWithoutRef, forwardRef, memo } from "react";
 import { cn } from "../ui/cn";
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-start gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--accent-6)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-9 p-2 w-full",
+    "inline-flex items-center justify-start gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors hover:transition-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--accent-6)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-9 p-2 w-full cursor-text",
     {
         variants: {
             variant: {
-                default:
-                    "border border-[var(--grayscale-a6)] bg-[var(--grayscale-a1)] text-[var(--grayscale-a10)] hover:bg-[var(--grayscale-a2)]",
-                loading:
-                    "border border-[var(--grayscale-a6)] bg-[var(--grayscale-a1)] text-[var(--grayscale-a10)] cursor-default",
+                default: "bg-[var(--grayscale-a3)] text-[var(--grayscale-a10)] hover:bg-[var(--grayscale-a4)]",
+                loading: "bg-[var(--grayscale-a3)] text-[var(--grayscale-a10)] cursor-default",
             },
         },
         defaultVariants: {

diff --git a/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-search-dialog.tsx b/packages/ui/fern-docs-search-ui/src/components/desktop/desktop-search-dialog.tsx
@@ -53,7 +53,7 @@ export const DesktopSearchDialog = memo(
                     <Dialog.Content
                         className={cn(
                             "fixed top-[15%] left-1/2 w-[640px] -translate-x-1/2 shadow-xl overflow-hidden origin-left outline-none",
-                            "before:absolute before:inset-0 before:bg-[var(--white-a6)] dark:before:bg-[var(--black-a6)] before:-z-50 before:pointer-events-none",
+                            "before:absolute before:inset-0 before:bg-[var(--white-a9)] dark:before:bg-[var(--black-a9)] before:-z-50 before:pointer-events-none",
                         )}
                         asChild={asChild}
                         onEscapeKeyDown={(e) => {

diff --git a/packages/ui/fern-docs-search-ui/src/components/ui/dropdown.tsx b/packages/ui/fern-docs-search-ui/src/components/ui/dropdown.tsx
@@ -64,7 +64,7 @@ const DropdownMenuContent = React.forwardRef<
             className={cn(
                 "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--grayscale-a6)] bg-[var(--grayscale-a1)] backdrop-blur-xl p-1 text-[var(--grayscale-a12)] shadow-md",
                 "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-                "before:absolute before:inset-0 before:bg-[var(--white-a6)] dark:before:bg-[var(--black-a6)] before:-z-50 before:pointer-events-none",
+                "before:absolute before:inset-0 before:bg-[var(--white-a9)] dark:before:bg-[var(--black-a9)] before:-z-50 before:pointer-events-none",
                 className,
             )}
             {...props}

diff --git a/packages/ui/fern-docs-search-ui/src/components/ui/tooltip.tsx b/packages/ui/fern-docs-search-ui/src/components/ui/tooltip.tsx
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
         sideOffset={sideOffset}
         className={cn(
             "z-50 overflow-hidden rounded-md border border-[var(--grayscale-a6)] bg-[var(--grayscale-a1)] backdrop-blur-xl px-3 py-1.5 text-sm text-[var(--accent-12)] shadow-md",
-            "before:absolute before:inset-0 before:bg-[var(--white-a6)] dark:before:bg-[var(--black-a6)] before:-z-50 before:pointer-events-none",
+            "before:absolute before:inset-0 before:bg-[var(--white-a9)] dark:before:bg-[var(--black-a9)] before:-z-50 before:pointer-events-none",
             {
                 "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2":
                     animate,